diff --git a/wagtail/wagtailadmin/static/wagtailadmin/js/core.js b/wagtail/wagtailadmin/static/wagtailadmin/js/core.js index eeec4476fb7..b49e4a4ba80 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/js/core.js +++ b/wagtail/wagtailadmin/static/wagtailadmin/js/core.js @@ -139,7 +139,8 @@ $(function(){ success: function(data, status) { if (index > search_current_index) { search_current_index = index; - $(window.headerSearch.targetOutput).html(data); + $(window.headerSearch.targetOutput).html(data).slideDown(800); + window.history.pushState(null, "Search results", "?q=" + $(window.headerSearch.termInput).val()); } }, complete: function(){ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss index 23ad4fb8bb2..d4842874ed0 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss @@ -578,12 +578,14 @@ ul.tagit li.tagit-choice-editable{ border-bottom:1px solid $color-grey-4; } + label{ + display:none; + } + .fields{ position:relative; + clear:both; - .field label{ - display:none; - } .field input{ padding-left:3em; @@ -635,7 +637,7 @@ ul.tagit li.tagit-choice-editable{ } } - header &{ + &.small{ margin:0; padding:0; .fields{ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss index 523429efb98..4240310cd05 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss @@ -174,9 +174,11 @@ ul.listing{ } .actions{ + @include clearfix(); margin-top:0.8em; text-transform:uppercase; font-size:0.85em; + margin-bottom:-0.5em; a{ text-decoration:none; @@ -217,22 +219,26 @@ ul.listing{ } .children a, .no-children a{ - color:$color-teal; display:block; padding:2em 0; } .children a{ + color:$color-teal; display:block; &:before{ font-size:3rem; } } .no-children a{ + color:$color-grey-3; display:block; &:before{ font-size:1.5rem; } + &:hover{ + color:$color-teal; + } } &.small .children a:before{ font-size:30px; @@ -323,7 +329,7 @@ ul.listing{ color:auto; } .actions{ - margin-top:0.8em; + margin-top:1em; } .button{ color:white; @@ -356,10 +362,12 @@ table.listing{ color:white; background-color:$color-header-bg; - .title{ - padding-top:1.3em; - padding-bottom:1.3em; + td{ + padding-top:1.5em; + padding-bottom:1.5em; + } + .title{ h2{ color:white; font-size:1.8em; @@ -506,7 +514,6 @@ table.listing{ border-color:transparent; } .no-children a{ - color:$color-teal; opacity:0; } .no-children:hover{ diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss index 408cc985cfe..ccfea298934 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss @@ -146,10 +146,9 @@ img{ } #nav-toggle{ - left:0%; + left:$mobile-nice-padding; cursor:pointer; position:absolute; - width:40px; &:before{ font-size:40px; @@ -397,7 +396,6 @@ body.explorer-open { header{ padding-top:1em; padding-bottom:1em; - padding-left: 4em !important; background-color: $color-header-bg; margin-bottom:2em; color:white; @@ -465,6 +463,10 @@ header{ background-color:$color-teal-dark; } } + /* necessary on mobile only to make way for hamburger menu */ + &.nice-padding{ + padding-left:4em; + } } .page-explorer header{ @@ -533,83 +535,109 @@ footer{ .breadcrumb{ @include unlist(); +} +.breadcrumb{ @include clearfix(); - + overflow:hidden; + background:$color-teal-darker; font-size:0.85em; - margin-bottom:-4px; /* negates the 4px margin on the bottom of each LI, used to make it wrap nicely */ - + + li { display: block; float: left; - background: $color-teal-darker; - padding: 0.4em 1em 0.4em 2em; + padding: 0.5em 1.3em; position: relative; - margin: 0 4px 4px 0; + text-decoration: none; color: #fff; line-height:1em; white-space: nowrap; - max-width:30em; + line-height:1.5em; - a{ - color:white; + a, span{ + color:lighten($color-teal,40%); display:block; - max-width:25em; + max-width:12em; white-space: nowrap; text-overflow:ellipsis; overflow:hidden; line-height:1.6em; - + padding-right:1em; + + &:after{ + right:0; + z-index:5; + position:absolute; + font-family:wagtail; + content:"n"; + padding-left:20px; + font-size:2em; + color:$color-teal; + line-height:0.9em; + } } - &:after, &:before{ + /* &:after, &:before{ content: ""; border-top: 1.2em solid transparent; border-bottom: 1.2em solid transparent; } &:after { border-left: 1em solid $color-teal-darker; - position: absolute; right: -0.9em; top: 0; + position: absolute; right: -1.2em; top: 0; z-index: 1; + border:1em solid red; } &:before { border-left: 1em solid white; position: absolute; left: 0; top: 0; - } + } */ &:hover { background: $color-teal-dark; + a{ + color:white; + } } &:hover:after { border-left-color: $color-teal-dark; } - &:first-child { - padding:0.4em; - - &:before{ - display:none; - width:1em; - } + &.home { a { - width:2em; + padding-right:0; + text-align:center; + width:3em; font-size:1em; + &:before{ line-height:1em; font-size:1.15rem; line-height: 0.85em; padding-top: 0.10em; } + &:after{ + right:-0.3em; + } } } } header & li{ &:before { - border-left: 1em solid $color-header-bg; + border-left: 1em solid white; position: absolute; left: 0; top: 0; } - } + } + + &.single{ + li a{ + white-space: nowrap; + text-overflow:inherit; + max-width:100%; + } + } } .row{ @@ -725,6 +753,7 @@ footer, .logo{ width:60px; float:none; margin:auto; + display:block; } } @@ -815,6 +844,10 @@ footer, .logo{ padding-top:1.5em; padding-bottom:1.5em; + &.nice-padding{ + @include nice-padding(); + } + .left{ float:left; margin-right:0; @@ -848,6 +881,10 @@ footer, .logo{ .col9{ @include column(9); } + .breadcrumb{ + margin-left:-($desktop-nice-padding); + margin-right:-($desktop-nice-padding); + } } footer{ width:80%; diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss index 61f7c34acd6..29aec4e05b2 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss @@ -25,38 +25,59 @@ header{ } .summary{ - @include row(); + @include clearfix(); background-color:$color-grey-5; margin-bottom:2em; + padding-top:2em; + padding-bottom:2em; - h2{ - @include visuallyhidden(); - } - ul{ + ul.stats{ + @include clearfix(); @include unlist(); width:100%; - } - li{ - @include column(4); - padding-top:3em; - padding-bottom:3em; - &:first-child{ - @include push-padding($grid-content-indent); + li{ + @include column(4); + + &:before{ + opacity:0.2; + font-size:6em; + float:left; + } } - } - li:before{ - opacity:0.2; - font-size:6em; - float:left; + span{ + font-family:Bitter, Georgia, serif; + display:block; + font-size:4em; + line-height:1em; + font-weight:300; + } } - span{ - font-family:Bitter, Georgia, serif; - display:block; - font-size:4em; - line-height:1em; - font-weight:300; + .search-bar{ + @include clearfix(); + border-top:1px solid $color-grey-4; + padding:1em 0 0 0; + + h2{ + display:inline-block; + margin-right:1em; + } + .fields{ + display:inline-block; + clear:none; + } + .field{ + display:inline-block; + } + + label{ + display:inline-blo; + } + input{ + background-color:white; + } } + } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss index 9c421723977..d3e41c98482 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss +++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss @@ -6,6 +6,28 @@ margin-bottom:10em; } +.page-editor header { + +} +.page-editor .breadcrumb{ + margin-top:-1.8em; + margin-bottom:2em; +} +.page-editor .modal .breadcrumb{ + margin:0; + background-color:transparent; + + a{ + color:$color-grey-2; + } + li:hover{ + background-color:$color-grey-4; + } + .home{ + padding-left:0; + } +} + .objects{ background:url("#{$static-root}bg-dark-diag.svg"); } diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/chooser/_search_results.html b/wagtail/wagtailadmin/templates/wagtailadmin/chooser/_search_results.html index 72670f95bc6..b9a2f0e499b 100644 --- a/wagtail/wagtailadmin/templates/wagtailadmin/chooser/_search_results.html +++ b/wagtail/wagtailadmin/templates/wagtailadmin/chooser/_search_results.html @@ -2,7 +2,7 @@ {% if not is_searching %}

{% trans "Explorer" %}