Tidy up page edit header

client/scss/components/_header.scss

@@ -65,10 +65,14 @@ header {
 
         @include media-breakpoint-down(xs) {
             // To all hamburger menu to be visible
-            padding-left: $desktop-nice-padding;
-            padding-right: 0;
+            padding-left: 1.6em;
+            padding-right: 1.6em;
             padding-top: 11px;
 
+            .breadcrumb {
+                margin-left: 0;
+            }
+
             .nice-padding {
                 margin-left: -$desktop-nice-padding;
             }

client/scss/components/_modals.scss

@@ -99,6 +99,10 @@ $zindex-modal-background: 500;
     header {
         padding-left: 2em;
         padding-right: 100px;
+
+        &.tab-merged {
+            padding-left: 1.6em;
+        }
     }
 
     .header-title {
@@ -106,12 +110,22 @@ $zindex-modal-background: 500;
         padding-left: 0 !important;
         margin-left: -36px;
     }
+
+    .tab-merged .header-title {
+        margin-left: 0;
+    }
 }
 
 @include media-breakpoint-up(sm) {
     .modal-dialog {
         padding: 0 0 2em $menu-width;
     }
+
+    .modal-body {
+        header.tab-merged {
+            padding-left: $desktop-nice-padding;
+        }
+    }
 }
 
 @include media-breakpoint-up(xl) {

client/scss/components/_tabs.scss

@@ -26,14 +26,13 @@
         @include transition(border-color 0.2s ease);
         background-color: $color-teal-darker;
         text-transform: uppercase;
-        font-weight: 700;
-        font-size: 1.2em;
+        font-weight: 600;
         text-decoration: none;
         display: block;
         padding: 0.7em;
         color: $color-white;
         border-top: 0.3em solid $color-teal-darker;
-        max-height: 1.2em;
+        max-height: 1.44em;
         overflow: hidden;
 
         &:hover {
@@ -68,19 +67,6 @@
         border-top: 0.3em solid $color-grey-1;
     }
 
-    li.settings a {
-        &:before {
-            @include font-smoothing;
-            font-family: wagtail;
-            vertical-align: middle;
-            text-transform: none;
-            content: map-get($icons, 'cog');
-            margin-right: 0.5em;
-            font-size: 1.2em;
-            font-weight: normal;
-        }
-    }
-
     // For cases where tab-nav should merge with header
     &.merged {
         margin-top: 0;
@@ -121,8 +107,8 @@
         }
 
         a {
-            padding-left: $desktop-nice-padding - 10;
-            padding-right: $desktop-nice-padding - 10;
+            padding-left: $mobile-nice-padding;
+            padding-right: $mobile-nice-padding;
         }
 
         li.settings a {
@@ -136,7 +122,7 @@
         min-width: 0;
 
         &:first-of-type {
-            padding-left: 2.5em;
+            padding-left: $desktop-nice-padding;
         }
     }
 }

client/scss/elements/_typography.scss

@@ -38,7 +38,7 @@ h1 {
 h2 {
     text-transform: uppercase;
     font-size: 1.3em;
-    font-family: Open Sans;
+    font-family: Open Sans, Arial, sans-serif;
     font-weight: 600;
     color: $color-grey-2;
 }

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -33,34 +33,47 @@
         }
     }
 
+    h1 {
+        font-size: 1.915em;  // approximately 26px
+
+        &.header-title {
+            text-transform: initial;
+        }
+    }
+
+    .header-title {
+        padding-left: 0;
+    }
+
+    .modal-body .header-title h1 {
+        font-size: 1.5em;
+    }
+
     .header-meta {
         list-style: none;
         margin-top: 0;
         margin-bottom: 0;
+        padding: 0;
 
         li {
+            border: 0;
             float: left;
             height: 1.5em;
-            line-height: 1.5em;
-            margin-top: 1em;
-            padding: 0 .5em;
-            border-right: 1px solid rgba(255, 255, 255, 0.5);
+            line-height: 2em;
+            margin: 1em 0 1.5em;
 
             .icon {
-                width: 1.25em;
-                height: 1.5em;
-                vertical-align: text-bottom;
-            }
+                @include svg-icon(1.25em, text-bottom);
 
-            &:first-child .button {
-                margin-left: -1em;
+                margin-right: 0.4em;
             }
 
-            &:first-child {
-                margin-left: -.5em;  // offset the padding
+            .icon-warning {
+                @include svg-icon();
             }
-            &:last-child {
-                border: none;
+
+            &:first-child .button {
+                margin-left: -0.8em;
             }
 
             .avatar {
@@ -71,11 +84,13 @@
         .button {
             font-size: 1em;
             margin-top: -0.25em; // Account for the button border
-            overflow: auto;
+            overflow: initial;
+            height: 2.5em;
+            line-height: 2.5em;
         }
 
         .action-workflow-status {
-            font-weight: 700;
+            font-weight: 600;
 
             span {
                 font-weight: 500;
@@ -85,10 +100,14 @@
         .human-readable-date {
             display: inline;
         }
-    }
 
-    .header-title {
-        padding-left: 0;
+        &--status {
+            padding-right: 0.8em;
+        }
+
+        &--type {
+            padding: 0 0.8em;
+        }
     }
 
 }
@@ -541,17 +560,25 @@ footer .preview {
     }
 }
 
-.lock-status {
-    display: inline-block;
-    margin: 0 .5em;
-    text-transform: uppercase;
-    width: 4em;
-}
+.button.button--live {
+    background-color: $color-white;
+    color: $color-teal;
+    border-radius: 2px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 2.3em;
+    padding: 0 0.75em;
 
-.lock-indicator .button-toggle--on .icon {
-    fill: $color-red;
-}
+    .icon {
+        @include svg-icon(1.25em);
+        margin-right: 0.25em;
+    }
 
+    &:hover {
+        background-color: $color-teal-darker;
+        color: $color-white;
+    }
+}
 
 .workflow-timeline {
     list-style: none;

wagtail/admin/templates/wagtailadmin/pages/_page_view_live_tag.html

@@ -1,7 +1,7 @@
 {% load i18n wagtailadmin_tags %}
 {% if page.live and page.url is not None %}
     {% test_page_is_public page as is_public %}
-    <a href="{{ page.url }}" target="_blank" rel="noopener noreferrer" class="button button-small button-nostroke live" title="{% trans 'Visit the live page' %}">
+    <a href="{{ page.url }}" target="_blank" rel="noopener noreferrer" class="button button-nostroke button--live" title="{% trans 'Visit the live page' %}">
         {% icon name="link-external" class_name="initial" %}
         {% trans "Live" %}
         <span class="privacy-indicator-tag {% if is_public %}u-hidden" aria-hidden="true{% endif %}" title="{% trans "This page is live but only available to certain users" %}">({% trans "restricted" %})</span>

wagtail/admin/templates/wagtailadmin/pages/edit.html

@@ -20,18 +20,16 @@
             </div>
         </div>
         <ul class="row header-meta">
-            <li>
-                {% include "wagtailadmin/shared/workflow_status.html" with page=page_for_status %}
-            </li>
+            {% include "wagtailadmin/shared/workflow_status.html" with page=page_for_status %}
             {% if page.get_latest_revision %}
             <li>
-                <a href="{% url 'wagtailadmin_pages:history' page.id %}" class="button button-small button-nobg button-strokeonhover text-notransform">
+                <a href="{% url 'wagtailadmin_pages:history' page.id %}" class="button button-small button-nobg text-notransform">
                     {% icon "history" class_name="default" %}
                     {% trans "Page history" %}
                 </a>
             </li>
             {% endif %}
-            <li>
+            <li class="header-meta--type">
                 {% icon name="doc-empty-inverse" class_name="default" %}
                 {{ content_type.model_class.get_verbose_name }}
             </li>

wagtail/admin/templates/wagtailadmin/shared/workflow_status.html

@@ -1,7 +1,8 @@
 {% load i18n wagtailadmin_tags %}
 {% if workflow_state %}
+<li>
     <button data-url="{% url 'wagtailadmin_pages:workflow_status' page.id %}"
-            class="button button-small button-nobg button-strokeonhover text-notransform action-workflow-status">
+            class="button button-small button-nobg text-notransform action-workflow-status">
         {% if workflow_state.status == 'needs_changes' %}
             {% icon name="warning" %}
             {% trans "Changes requested" %}
@@ -17,7 +18,9 @@
             {% include "wagtailadmin/shared/last_updated.html" with since_text=since_text last_updated=workflow_state.current_task_state.started_at %}
         {% endif %}
     </button>
+</li>
 {% else %}
+<li class="header-meta--status">
     {% if page.get_latest_revision %}
         {% if page.get_latest_revision.user %}
             <span class="avatar small" data-wagtail-tooltip="{{ page.get_latest_revision.user.get_full_name|default:page.get_latest_revision.user.get_username }}"><img src="{% avatar_url page.get_latest_revision.user size=25 %}" alt="" /></span>
@@ -31,4 +34,5 @@
     {% else %}
         {% trans "Draft" %}
     {% endif %}
+</li>
 {% endif %}