mirror of
https://github.com/Hopiu/wagtail.git
synced 2026-05-10 16:24:49 +00:00
first style pass
This commit is contained in:
Dave Cranwell
parent
5445f584a2
commit
4e379610a5
7 changed files with 116 additions and 41 deletions
|
|
@ -1,7 +1,5 @@
|
|||
{% extends "wagtailadmin/base.html" %}
|
||||
{% load wagtailadmin_tags %}
|
||||
{% load compress i18n %}
|
||||
{% load gravatar %}
|
||||
{% load wagtailadmin_tags compress i18n static gravatar %}
|
||||
|
||||
{% block extra_css %}
|
||||
{% compress css %}
|
||||
|
|
@ -345,6 +343,13 @@
|
|||
<div class="status-tag primary">Primary tag</div>
|
||||
|
||||
<div class="status-tag">Secondary tag</div>
|
||||
|
||||
<h3>Loading mask</h3>
|
||||
<p>Add the following <code>div</code> around any items you wish to display with a spinner overlay and fading out</p>
|
||||
<p>Remove the "loading" class to disable the effect</p>
|
||||
<div class="loading-mask loading" style="width:200px">
|
||||
<img src="{% static 'wagtailadmin/images/wagtail-logo.svg' %}" width="200" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="icons">
|
||||
|
|
|
|||
9
wagtail/wagtailadmin/static/wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js
vendored
Normal file
9
wagtail/wagtailadmin/static/wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/*
|
||||
* jQuery throttle / debounce - v1.1 - 3/7/2010
|
||||
* http://benalman.com/projects/jquery-throttle-debounce-plugin/
|
||||
*
|
||||
* Copyright (c) 2010 "Cowboy" Ben Alman
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* http://benalman.com/about/license/
|
||||
*/
|
||||
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);
|
||||
|
|
@ -194,12 +194,50 @@ a.tag:hover{
|
|||
}
|
||||
}
|
||||
|
||||
/* Loading mask: overlays a certain area with a loading spinner and a faded out cover to prevent interaction */
|
||||
.loading-mask{
|
||||
&.loading{
|
||||
position:relative;
|
||||
|
||||
&:before, &:after{
|
||||
position:absolute;
|
||||
display:block;
|
||||
}
|
||||
|
||||
&:before{
|
||||
content:"";
|
||||
top:-5px;left:-5px;bottom:-5px;right:-5px;
|
||||
z-index:1;
|
||||
background-color:rgba(255,255,255,0.5);
|
||||
}
|
||||
&:after{
|
||||
font-size:30px;
|
||||
width:30px;
|
||||
line-height:30px;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin:-15px 0 0 -15px;
|
||||
font-family:wagtail;
|
||||
animation: spin 0.5s infinite linear;
|
||||
-webkit-animation: spin 0.5s infinite linear;
|
||||
-moz-animation: spin 0.5s infinite linear;
|
||||
content:"1";
|
||||
z-index:2;
|
||||
color:$color-teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* make a block-level element inline */
|
||||
.inline{
|
||||
display:inline;
|
||||
}
|
||||
|
||||
.inline-block{
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.unlist{
|
||||
@include unlist();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@ input, textarea, select, .richtext, .tagit{
|
|||
&:disabled, &[disabled], &:disabled:hover, &[disabled]:hover{
|
||||
background-color:inherit;
|
||||
cursor:not-allowed;
|
||||
color:$color-grey-4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -532,6 +533,7 @@ li.focused > .help{
|
|||
|
||||
.field-row{
|
||||
@include clearfix();
|
||||
|
||||
/* negative margin the bottom so it doesn't add too much space */
|
||||
margin-bottom:-1.2em;
|
||||
}
|
||||
|
|
@ -819,14 +821,31 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
@include row();
|
||||
}
|
||||
|
||||
.field-content{
|
||||
@include column(10,0);
|
||||
}
|
||||
|
||||
.field-col{
|
||||
float:left;
|
||||
padding-left:0 !important;
|
||||
}
|
||||
|
||||
.field-content{
|
||||
@include column(10);
|
||||
padding-right:0;
|
||||
padding-left:0;
|
||||
}
|
||||
/* anything less than 4 columns or greater than 6 is impractical */
|
||||
&.col4{
|
||||
label{
|
||||
@include column(2,0,4);
|
||||
}
|
||||
.field-content{
|
||||
@include column(2, $padding, 4);
|
||||
}
|
||||
}
|
||||
&.col6{
|
||||
label{
|
||||
@include column(2,0,6);
|
||||
}
|
||||
.field-content{
|
||||
@include column(4, $padding, 6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
$(function() {
|
||||
"use strict";
|
||||
|
||||
$('.image-url-generator').each(function() {
|
||||
var $this = $(this);
|
||||
var $form = $this.find('form');
|
||||
var $filterMethodField = $form.find('select#id_filter_method');
|
||||
var $widthField = $form.find('input#id_width');
|
||||
var $heightField = $form.find('input#id_height');
|
||||
var $result = $this.find('div.result');
|
||||
var $result = $this.find('#result-url');
|
||||
var $loadingMask = $this.find('.loading-mask')
|
||||
var $preview = $this.find('img.preview');
|
||||
|
||||
var generatorUrl = $this.data('generatorUrl');
|
||||
|
|
@ -13,6 +16,8 @@ $(function() {
|
|||
function formChangeHandler() {
|
||||
var filterSpec = $filterMethodField.val();
|
||||
|
||||
$loadingMask.addClass('loading');
|
||||
|
||||
if (filterSpec == 'original') {
|
||||
$widthField.prop('disabled', true);
|
||||
$heightField.prop('disabled', true);
|
||||
|
|
@ -33,34 +38,24 @@ $(function() {
|
|||
// Fields with width and height
|
||||
$.getJSON(generatorUrl.replace('__filterspec__', filterSpec))
|
||||
.done(function(data) {
|
||||
$result.text(data['url']);
|
||||
$result.val(data['url']);
|
||||
$preview.attr('src', data['url']);
|
||||
$loadingMask.removeClass('loading');
|
||||
})
|
||||
.fail(function(data) {
|
||||
$result.text(data.responseJSON['error']);
|
||||
$result.val(data.responseJSON['error']);
|
||||
$preview.attr('src', '');
|
||||
$loadingMask.removeClass('loading');
|
||||
});
|
||||
}
|
||||
|
||||
$form.change(formChangeHandler);
|
||||
$form.keyup(formChangeHandler);
|
||||
$form.change($.debounce(500, formChangeHandler));
|
||||
$form.keyup($.debounce(500, formChangeHandler));
|
||||
formChangeHandler();
|
||||
|
||||
// When the user clicks the URL, automatically select the whole thing (for easier copying)
|
||||
$result.click(function() {
|
||||
if (document.selection) {
|
||||
document.selection.empty();
|
||||
|
||||
var range = document.body.createTextRange();
|
||||
range.moveToElementText(this);
|
||||
range.select();
|
||||
} else if (window.getSelection) {
|
||||
window.getSelection().removeAllRanges();
|
||||
|
||||
var range = document.createRange();
|
||||
range.selectNodeContents(this);
|
||||
window.getSelection().addRange(range);
|
||||
}
|
||||
$(this).select();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
{% image image max-800x600 %}
|
||||
|
||||
{% if url_generator_enabled %}
|
||||
<a href="{% url 'wagtailimages_url_generator' image.id %}">URL Generator</a>
|
||||
<a href="{% url 'wagtailimages_url_generator' image.id %}" class="button bicolor icon icon-link">URL Generator</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,27 +5,36 @@
|
|||
|
||||
{% block bodyclass %}menu-images{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
{% compress js %}
|
||||
<script type="text/javascript" src="{% static 'wagtailimages/js/image-url-generator.js' %}"></script>
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% trans "Generating URL" as title_str %}
|
||||
{% include "wagtailadmin/shared/header.html" with title=title_str subtitle=image.title icon="image" %}
|
||||
|
||||
<div class="image-url-generator nice-padding" data-generator-url="{% url 'wagtailimages_generate_url' image.id '__filterspec__' %}">
|
||||
<form>
|
||||
{% for field in form %}
|
||||
{% include "wagtailadmin/shared/field_as_li.html" %}
|
||||
{% endfor %}
|
||||
<ul class="fields">
|
||||
{% include "wagtailadmin/shared/field_as_li.html" with field=form.filter_method %}
|
||||
<li>
|
||||
<ul class="field-row">
|
||||
{% include "wagtailadmin/shared/field_as_li.html" with field=form.width li_classes="field-col col4" %}
|
||||
{% include "wagtailadmin/shared/field_as_li.html" with field=form.height li_classes="field-col col4" %}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
|
||||
<h3>URL</h3>
|
||||
<div class="result"></div>
|
||||
<h2>URL</h2>
|
||||
<textarea id="result-url" rows="1"></textarea>
|
||||
|
||||
<h3>Preview</h3>
|
||||
<img class="preview" src="" alt="Preview">
|
||||
<h2>Preview</h2>
|
||||
<div class="loading-mask inline-block">
|
||||
<img class="preview" src="" alt="Preview" />
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
{% compress js %}
|
||||
<script src="{% static 'wagtailadmin/js/vendor/jquery.ba-throttle-debounce.min.js' %}"></script>
|
||||
<script src="{% static 'wagtailimages/js/image-url-generator.js' %}"></script>
|
||||
{% endcompress %}
|
||||
{% endblock %}
|
||||
Loading…
Reference in a new issue