kopia lustrzana https://github.com/wagtail/wagtail
move preview css to scss file
Dave Cranwell
rodzic
01df448796
commit
ace28dd602
|
|
@ -332,7 +332,9 @@ $(function() {
|
|||
});
|
||||
|
||||
/* Set up behaviour of preview button */
|
||||
$('.action-preview').click(function() {
|
||||
$('.action-preview').click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var previewWindow = window.open($(this).data('placeholder'), $(this).data('windowname'));
|
||||
|
||||
$.ajax({
|
||||
|
|
@ -349,9 +351,10 @@ $(function() {
|
|||
frame.document.write(data);
|
||||
frame.document.close();
|
||||
|
||||
var removeTimeout = setTimeout(function(){
|
||||
var hideTimeout = setTimeout(function(){
|
||||
pdoc.getElementById('loading-spinner-wrapper').className += 'remove';
|
||||
}, 100) /* just enough to give effect without adding discernible slowness */
|
||||
clearTimeout(hideTimeout);
|
||||
}, 50) // just enough to give effect without adding discernible slowness
|
||||
} else {
|
||||
previewWindow.close();
|
||||
document.open();
|
||||
|
|
@ -365,11 +368,11 @@ $(function() {
|
|||
error output rather than giving a 'friendly' error message so that
|
||||
developers can debug template errors. (On a production site, we'd
|
||||
typically be serving a friendly custom 500 page anyhow.) */
|
||||
|
||||
previewWindow.document.open();
|
||||
previewWindow.document.write(xhr.responseText);
|
||||
previewWindow.document.close();
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
@import "../variables.scss";
|
||||
@import "../mixins.scss";
|
||||
|
||||
/* This font is just a single spinner glyph */
|
||||
@font-face {
|
||||
font-family: 'wagtail';
|
||||
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggiBucAAAC8AAAAYGNtYXAAIwC5AAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zu2pTysAAAFwAAAA0GhlYWQAoBqvAAACQAAAADZoaGVhA+IB5gAAAngAAAAkaG10eAMAAAAAAAKcAAAAFGxvY2EAKAB8AAACsAAAAAxtYXhwAAgAMwAAArwAAAAgbmFtZTAOqMkAAALcAAABOXBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAABAAAAAMQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIAAx//3//wAAAAAAIAAx//3//wAB/+P/0wADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/+ACAAHgABcAMAAANy4DNTQ+Ah8BByYOAhUUHgIXBxcnNz4DJzYuAic/AR4DBxYOAiNLEhwTCihGXTUgIChGNB4HDxQOKLAhISdHMx8BAQgOFQ0mBxEdEgsBASlFXjQrEiouMRo0XkUpAR8hAR8zRycUJCQeDwR0IR8BHTVFKRImIiANBSgSKi4xGjVdRigAAAEAAAABAADi0eQAXw889QALAgAAAAAAz8Bs+QAAAADPwGz5AAD/4AIAAeAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAgAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAgAAAAAAAAAACgAUAB4AaAABAAAABQAxAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAHcAYQBnAHQAYQBpAGwAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAYQBnAHQAYQBpAGx3YWd0YWlsAHcAYQBnAHQAYQBpAGwAUgBlAGcAdQBsAGEAcgB3AGEAZwB0AGEAaQBsAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
|
||||
url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARsAAoAAAAABCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAO4AAADuSyBzg09TLzIAAAHkAAAAYAAAAGAIIgbnY21hcAAAAkQAAABMAAAATAAjALlnYXNwAAACkAAAAAgAAAAIAAAAEGhlYWQAAAKYAAAANgAAADYAoBqvaGhlYQAAAtAAAAAkAAAAJAPiAeZobXR4AAAC9AAAABQAAAAUAwAAAG1heHAAAAMIAAAABgAAAAYABVAAbmFtZQAAAxAAAAE5AAABOTAOqMlwb3N0AAAETAAAACAAAAAgAAMAAAEABAQAAQEBCHdhZ3RhaWwAAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAAB0Dx0AAAB5ER0AAAAJHQAAAOUSAAYBAQgPERMWGXdhZ3RhaWx3YWd0YWlsdTB1MXUyMHUzMQAAAgGJAAMABQEBBAcKDWT8lA78lA78lA77lA7WthVbu3DMi8+L9yH3B/cH9yGLCKtra2sFIYs1NYshi1ifWq9nCGSGBfdD+wcVa6urqwX1i+Hhi/WLvne8Z68IspCRswW7W6ZKi0eL+yH7B/sH+yGLCA74lBT4lBWLDAoAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAEAAAAAxAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAgADH//f//AAAAAAAgADH//f//AAH/4//TAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAaXw/5l8PPPUACwIAAAAAAM/AbPkAAAAAz8Bs+QAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAQAAAAIAAAAAAFAAAAUAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwB3AGEAZwB0AGEAaQBsAFYAZQByAHMAaQBvAG4AIAAxAC4AMAB3AGEAZwB0AGEAaQBsd2FndGFpbAB3AGEAZwB0AGEAaQBsAFIAZQBnAHUAbABhAHIAdwBhAGcAdABhAGkAbABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html,body {
|
||||
height:100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#loading-spinner-wrapper{
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
text-align:center;
|
||||
height:100%;
|
||||
width:100%;
|
||||
font-size:0em;
|
||||
z-index:999999;
|
||||
background:white;
|
||||
@include transition(all 0.3s ease);
|
||||
|
||||
&.remove{
|
||||
bottom:-100%;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
width:0px;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin-left:-0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
#loading-spinner{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
width:120px;
|
||||
height:120px;
|
||||
vertical-align:middle;
|
||||
|
||||
&:after{
|
||||
font-size:120px;
|
||||
line-height:120px;
|
||||
color:$color-teal;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
font-family:wagtail;
|
||||
content:"1";
|
||||
width:1em;
|
||||
animation: spin 0.8s infinite linear;
|
||||
-webkit-animation: spin 0.8s infinite linear;
|
||||
-moz-animation: spin 0.8s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
#preview-frame{
|
||||
height:100%;
|
||||
width:100%;
|
||||
position:absolute;
|
||||
z-index:1;
|
||||
border:0;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
from { -webkit-transform: rotate(0deg); }
|
||||
to { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
from { -moz-transform: rotate(0deg); }
|
||||
to { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
|
|
@ -1,93 +1,13 @@
|
|||
<!DOCTYPE HTML>
|
||||
{% load static %}
|
||||
{% load static compress i18n %}
|
||||
<html>
|
||||
<head>
|
||||
<title>Preview loading...</title>
|
||||
<style>
|
||||
/* This font is just a single spinner glyph */
|
||||
@font-face {
|
||||
font-family: 'wagtail';
|
||||
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggiBucAAAC8AAAAYGNtYXAAIwC5AAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zu2pTysAAAFwAAAA0GhlYWQAoBqvAAACQAAAADZoaGVhA+IB5gAAAngAAAAkaG10eAMAAAAAAAKcAAAAFGxvY2EAKAB8AAACsAAAAAxtYXhwAAgAMwAAArwAAAAgbmFtZTAOqMkAAALcAAABOXBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAABAAAAAMQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIAAx//3//wAAAAAAIAAx//3//wAB/+P/0wADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/+ACAAHgABcAMAAANy4DNTQ+Ah8BByYOAhUUHgIXBxcnNz4DJzYuAic/AR4DBxYOAiNLEhwTCihGXTUgIChGNB4HDxQOKLAhISdHMx8BAQgOFQ0mBxEdEgsBASlFXjQrEiouMRo0XkUpAR8hAR8zRycUJCQeDwR0IR8BHTVFKRImIiANBSgSKi4xGjVdRigAAAEAAAABAADi0eQAXw889QALAgAAAAAAz8Bs+QAAAADPwGz5AAD/4AIAAeAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAgAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAgAAAAAAAAAACgAUAB4AaAABAAAABQAxAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoAKABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoAKABjAHcAYQBnAHQAYQBpAGwAVgBlAHIAcwBpAG8AbgAgADEALgAwAHcAYQBnAHQAYQBpAGx3YWd0YWlsAHcAYQBnAHQAYQBpAGwAUgBlAGcAdQBsAGEAcgB3AGEAZwB0AGEAaQBsAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
|
||||
url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARsAAoAAAAABCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAO4AAADuSyBzg09TLzIAAAHkAAAAYAAAAGAIIgbnY21hcAAAAkQAAABMAAAATAAjALlnYXNwAAACkAAAAAgAAAAIAAAAEGhlYWQAAAKYAAAANgAAADYAoBqvaGhlYQAAAtAAAAAkAAAAJAPiAeZobXR4AAAC9AAAABQAAAAUAwAAAG1heHAAAAMIAAAABgAAAAYABVAAbmFtZQAAAxAAAAE5AAABOTAOqMlwb3N0AAAETAAAACAAAAAgAAMAAAEABAQAAQEBCHdhZ3RhaWwAAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAAB0Dx0AAAB5ER0AAAAJHQAAAOUSAAYBAQgPERMWGXdhZ3RhaWx3YWd0YWlsdTB1MXUyMHUzMQAAAgGJAAMABQEBBAcKDWT8lA78lA78lA77lA7WthVbu3DMi8+L9yH3B/cH9yGLCKtra2sFIYs1NYshi1ifWq9nCGSGBfdD+wcVa6urqwX1i+Hhi/WLvne8Z68IspCRswW7W6ZKi0eL+yH7B/sH+yGLCA74lBT4lBWLDAoAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAEAAAAAxAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAgADH//f//AAAAAAAgADH//f//AAH/4//TAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAaXw/5l8PPPUACwIAAAAAAM/AbPkAAAAAz8Bs+QAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAQAAAAIAAAAAAFAAAAUAAAAAAA4ArgABAAAAAAABAA4AAAABAAAAAAACAA4ARwABAAAAAAADAA4AJAABAAAAAAAEAA4AVQABAAAAAAAFABYADgABAAAAAAAGAAcAMgABAAAAAAAKACgAYwADAAEECQABAA4AAAADAAEECQACAA4ARwADAAEECQADAA4AJAADAAEECQAEAA4AVQADAAEECQAFABYADgADAAEECQAGAA4AOQADAAEECQAKACgAYwB3AGEAZwB0AGEAaQBsAFYAZQByAHMAaQBvAG4AIAAxAC4AMAB3AGEAZwB0AGEAaQBsd2FndGFpbAB3AGEAZwB0AGEAaQBsAFIAZQBnAHUAbABhAHIAdwBhAGcAdABhAGkAbABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
html,body {
|
||||
height:100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#loading-spinner-wrapper{
|
||||
position:fixed;
|
||||
bottom:0;
|
||||
text-align:center;
|
||||
height:100%;
|
||||
width:100%;
|
||||
font-size:0em;
|
||||
z-index:999999;
|
||||
background:white;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
-o-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
#loading-spinner-wrapper.remove{
|
||||
bottom:-100%;
|
||||
}
|
||||
#loading-spinner-wrapper:before {
|
||||
content: '';
|
||||
width:0px;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin-left:-0.4em;
|
||||
}
|
||||
#loading-spinner{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
width:120px;
|
||||
height:120px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
#loading-spinner:after{
|
||||
font-size:120px;
|
||||
line-height:120px;
|
||||
color:#43b1b0;
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
font-family:wagtail;
|
||||
content:"1";
|
||||
width:1em;
|
||||
animation: spin 0.8s infinite linear;
|
||||
-webkit-animation: spin 0.8s infinite linear;
|
||||
-moz-animation: spin 0.8s infinite linear;
|
||||
}
|
||||
|
||||
#preview-frame{
|
||||
height:100%;
|
||||
width:100%;
|
||||
position:absolute;
|
||||
z-index:1;
|
||||
border:0;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes spin {
|
||||
from { -webkit-transform: rotate(0deg); }
|
||||
to { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes spin {
|
||||
from { -moz-transform: rotate(0deg); }
|
||||
to { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
<title>{% trans "Preview" %}</title>
|
||||
{% compress css %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/preview.scss" type="text/x-scss" />
|
||||
{% endcompress %}
|
||||
</head>
|
||||
<body>
|
||||
<body class="ready">
|
||||
<div id="loading-spinner-wrapper">
|
||||
<div id="loading-spinner"></div>
|
||||
</div>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue