mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-29 09:33:54 +01:00
tweaks to how css is loaded and how sequences are identified with classes
This commit is contained in:
Dave Cranwell
Matt Westcott
parent
171631c38d
commit
951dd1eadd
@ -1,6 +1,7 @@
|
||||
@import "wagtailadmin/scss/variables.scss";
|
||||
@import "wagtailadmin/scss/mixins.scss";
|
||||
@import "wagtailadmin/scss/grid.scss";
|
||||
@import "wagtailadmin/scss/components/streamfield.scss";
|
||||
|
||||
.page-editor {
|
||||
.content-wrapper{
|
||||
@ -186,364 +187,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* cursory styling for streamfield. Main styling in components/streamfield.scss */
|
||||
&.stream-field {
|
||||
padding:0;
|
||||
|
||||
label{
|
||||
white-space: nowrap;
|
||||
}
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
|
||||
&.required .field > label:after{
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Undo column widths usually applied to the contents of a field panel */
|
||||
> fieldset{
|
||||
@include column(12);
|
||||
width:100%;
|
||||
max-width:none;
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
|
||||
.fields > li > .field > label{
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Despite "BlockField" being generic and available for use outside StreamField,
|
||||
this is the most unique handle available to undo the width set on .field-content
|
||||
everywhere else in wagtail. If other types of field become available for use as
|
||||
a direct child of Streamfield, this will need updating */
|
||||
.block_field > .field-content{
|
||||
width:100%;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.sequence{
|
||||
position:relative;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.sequence-member{
|
||||
@include clearfix;
|
||||
position:relative;
|
||||
|
||||
.sequence-member-inner{
|
||||
@include clearfix;
|
||||
position:relative;
|
||||
padding:1.5em 50px;
|
||||
|
||||
> .sequence .sequence-inner{
|
||||
@include column(10);
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
|
||||
> .struct-block > label,
|
||||
> .char_field > label,
|
||||
.sequence > label{
|
||||
/* TODO: tidy this */
|
||||
/*
|
||||
@include transition(opacity 0.2s ease);
|
||||
opacity:0;
|
||||
display:block;
|
||||
font-style:italic;
|
||||
font-weight:normal;
|
||||
position:absolute;
|
||||
top:1em; right:4em;
|
||||
float:none;
|
||||
width:auto;
|
||||
padding:0;
|
||||
color:$color-grey-2;
|
||||
line-height:2.2em;
|
||||
*/
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color:$color-input-focus;
|
||||
}
|
||||
|
||||
&:hover .sequence-member-inner{
|
||||
> .struct-block > label,
|
||||
> .char_field > label,
|
||||
.sequence > label{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.struct-block > ul > li{ /* duplicates forms.scss ln.568 */
|
||||
@include clearfix();
|
||||
padding-top:0.5em;
|
||||
padding-bottom:1.2em;
|
||||
}
|
||||
|
||||
.struct-block .widget-text_input > label,
|
||||
.struct-block .widget-textarea > label,
|
||||
.struct-block .widget-admin_auto_height_text_input > label{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.widget-admin_image_chooser{
|
||||
label{
|
||||
display:none;
|
||||
}
|
||||
.field-content{
|
||||
display:block;
|
||||
float:none;
|
||||
width:100%;
|
||||
text-align:center;
|
||||
max-width:500px;
|
||||
margin:auto;
|
||||
border:1px solid $color-grey-4;
|
||||
padding:1em;
|
||||
}
|
||||
.chooser{
|
||||
.chosen{
|
||||
padding:0;
|
||||
}
|
||||
.unchosen{
|
||||
&:before{
|
||||
float:none;
|
||||
font-size:4em;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
.preview-image{
|
||||
float:none;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Text inputs, rich text fields and textareas that are direct children of streamfield
|
||||
should be borderless and full-width
|
||||
*/
|
||||
.stream-member-inner > .widget-text_input > .field-content > .input > input,
|
||||
.stream-member-inner > .field > .field-content > .input > .richtext,
|
||||
.stream-member-inner > .field > .field-content > .input > textarea{
|
||||
border:0;
|
||||
padding:0;
|
||||
background-color:transparent;
|
||||
max-width:1024px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Object controls */
|
||||
.stream-controls,
|
||||
.list-controls{
|
||||
@include border-radius(5px);
|
||||
@include transition(opacity 0.2s ease);
|
||||
opacity:0;
|
||||
visibility:hidden;
|
||||
position:absolute;
|
||||
top:-1.5em; right:1em;
|
||||
z-index:1;
|
||||
overflow:visible;
|
||||
background-color:$color-input-focus;
|
||||
padding:0.2rem 1em;
|
||||
|
||||
h3{
|
||||
margin:0;
|
||||
text-transform:uppercase;
|
||||
font-size:0.7rem;
|
||||
display:inline-block;
|
||||
margin-right:1em;
|
||||
}
|
||||
|
||||
.buttons{
|
||||
display:inline-block;
|
||||
opacity:0.4;
|
||||
}
|
||||
&:hover .buttons{
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
button.icon.text-replace{
|
||||
@include border-radius(50%);
|
||||
width:1.4rem;
|
||||
height:1.4rem;
|
||||
|
||||
&:before{
|
||||
line-height:1.3em;
|
||||
font-size:0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu of other blocks to be added at each position */
|
||||
.stream-menu{
|
||||
@include transition(all 0.2s ease);
|
||||
@include box-shadow(inset 0 0 45px rgba(0,0,0,0.3));
|
||||
position:relative;
|
||||
background-color:$color-grey-1;
|
||||
opacity:1;
|
||||
z-index:5;
|
||||
|
||||
.toggle{
|
||||
@include transition(color 0.2s ease);
|
||||
@include border-radius(50px);
|
||||
position:absolute;
|
||||
top:-0.5em;
|
||||
left:0;
|
||||
right:0;
|
||||
margin:0 auto;
|
||||
cursor:pointer;
|
||||
font-size:1.7em;
|
||||
width:1em;
|
||||
height:1em;
|
||||
display:block;
|
||||
z-index:5;
|
||||
color:$color-grey-1;
|
||||
background-color:white;
|
||||
|
||||
span{
|
||||
@include visuallyhidden();
|
||||
}
|
||||
|
||||
&:before{
|
||||
@include transform(rotate(-45deg));
|
||||
position:absolute;
|
||||
font-family:wagtail;
|
||||
content:"B";
|
||||
line-height:1em;
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
|
||||
.stream-menu-inner{
|
||||
max-width:50em;
|
||||
margin: auto;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
ul{
|
||||
@include transition(all 0.2s ease);
|
||||
@include transform(scale(1));
|
||||
@include clearfix;
|
||||
visibility:visible;
|
||||
opacity:1;
|
||||
padding:1em 1em 0 1em;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
li{
|
||||
@include column(3);
|
||||
padding-bottom:$grid-gutter-width;
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
|
||||
&:nth-child(4n+1){
|
||||
clear:left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
button{
|
||||
@include transition(all 0.2s ease);
|
||||
background-color:transparent;
|
||||
border:0;
|
||||
color:darken($color-grey-3, 5%);
|
||||
height:auto;
|
||||
display:block;
|
||||
width:100%;
|
||||
padding:0 0 0.5em 0;
|
||||
outline:$color-teal;
|
||||
|
||||
span{
|
||||
text-transform:none;
|
||||
white-space: pre-wrap;
|
||||
width:100%;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
padding:0 1em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&:before{
|
||||
display:block;
|
||||
font-family:wagtail;
|
||||
font-size:2em;
|
||||
width:100%;
|
||||
height:2em;
|
||||
line-height:2em;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color:$color-teal;
|
||||
color:white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.stream-menu-closed{
|
||||
@include box-shadow(none);
|
||||
|
||||
.stream-menu-inner ul{
|
||||
@include transform(scale(0.9));
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.toggle{
|
||||
color:$color-grey-3;
|
||||
background-color:white;
|
||||
&:before{
|
||||
@include transform(rotate(0deg));
|
||||
}
|
||||
&:focus{
|
||||
color:$color-teal;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
border-top-color:$color-teal;
|
||||
|
||||
.toggle{
|
||||
color:$color-teal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-mobile){
|
||||
li{
|
||||
@include column(2);
|
||||
&:nth-child(4n+1){
|
||||
clear:none;
|
||||
}
|
||||
&:nth-child(6n+1){
|
||||
clear:left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sequence-member .stream-menu{
|
||||
margin:auto auto 0em auto;
|
||||
}
|
||||
.sequence-member .stream-menu-closed{
|
||||
opacity:0;
|
||||
visibility:hidden;
|
||||
}
|
||||
.sequence-member:hover{
|
||||
.stream-controls,
|
||||
.list-controls{
|
||||
visibility:visible;
|
||||
opacity:1;
|
||||
}
|
||||
.stream-menu{
|
||||
visibility:visible;
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* special panel for the publishing fields, requires a bit more pizzazz */
|
||||
&.publishing{
|
||||
h2:before{
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
{% extends "wagtailadmin/block_forms/sequence.html" %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block sequence_type_class %}list{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
{% if help_text %}
|
||||
<div class="object-help help">{{ help_text }}</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
<button type="button" id="{{ prefix }}-add">{% trans "Add another" %}</button>
|
||||
{% endblock %}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
{% load i18n %}
|
||||
|
||||
{% block header_controls %}
|
||||
<div class="list-controls">
|
||||
<div class="stream-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>
|
||||
|
||||
@ -12,11 +12,11 @@
|
||||
|
||||
|
||||
{% endcomment %}
|
||||
<div class="sequence">
|
||||
<div class="sequence-container sequence-type-{% block sequence_type_class %}{% endblock %}">
|
||||
<input type="hidden" name="{{ prefix }}-count" id="{{ prefix }}-count" value="{{ list_members_html|length }}">
|
||||
|
||||
{% block header %}{% endblock %}
|
||||
<div class="sequence-inner">
|
||||
<div class="sequence-container-inner">
|
||||
<ul id="{{ prefix }}-list" class="sequence">
|
||||
{% for list_member_html in list_members_html %}
|
||||
{{ list_member_html }}
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
{% extends "wagtailadmin/block_forms/sequence.html" %}
|
||||
{% extends "wagtailadmin/block_forms/sequence.html" %}]
|
||||
|
||||
{% block sequence_type_class %}list{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
{% if list_members_html %}
|
||||
{% include "wagtailadmin/block_forms/stream_menu.html" with menu_id=prefix|add:"-prependmenu" state="closed" %}
|
||||
|
||||
@ -16,8 +16,6 @@
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block sequence_member_inner_classes %}stream-member-inner{% endblock %}
|
||||
|
||||
{% block footer_controls %}
|
||||
{% include "wagtailadmin/block_forms/stream_menu.html" with menu_id=prefix|add:"-appendmenu" state="closed" %}
|
||||
{% endblock %}
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
{% if help_text %}
|
||||
<div class="object-help help">{{ help_text }}</div>
|
||||
{% endif %}
|
||||
<ul>
|
||||
|
||||
<ul class="fields">
|
||||
{% for child in children.values %}
|
||||
<li>
|
||||
{% if child.block.label %}
|
||||
|
||||
@ -86,6 +86,7 @@ class ListBlock(Block):
|
||||
]
|
||||
|
||||
return render_to_string('wagtailadmin/block_forms/list.html', {
|
||||
'help_text': getattr(self.meta, 'help_text', None),
|
||||
'prefix': prefix,
|
||||
'list_members_html': list_members_html,
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user