Hopiu/wagtail
1
0
Fork 0
mirror of https://github.com/Hopiu/wagtail.git synced 2026-05-11 16:53:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

preview buttons (and dropdowns generally) improve a little

Browse source
This commit is contained in:
Dave Cranwell 2014-04-09 12:00:07 +01:00
parent 75b127a07c
commit e2cf9f16e4
11 changed files with 73 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss
View file

@ -6,6 +6,15 @@
cursor:pointer;
}
input[type=button], input[type=submit], button, .button{
padding:1em 0;
display:block;
width:100%;
text-align:left;
padding-left:1em;
}
ul{
@include unlist();
background-color:$color-teal;
@ -25,7 +34,6 @@
}
a{
box-sizing:border-box;
white-space: nowrap;
position:relative;
@ -55,7 +63,7 @@
a, input[type=submit], input[type=reset], input[type=button], .button, button{
font-size:0.95em;
-webkit-font-smoothing: auto;
text-shadow:-1px -1px 1px rgba(0,0,0,0.2);
@include border-radius(0);
}
label{
@ -95,16 +103,7 @@
bottom:100%;
}
input[type=button], input[type=submit], button{
padding:1em 0;
@include border-radius(0);
display:block;
width:100%;
text-align:left;
padding-left:1em;
text-shadow:-1px -1px 1px rgba(0,0,0,0.2);
}
.button{
float:left;
@ -132,6 +131,21 @@
&.open > .button + .dropdown-toggle{
background-color:$color-teal-darker;
}
/* Styles for dropdowns which are also buttons e.g page editor */
&.dropdown-button{
.dropdown-toggle{
@include border-radius(0 3px 3px 0);
}
&.open{
> input[type=button], > input[type=submit], > button, > .button{
@include border-radius(0 0 3px 3px);
}
.dropdown-toggle{
@include border-radius(0 0 3px 0);
}
}
}
}
.dropdown.white{

10
wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
View file

@ -142,6 +142,7 @@ input[type=checkbox]:checked:before{
/* Core button style */
input[type=submit], input[type=reset], input[type=button], .button, button{
font-family:Open Sans,Arial,sans-serif;
@include border-radius(3px);
width:auto;
padding:0.7em 1em;
@ -160,6 +161,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
overflow:hidden;
position:relative;
font-weight:normal;
outline:none;
-moz-appearance: none;
-moz-box-sizing:content-box;
@ -169,7 +171,6 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
}
&.button-secondary{
border:1px solid $color-button;
color:$color-button;
background-color:white;
}
@ -257,6 +258,13 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
}
}
button.icon{
&:before,
&:after{
line-height:0;
}
}
.multiple{
@include transition(max-height 10s ease);
padding:0;

BIN
wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.eot
View file

Binary file not shown.

2
wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.svg
View file

@ -62,11 +62,11 @@
<glyph unicode="&#85;" d="M218 63c0-35-29-63-64-63-35 0-64 28-64 63 0 36 29 64 64 64 35 0 64-28 64-64z m0 193c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0 193c0-36-29-64-64-64-35 0-64 28-64 64 0 35 29 63 64 63 35 0 64-28 64-63z m204-386c0-35-29-63-64-63-35 0-64 28-64 63 0 36 29 64 64 64 35 0 64-28 64-64z m0 193c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0 193c0-36-29-64-64-64-35 0-64 28-64 64 0 35 29 63 64 63 35 0 64-28 64-63z"/>
<glyph unicode="&#51;" d="M332 426l0-94 49 0 0-98-192 0 0 55-152-102 152-101 0 54 286 0 0 286z"/>
<glyph unicode="&#50;" d="M192 320l-192 0 149-109-54-179 153 107 168-107-69 179 165 109-192 0-72 184z"/>
<glyph unicode="&#52;" d="M352 256c0-53-43-96-96-96-53 0-96 43-96 96 0 53 43 96 96 96 53 0 96-43 96-96z m-96 160c-160 0-256-159-256-159 0 0 96-161 256-161 160 0 256 160 256 160 0 0-96 160-256 160z m0-288c-140 0-216 128-216 128 0 0 76 128 216 128 140 0 216-128 216-128 0 0-76-128-216-128z"/>
<glyph unicode="&#53;" d="M135 456l241 0 0-23-241 0z m270-177l-127-124 0 222-45 0 0-220-125 122-33-32 181-181 181 181z"/>
<glyph unicode="&#54;" d="M136 456l241 0 0-23-241 0z m-28-302l126 124 0-222 45 0 0 220 126-122 32 32-181 181-181-181z"/>
<glyph unicode="&#48;" d="M346 321c0-2 0-4 0-6 0-2-1-4-1-7 0-2-1-5-1-7-1-3-2-6-2-9-1-3-2-6-3-9-1-3-2-6-3-10-1-1-2-3-2-4-1-1-1-2-1-3-1-1-1-1-2-2-1-2-1-3-2-5-1-2-2-3-3-5l-2-2-1-3c-1-1-2-3-4-4-2-3-4-7-7-9-3-3-6-6-9-9l-4-4c-2-1-3-2-5-4-6-5-13-9-20-13-7-4-14-7-21-10-7-3-14-6-21-8-6-2-12-4-18-6-12-3-22-5-29-7-7-2-11-2-11-2 0 0 4 0 11 2 7 1 17 3 29 6 6 2 12 3 19 5 7 2 14 5 21 8 7 3 14 6 21 10 7 3 14 8 21 13 2 1 3 2 5 3l5 4c3 3 6 6 8 9 3 3 6 6 8 9 2 2 3 3 4 5l2 2c0 1 1 2 1 3 1 1 2 3 4 5 0 1 1 3 2 5 1 0 1 1 2 2 0 1 0 2 1 3 1 1 1 3 2 5 2 3 3 6 4 9 1 4 2 7 3 10 1 3 1 6 2 8 1 3 1 6 2 8 0 3 0 5 1 7 0 3 0 5 0 6 1 8 1 12 1 12l-6 0c0 0 0-4-1-11m112 80l-34 33c-1 33-22 55-32 61-10 9-33 16-59 13-25-4-61-17-86-64-49-92-154-289-155-291-1 0-1-1 0-1 0-1 1-1 1-1l40 7-78-151c0-1 0-1 1-2 0 0 0 0 1 0 0 0 0 0 0 0l56 10c0 0 1 0 1 1l41 120c105 1 178 26 218 77 42 54 36 122 29 154l-5 31 60 0c0 0 1 0 1 1 1 0 0 1 0 2m-55 42c0-5-5-10-10-10-6 0-10 5-10 10 0 6 4 11 10 11 5 0 10-5 10-11m-33-228c-40-50-112-75-216-75-1 0-1-1-1-2l-42-120-51-9 78 151c0 1 0 1 0 2-1 0-1 1-2 1l-40-8c14 26 109 202 154 287 25 46 59 59 83 62 25 3 46-3 56-10l0-22c-2 0-16 5-29 5-13 0-28-5-37-15-16-18-20-36-12-66 54 10 78-13 87-27 7-30 15-99-28-154m29 186l23 30 30-30z"/>
<glyph unicode="&#63;" d="M253 492c65 0 120-22 167-67 46-45 70-100 72-165 0-65-22-121-68-167-45-47-100-71-165-73-65 0-121 22-167 68-47 45-71 100-72 165-1 65 21 121 67 167 46 47 101 71 166 72m-1-379c10 0 19 3 25 9 6 7 10 15 10 24 0 11-2 19-9 26-6 6-15 9-25 9 0 0-1 0-1 0-10 0-18-3-24-9-7-6-10-14-11-24 0-10 3-18 10-25 6-6 14-10 24-10 0 0 1 0 1 0m85 168c9 11 13 24 13 40 0 26-9 46-27 59-18 13-41 19-69 19-22 0-40-4-53-13-24-14-36-39-37-75 0 0 0-2 0-2 0 0 56 0 56 0 0 0 0 2 0 2 0 9 3 18 8 28 6 8 15 12 28 12 14 0 23-3 27-10 5-7 8-14 8-23 0-6-3-13-8-20-3-4-7-8-11-10 0 0-3-2-3-2-2-2-4-4-8-6-3-2-7-5-10-8-4-2-7-5-11-8-4-3-7-6-9-9-4-7-7-20-9-40 0 0 0-4 0-4 0 0 56 0 56 0 0 0 0 2 0 2 0 4 0 9 2 14 2 7 6 13 14 19 0 0 14 9 14 9 16 12 25 20 29 26"/>
<glyph unicode="&#33;" d="M499 65c4-6 4-12 0-18-3-5-8-8-15-8 0 0-457 0-457 0-6 0-11 3-14 8-4 6-4 12-1 18 0 0 228 400 228 400 3 6 8 9 16 9 7 0 12-3 15-9 0 0 228-400 228-400m-215 25c0 0 0 51 0 51 0 0-56 0-56 0 0 0 0-51 0-51 0 0 56 0 56 0m0 89c0 0 0 154 0 154 0 0-56 0-56 0 0 0 0-154 0-154 0 0 56 0 56 0"/>
<glyph unicode="&#57;" d="M256 512c-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256 0 141-115 256-256 256z m-40-374l-117 118 45 45 72-73 154 154 45-45z"/>
<glyph unicode="&#52;" d="M475 238c-29 45-65 78-108 101 11-20 17-42 17-65 0-35-13-65-38-90-25-25-55-38-90-38-35 0-65 13-90 38-25 25-38 55-38 90 0 23 6 45 17 65-43-23-79-56-108-101 25-39 57-70 95-94 38-23 79-34 124-34 45 0 86 11 124 34 38 24 70 55 95 94z m-205 109c0 4-2 7-4 10-3 3-6 4-10 4-24 0-44-8-61-25-17-17-26-38-26-62 0-4 1-7 4-9 3-3 6-4 10-4 4 0 7 1 10 4 2 2 4 5 4 9 0 17 5 31 17 42 12 12 26 18 42 18 4 0 7 1 10 4 2 2 4 6 4 9z m242-109c0-7-2-13-6-20-26-44-62-79-107-105-45-27-93-40-143-40-50 0-98 13-143 40-45 26-81 61-107 105-4 7-6 13-6 20 0 6 2 13 6 19 26 44 62 79 107 106 45 26 93 39 143 39 50 0 98-13 143-39 45-27 81-62 107-106 4-6 6-13 6-19z"/>
</font></defs></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

BIN
wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.ttf
View file

Binary file not shown.

BIN
wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.woff
View file

Binary file not shown.

35
wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
View file

@ -269,8 +269,8 @@
}
&.collapsible {
// li.collapsed gets its height from the fieldset only, which is now hidden
// and h2 has position:absolute which doesn't add to it either, so it would be 0 without this
/* li.collapsed gets its height from the fieldset only, which is now hidden
and h2 has position:absolute which doesn't add to it either, so it would be 0 without this */
min-height: 41px;
h2{
@ -306,11 +306,34 @@
}
}
footer .preview{
button, .button{
background-color:lighten($color-grey-2,10%);
border-color:lighten($color-grey-2,10%);
/* styles applied to an element as it is being reordered */
.preview{
padding-top:1em;
padding-bottom:0.5em;
&:hover{
background-color:$color-grey-2;
border-color:$color-grey-2;
}
}
.dropdown{
input[type=button], input[type=submit], button, .button{
background-color:lighten($color-grey-2,10%);
border-color:lighten($color-grey-2,10%);
&:hover{
background-color:$color-grey-2;
border-color:$color-grey-2;
}
}
ul, .dropdown-toggle{
background-color:lighten($color-grey-2,10%);
}
.dropdown-toggle:hover,
&.open > .button + .dropdown-toggle{
background-color:$color-grey-2;
}
}
}
@media screen and (min-width: $breakpoint-mobile){

2
wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_create.html
View file

@ -1,4 +1,4 @@
<input type="button" class="action-preview button"
<button class="action-preview button"
data-action="{% url 'wagtailadmin_pages_preview_on_create' content_type.app_label content_type.model parent_page.id %}{% if mode %}?mode={{ mode|urlencode }}{% endif %}"
data-placeholder="{% url 'wagtailadmin_pages_preview_placeholder' %}"
data-windowname="wagtail_preview_{{ parent_page.id }}_child" value="{{ label }}" />

4
wagtail/wagtailadmin/templates/wagtailadmin/pages/_preview_button_on_edit.html
View file

@ -1,4 +1,4 @@
<input type="button" class="action-preview button"
<button class="action-preview button icon icon-view"
data-action="{% url 'wagtailadmin_pages_preview_on_edit' page.id %}{% if mode %}?mode={{ mode|urlencode }}{% endif %}"
data-placeholder="{% url 'wagtailadmin_pages_preview_placeholder' %}"
data-windowname="wagtail_preview_{{ page.id }}" value="{{ label }}" />
data-windowname="wagtail_preview_{{ page.id }}">{{ label }}</button>

4
wagtail/wagtailadmin/templates/wagtailadmin/pages/create.html
View file

@ -17,7 +17,7 @@
<footer>
<ul>
<li class="actions">
<div class="dropdown dropup match-width">
<div class="dropdown dropup button match-width">
<input type="submit" value="{% trans 'Save as draft' %}" class="button" />
<div class="dropdown-toggle icon icon-arrow-up"></div>
<ul role="menu">
@ -32,7 +32,7 @@
<li class="actions">
{% trans 'Preview' as preview_label %}
{% if display_modes|length > 1 %}
<div class="dropdown dropup match-width">
<div class="dropdown dropup button match-width">
{% include "wagtailadmin/pages/_preview_button_on_create.html" with label=preview_label %}
<div class="dropdown-toggle icon icon-arrow-up"></div>
<ul role="menu">

6
wagtail/wagtailadmin/templates/wagtailadmin/pages/edit.html
View file

@ -34,7 +34,7 @@
<footer>
<ul>
<li class="actions">
<div class="dropdown dropup match-width">
<div class="dropdown dropup dropdown-button match-width">
<input type="submit" value="{% trans 'Save draft' %}" class="button" />
<div class="dropdown-toggle icon icon-arrow-up"></div>
<ul role="menu">
@ -52,10 +52,10 @@
</div>
</li>
<li class="actions">
<li class="actions preview">
{% trans 'Preview' as preview_label %}
{% if display_modes|length > 1 %}
<div class="dropdown dropup match-width">
<div class="dropdown dropup dropdown-button match-width icon icon-view">
{% include "wagtailadmin/pages/_preview_button_on_edit.html" with label=preview_label %}
<div class="dropdown-toggle icon icon-arrow-up"></div>
<ul role="menu">