Merge branch 'davecranwell-streamfield-tab-design'

pull/1631/head
Matt Westcott 2015-09-03 17:05:15 +01:00
commit ca81f1cc99
8 zmienionych plików z 94 dodań i 35 usunięć

Wyświetl plik

@ -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

Wyświetl plik

@ -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
~~~~~~~~~

Wyświetl plik

@ -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>

Wyświetl plik

@ -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;
}
}

Wyświetl plik

@ -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{

Wyświetl plik

@ -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 %}

Wyświetl plik

@ -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 %}

Wyświetl plik

@ -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>