diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less index a3572371c..2c08bb257 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less @@ -52,14 +52,14 @@ input, textarea, select, .richtext, .tagit{ width:100%; border:1px dashed @color-input-border; padding:1.2em; - background-color:white; + background-color:@color-fieldset-hover; -webkit-appearance: none; color:@color-text-input; font-size:1.1em; outline:none; &:hover{ - background-color:@color-fieldset-hover; + background-color:white; } &:focus{ border-color: darken(@color-input-focus, 40%); @@ -136,39 +136,42 @@ input[type=checkbox]:checked:before{ color:@color-teal; } +/* Core button style */ input[type=submit], input[type=reset], input[type=button], .button, button{ - .border-radius(2px); + .border-radius(3px); width:auto; - padding:0.6em 1.2em; + padding:0.7em 1em; border:none; background-color: @color-button; color:white; text-decoration:none; text-transform:uppercase; - font-size:1em; + font-size:0.9em; white-space: nowrap; position:relative; -webkit-font-smoothing: auto; vertical-align: middle; line-height:1em; display:inline-block; - - &.icon:before{ - font-size:1.5em; - } - &.icon.text-replace:before{ - font-size:auto; - } + overflow:hidden; + position:relative; &.button-small{ - font-size:0.85em; - padding:1em 1.8em; + font-size:0.95em; } &.button-secondary{ border:1px solid @color-button; color:@color-button; - background-color:transparent; + background-color:white; + } + + &.icon:before{ + font-size:1.5em; + } + + &.icon.text-replace:before{ + font-size:auto; } &:hover{ @@ -206,10 +209,30 @@ input[type=submit], input[type=reset], input[type=button], .button, button{ } } - /* special consideration for buttons with icons in them, to make them smaller */ - &.icon{ - padding:1em 2.4em; - padding:0.6em 1.2em; + &.bicolor{ + padding-left:3.5em; + + &:before{ + font-size:1.2em; + position:absolute; + left:0; + top:0; + width:2em; + line-height:2em; + height:100%; + text-align:center; + background-color:rgba(0,0,0,0.3); + display:block; + } + } + + &.button-small.bicolor{ + padding-left:3em; + + &:before{ + width:2em; + font-size:1.2em; + } } + input[type=submit], @@ -617,10 +640,19 @@ input[type=submit], input[type=reset], input[type=button], .button, button{ @media screen and (min-width: @breakpoint-mobile){ input[type=submit], input[type=reset], input[type=button], .button, button{ font-size:0.95em; - padding:1.3em 2.2em; + padding:0.8em 1.4em; - &.icon{ - padding:1em 2.4em; + &.button-small{ + + } + + &.bicolor{ + padding-left:3.5em; + + &:before{ + width:2.2em; + line-height:2.2em; + } } } } \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less index 370cc2d8b..77d9daaf0 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less @@ -77,7 +77,7 @@ ul.listing{ &.full-width td:first-child, &.full-width th:first-child{ - .push-padding(@grid-content-indent); + padding-left:20px; } &.full-width{ @@ -137,7 +137,7 @@ ul.listing{ } &.full-width .divider td{ - .push-padding(@grid-content-indent); + padding-left:20px; } .index { @@ -216,13 +216,7 @@ ul.listing{ } .button-small{ - font-size:1em; - padding:0.6em 1.2em; margin-right:1em; - - &:before{ - font-size:1.7em; - } } } @@ -324,7 +318,7 @@ ul.listing{ } table .no-results-message{ - .push-padding(@grid-content-indent); + padding-left:20px; } .inactive h2{ @@ -426,6 +420,19 @@ ul.listing{ border-color:@color-input-border; a{opacity:1;} } + + table .no-results-message{ + padding-left:50px; + } + + &.full-width td:first-child, + &.full-width th:first-child{ + padding-left:50px; + } + + &.full-width .divider td{ + padding-left:50px; + } } } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less index 83dda6dbf..049078382 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less @@ -8,6 +8,13 @@ border:1px solid @color-grey-4; border-width:1px 1px 0px 1px; text-align:center; + background-color:@color-grey-5; + border-top:0.3em solid @color-grey-3; + + &.active{ + background-color:white; + border-top:0.3em solid @color-grey-1; + } } a{ outline:none; @@ -16,11 +23,9 @@ font-weight:700; font-size:1.2em; text-decoration:none; - background-color:@color-grey-5; display:block; - padding:0 1em; + padding:0 50px; color:@color-grey-2; - border-top:0.3em solid @color-grey-3; border-bottom:1px solid transparent; &:hover{ @@ -29,10 +34,8 @@ } &.active{ - background-color:white; - .box-shadow(none); + color:@color-grey-1; - border-top:0.3em solid @color-grey-1; border-bottom:2px solid white; margin-bottom:-1px; z-index:1; @@ -57,8 +60,6 @@ } } - - @media screen and (min-width: @breakpoint-mobile){ .tab-nav li{ .column(2); diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/core.less b/wagtail/wagtailadmin/static/wagtailadmin/css/core.less index 2043f951f..77ec26233 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/core.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/core.less @@ -372,7 +372,6 @@ body.explorer-open .nav-main{ } header{ - .nice-padding(); padding-top:2em; padding-bottom:1em; background-color: @color-grey-5; @@ -557,6 +556,15 @@ footer, .logo{ } } +.row{ + .clearfix(); +} + +.nice-padding{ + padding-left:20px; + padding-right:20px; +} + @media screen and (min-width: @breakpoint-mobile){ .col1{ .column(1); @@ -595,6 +603,18 @@ footer, .logo{ .column(12); } + .row{ + .row(); + } + .row-flush{ + .row-flush(); + } + + .nice-padding{ + padding-left:50px; + padding-right:50px; + } + body{ margin-left:@menu-width; } @@ -703,7 +723,6 @@ footer, .logo{ header{ padding-top:2em; padding-bottom:2em; - .nice-padding(); } footer{ width:80%; diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less b/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less index 70bc427d8..d955391c8 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less @@ -49,8 +49,6 @@ .border-box(); width: 100%*(@x / @grid-columns); - /*padding-right: @padding; - padding-left: @padding;*/ } /* Push adds left padding */ @@ -69,20 +67,14 @@ padding-right: 100%*(@offset / @grid-columns); } -.row{ - .row(); -} -.row-flush{ - .row-flush(); -} - -/* must come after row/row-flush */ -.nice-padding{ - .push-padding(@grid-content-indent); - .pull-padding(@grid-content-indent); -} -.nice-margin{ - .push(@grid-content-indent); - .pull(@grid-content-indent); -} +/* only used in places where padding not applied to same elements as row or row-flush + * most of the time this class should be applied directly to the html elements */ +.nice-padding(){ + padding-left:20px; + padding-right:20px; + @media screen and (min-width: @breakpoint-mobile){ + padding-left:50px; + padding-right:50px; + } +} \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less index ec135aed8..c4f80973b 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less @@ -10,8 +10,10 @@ .object{ background:url(/static/wagtailadmin/images/bg-editor-diag.svg); position:relative; - border:1px solid @color-grey-4; - border-width:1px 0 0 0; + /*border:1px solid @color-grey-4; + border-width:1px 0 0 0;*/ + overflow:hidden; + .nice-padding(); &:first-child{ border:0; @@ -26,7 +28,6 @@ padding-top:4em; padding-left:0; padding-right:0; - max-width:1024px; } .object-help{ @@ -71,7 +72,7 @@ top:0px; height:3.2em; left:0px; - width:3em; + width:3.3em; background-color:@color-grey-3; padding:0; margin:0; @@ -79,9 +80,10 @@ } } - &.has-content, &.single-field, #promote &{ - .push-padding(@grid-content-indent); - padding-right:@grid-gutter-width/2; } + &.empty > h2, &.empty.single-field label{ + margin:0; + border-bottom:1px solid white; + } &.single-field{ h2, .object-help{ @@ -121,7 +123,7 @@ } input, textarea, .richtext{ - .nice-padding; + .nice-padding(); .pull-padding(2); font-family:Bitter, Georgia, serif; .border-radius(0px); @@ -134,8 +136,7 @@ .error-message{ - .push(@grid-content-indent); - .pull(@grid-content-indent); + .nice-padding(); padding-bottom:2em; } @@ -156,17 +157,19 @@ .multiple{ .transition(max-height 5s ease); - height:0px; + padding-top:4em; + height:auto; > li{ background-color:white; padding:1em; - margin-bottom:2em; + margin-bottom:1em; border:1px solid @color-grey-5; } fieldset{ padding-top:0; + padding-bottom:0; } &.moving{ @@ -177,10 +180,59 @@ width:100%; } } - &.has-content .multiple{ - padding-top:4em; - height:auto; - } + + /* removes top padding from multiples used within another panel */ + .fields .multiple{ + padding-top:0; + } + + .add{ + cursor:pointer; + } + + &.empty{ + border-bottom:1px solid white; + + > h2, &.single-field label{ + margin:0; + border-bottom:1px solid white; + } + + /* wrapper around add button for mutliple objects. Default version is wordless plus button for contracted groups of fields */ + .add{ + .transition(background-color 0.2s ease); + position:relative; + z-index:2; + top:0px; + left:0px; + width:3.3em; + background-color:@color-teal; + padding:0; + margin:0 0 0 -50px; + cursor:pointer; + + a{ + font-size: 0em; + line-height: 0; + overflow: visible; + display:block; + + &:before{ + position:relative; + color:white; + padding:0; + line-height:2.6em; /* specific height required as parent 'a' has no height */ + font-size:1rem; + width:100%; + } + } + } + + .multiple{ + padding:0; + height:0px; + } + } } /* styles applied to an element as it is being reordered */ @@ -189,46 +241,6 @@ padding-bottom:0.5em; } -/* wrapper around add button for mutliple objects */ -.add{ - position:relative; - z-index:2; - top:0px; - left:0px; - width:3em; - background-color:@color-teal-darker; - padding:0; - margin:0; - cursor:pointer; - - a{ - font-size: 0em; - line-height: 0; - overflow: hidden; - } - - a:before{ - color:white; - padding:0.65em 0; - font-size:1.1rem; - } -} - -.has-content .add{ - z-index:1; - padding:inherit; - cursor:pointer; - margin-top:0; - margin-bottom:0; - padding-top:2.5em; - padding-bottom:2em; - - a{ - font-size: inherit; - line-height: inherit; - overflow: hidden; - } -} /* Object controls */ .controls{ @@ -264,8 +276,8 @@ @media screen and (min-width: @breakpoint-mobile){ .page-editor .tab-nav li{ - .column(2); + .column(3); padding:0; - min-width:110px; + max-width:210px; } } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less b/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less index 13528b46a..bd7c87126 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less @@ -3,6 +3,7 @@ .hallotoolbar{ position:absolute; left:5.83%; + z-index:5; } .hallotoolbar.affixed{ position:fixed; diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js index d979d449b..bd3f9e102 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/page-editor.js @@ -83,7 +83,12 @@ function InlinePanel(opts) { var self = {}; self.setHasContent = function(){ - self.formsUl.parent().addClass('has-content') + console.log($('> li:visible', self.formsUl)); + if($('li:visible', self.formsUl).length){ + self.formsUl.parent().removeClass('empty'); + }else{ + self.formsUl.parent().addClass('empty'); + } }; self.initChildControls = function (prefix) { @@ -98,7 +103,8 @@ function InlinePanel(opts) { $('#' + deleteInputId).val('1'); $('#' + childId).fadeOut(function() { self.updateMoveButtonDisabledStates(); - }); + self.setHasContent(); + }); }); if (opts.canOrder) { $('#' + prefix + '-move-up').click(function() { diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/chooser/_search_form.html b/wagtail/wagtailadmin/templates/wagtailadmin/chooser/_search_form.html index fba1c2d7e..94bc29319 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/chooser/_search_form.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/chooser/_search_form.html @@ -1,4 +1,4 @@ -