kopia lustrzana https://github.com/wagtail/wagtail
Merge branch 'davecranwell-streamfield-tab-design'
commit
ca81f1cc99
|
@ -30,6 +30,7 @@ Changelog
|
|||
* Added aliases for the `self` template variable to accommodate Jinja as a templating engine: `page` for pages, `field_panel` for field panels / edit handlers, and `value` for blocks
|
||||
* Added signposting text to the explorer to steer editors away from creating pages at the root level unless they are setting up new sites
|
||||
* "Clear choice" and "Edit this page" buttons are no longer shown on the page field of the group page permissions form
|
||||
* Altered styling of stream controls to be more like all other buttons
|
||||
* Fix: Text areas in the non-default tab of the page editor now resize to the correct height
|
||||
* Fix: Tabs in "insert link" modal in the rich text editor no longer disappear (Tim Heap)
|
||||
* Fix: H2 elements in rich text fields were accidentally given a click() binding when put insite a collapsible multi field panel
|
||||
|
|
|
@ -67,6 +67,7 @@ Minor features
|
|||
* Added aliases for the ``self`` template variable to accommodate Jinja as a templating engine: ``page`` for pages, ``field_panel`` for field panels / edit handlers, and ``value`` for blocks
|
||||
* Added signposting text to the explorer to steer editors away from creating pages at the root level unless they are setting up new sites
|
||||
* "Clear choice" and "Edit this page" buttons are no longer shown on the page field of the group page permissions form
|
||||
* Altered styling of stream controls to be more like all other buttons
|
||||
|
||||
Bug fixes
|
||||
~~~~~~~~~
|
||||
|
|
|
@ -301,6 +301,22 @@
|
|||
|
||||
</section>
|
||||
|
||||
<section id="button-groups">
|
||||
<h2>Button groups</h2>
|
||||
<p>Adds rounding to first and last items only</p>
|
||||
<div class="button-group">
|
||||
<button>button element</button>
|
||||
<button>button element</button>
|
||||
<button>button element</button>
|
||||
</div>
|
||||
<br />
|
||||
<div class="button-group">
|
||||
<button class="icon text-replace yes icon-tick">A proper button</button>
|
||||
<a href="#" class="button icon text-replace white icon-cog">A link button</a>
|
||||
<span class="button icon text-replace no icon-bin">A non-link button</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="dropdowns">
|
||||
<h2>Dropdown buttons</h2>
|
||||
|
||||
|
|
|
@ -238,12 +238,6 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: $color-button-hover;
|
||||
color:white;
|
||||
border-color:transparent;
|
||||
}
|
||||
|
||||
&.yes{
|
||||
background-color: $color-button-yes;
|
||||
border:1px solid $color-button-yes;
|
||||
|
@ -366,6 +360,16 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
border:0 !important;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: $color-button-hover;
|
||||
color:white;
|
||||
border-color:transparent;
|
||||
|
||||
&.hover-no{
|
||||
background-color: $color-button-no;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile){
|
||||
font-size:0.95em;
|
||||
padding:0 1.4em;
|
||||
|
@ -439,6 +443,36 @@ input[type=submit], input[type=reset], input[type=button], button{
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.button-group{
|
||||
@include clearfix;
|
||||
|
||||
input[type=submit], input[type=reset], input[type=button], .button, button {
|
||||
@include border-radius(0);
|
||||
float:left;
|
||||
margin-right:1px;
|
||||
margin-left:0;
|
||||
|
||||
&:only-child{
|
||||
@include border-radius(3);
|
||||
}
|
||||
&:first-child{
|
||||
@include border-radius(3px 0 0 3px);
|
||||
}
|
||||
&:last-child{
|
||||
@include border-radius(0 3px 3px 0);
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
&.button-group-square{
|
||||
&,input[type=submit], input[type=reset], input[type=button], .button, button{
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.multiple{
|
||||
padding:0;
|
||||
max-width:1024px - 50px;
|
||||
|
@ -475,9 +509,7 @@ input[type=submit], input[type=reset], input[type=button], button{
|
|||
right:1em;
|
||||
top:1em;
|
||||
color:white;
|
||||
overflow:hidden;
|
||||
@include border-radius(2px);
|
||||
|
||||
|
||||
li{
|
||||
float:left;
|
||||
margin-right:1px;
|
||||
|
@ -489,6 +521,7 @@ input[type=submit], input[type=reset], input[type=button], button{
|
|||
|
||||
.disabled{
|
||||
display:none;
|
||||
visibility:hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -8,6 +8,8 @@ li.sequence-member{
|
|||
|
||||
&:hover{
|
||||
background-color:$color-input-focus;
|
||||
border:1px solid darken($color-input-focus, 10%);
|
||||
border-width:1px 0;
|
||||
|
||||
.sequence-member-inner{
|
||||
> .struct-block > label,
|
||||
|
@ -45,6 +47,10 @@ li.sequence-member{
|
|||
position:relative;
|
||||
padding:1.5em 50px;
|
||||
|
||||
.sequence-member:hover{
|
||||
border:0;
|
||||
}
|
||||
|
||||
/* sequences within sequences, such as a ListBlock within StructBlock*/
|
||||
> .sequence .sequence-inner{
|
||||
@include column(10);
|
||||
|
@ -124,25 +130,29 @@ should be borderless and full-width
|
|||
|
||||
/* Controls for ordering and deletion of items in a sequence */
|
||||
.sequence-controls{
|
||||
@include border-radius(5px);
|
||||
@include border-radius(2px 0 0 0);
|
||||
@include transition(opacity 0.2s ease);
|
||||
border:1px solid darken($color-input-focus, 10%);
|
||||
border-width:1px 1px 0 1px;
|
||||
opacity:0;
|
||||
visibility:hidden;
|
||||
position:absolute;
|
||||
top:-1.5em; right:1em;
|
||||
top:-30px; right:0;
|
||||
z-index:1;
|
||||
overflow:visible;
|
||||
background-color:$color-input-focus;
|
||||
padding:0.2rem 1em;
|
||||
padding:0 0 0 1em;
|
||||
height:30px;
|
||||
|
||||
h3{
|
||||
margin:0;
|
||||
font-size:0.7rem;
|
||||
display:inline-block;
|
||||
margin-right:1em;
|
||||
line-height:1.4rem;
|
||||
line-height:1.8rem;
|
||||
|
||||
label{
|
||||
color: $color-teal;
|
||||
font-weight:normal;
|
||||
text-transform:uppercase;
|
||||
float:none;
|
||||
|
@ -153,9 +163,8 @@ should be borderless and full-width
|
|||
}
|
||||
|
||||
button.icon.text-replace{
|
||||
@include border-radius(50%);
|
||||
width:1.4rem;
|
||||
height:1.4rem;
|
||||
width:1.8rem;
|
||||
height:1.8rem;
|
||||
|
||||
&:before{
|
||||
line-height:1.3em;
|
||||
|
@ -164,16 +173,9 @@ should be borderless and full-width
|
|||
}
|
||||
|
||||
/* .buttons only exists for menus in stream_member.html */
|
||||
.buttons{
|
||||
display:inline-block;
|
||||
.button-group{
|
||||
float:right;
|
||||
}
|
||||
|
||||
.buttons,
|
||||
label{
|
||||
@include transition(opacity 0.2s ease);
|
||||
opacity:0.4;
|
||||
}
|
||||
|
||||
&:hover .buttons,
|
||||
&:hover label{
|
||||
opacity:1;
|
||||
|
@ -186,7 +188,13 @@ should be borderless and full-width
|
|||
|
||||
/* list controls are slightly different as they require closer proximity to their associated fields */
|
||||
.list-controls{
|
||||
top:1.5em
|
||||
@include border-radius(0);
|
||||
background:transparent;
|
||||
top:1.5em;
|
||||
border:0;
|
||||
padding:0;
|
||||
overflow:hidden;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.sequence-type-list .object-help{
|
||||
|
|
|
@ -2,9 +2,9 @@
|
|||
{% load i18n %}
|
||||
|
||||
{% block header_controls %}
|
||||
<div class="sequence-controls list-controls">
|
||||
<button type="button" id="{{ prefix }}-moveup" title="{% trans 'Move up' %}" class="icon text-replace icon-order-up button-secondary button-nostroke">{% trans 'Move up' %}</button>
|
||||
<button type="button" id="{{ prefix }}-movedown" title="{% trans 'Move down' %}" class="icon text-replace icon-order-down button-secondary button-nostroke">{% trans 'Move down' %}</button>
|
||||
<button type="button" id="{{ prefix }}-delete" title="{% trans 'Delete' %}" class="icon text-replace no icon-bin button-secondary button-nostroke">{% trans 'Delete' %}</button>
|
||||
<div class="sequence-controls list-controls button-group button-group-square">
|
||||
<button type="button" id="{{ prefix }}-moveup" title="{% trans 'Move up' %}" class="icon text-replace icon-order-up">{% trans 'Move up' %}</button>
|
||||
<button type="button" id="{{ prefix }}-movedown" title="{% trans 'Move down' %}" class="icon text-replace icon-order-down">{% trans 'Move down' %}</button>
|
||||
<button type="button" id="{{ prefix }}-delete" title="{% trans 'Delete' %}" class="icon text-replace hover-no icon-bin">{% trans 'Delete' %}</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
@ -8,10 +8,10 @@
|
|||
{% block header_controls %}
|
||||
<div class="sequence-controls">
|
||||
<h3><label{% if child.id_for_label %} for="{{ child.id_for_label }}"{% endif %}>{{ child.block.label }}</label></h3>
|
||||
<div class="buttons">
|
||||
<button type="button" id="{{ prefix }}-moveup" title="{% trans 'Move up' %}" class="icon button-nobg button-neutral text-replace icon-order-up">{% trans 'Move up' %}</button>
|
||||
<button type="button" id="{{ prefix }}-movedown" title="{% trans 'Move down' %}" class="icon button-nobg button-neutral text-replace icon-order-down">{% trans 'Move down' %}</button>
|
||||
<button type="button" id="{{ prefix }}-delete" title="{% trans 'Delete' %}" class="icon button-nobg button-neutral text-replace no icon-bin">{% trans 'Delete' %}</button>
|
||||
<div class="button-group button-group-square">
|
||||
<button type="button" id="{{ prefix }}-moveup" title="{% trans 'Move up' %}" class="icon text-replace icon-order-up">{% trans 'Move up' %}</button>
|
||||
<button type="button" id="{{ prefix }}-movedown" title="{% trans 'Move down' %}" class="icon text-replace icon-order-down">{% trans 'Move down' %}</button>
|
||||
<button type="button" id="{{ prefix }}-delete" title="{% trans 'Delete' %}" class="icon text-replace hover-no icon-bin">{% trans 'Delete' %}</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<li><button type="button" class="icon text-replace white icon-order-up inline-child-move-up" id="{{ child.form.prefix }}-move-up" title="{% trans 'Move up' %}">{% trans "Move up" %}</button></li>
|
||||
<li><button type="button" class="icon text-replace white icon-order-down inline-child-move-down" id="{{ child.form.prefix }}-move-down" title="{% trans 'Move down' %}">{% trans "Move down" %}</button></li>
|
||||
{% endif %}
|
||||
<li><button type="button" class="icon text-replace white icon-bin" id="{{ child.form.DELETE.id_for_label }}-button" title="{% trans 'Delete' %}">{% trans "Delete" %}</button></li>
|
||||
<li><button type="button" class="icon text-replace white icon-bin hover-no" id="{{ child.form.DELETE.id_for_label }}-button" title="{% trans 'Delete' %}">{% trans "Delete" %}</button></li>
|
||||
</ul>
|
||||
{{ child.render_form_content }}
|
||||
</li>
|
||||
|
|
Ładowanie…
Reference in New Issue