Apply full header breadcrumb spacing fixes for all templates (wagtail…

…#8471, wagtail#8491)
stevedya · May 13, 2022 · dcbf6b9 · dcbf6b9
1 parent b1ed496
commit dcbf6b9
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 43 deletions.
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -15,6 +15,7 @@ Changelog
  * Add informational Codecov status checks for GitHub CI pipelines (Tom Hu)
  * Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
  * Fix: Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
+ * Fix: Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)
 
 
 3.0 (xx.xx.xxxx) - IN DEVELOPMENT

diff --git a/client/scss/components/_breadcrumb.scss b/client/scss/components/_breadcrumb.scss
@@ -4,7 +4,6 @@
   padding-top: 1.4em;
   font-size: 0.85em;
   line-height: 1.5em;
-  margin-inline-start: 2em;
   background: $color-teal;
 
   li,
@@ -72,11 +71,23 @@
     transform: scale(1.75) translate(0.3em, 0.1em);
   }
 
+  // Adjust padding and size of breadcrumbs when nested inside of headers
+  header & {
+    display: flex;
+    align-items: center;
+    height: $mobile-nav-indent;
+    padding-top: 0;
+    padding-inline-start: $mobile-nav-indent + 10px;
+
+    @include media-breakpoint-up(sm) {
+      padding-inline-start: 0;
+      height: auto;
+    }
+  }
+
   @include media-breakpoint-up(sm) {
     padding-top: 0;
     background: $color-teal-darker;
-    margin-inline-start: -($desktop-nice-padding);
-    margin-inline-end: -($desktop-nice-padding);
 
     .home_icon {
       margin-inline-start: 1.25em;

diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss
@@ -4,11 +4,6 @@
 header {
   @apply w-text-primary w-mb-8;
 
-  padding-top: 0.5rem;
-  padding-bottom: 1.5rem;
-  padding-inline-start: 110px;
-  padding-inline-end: 20px;
-
   a {
     @apply w-text-primary w-underline;
   }
@@ -38,6 +33,26 @@ header {
     }
   }
 
+  // Give padding to the rows inside of headers so that nested breadcrumbs aren't padded by their parent header el.
+  // Use header--with-padding for headers that don't contain .row elements.
+  &.header--with-padding,
+  > .row {
+    padding-top: 0.5rem;
+    padding-bottom: 1.5rem;
+    padding-inline-start: 110px;
+    padding-inline-end: 20px;
+  }
+
+  .breadcrumb + .row {
+    padding-inline-start: $mobile-nav-indent + 10px;
+  }
+
+  &.header--home {
+    @include nice-padding();
+    padding-top: 0.5rem;
+    margin-top: $mobile-nav-indent;
+  }
+
   .col {
     float: left;
     margin-inline-end: 2em;
@@ -77,17 +92,6 @@ header {
 
   &.no-border {
     border: 0;
-
-    @include media-breakpoint-down(xs) {
-      // To all hamburger menu to be visible
-      padding-inline-start: 1.6em;
-      padding-inline-end: 1.6em;
-      padding-top: 11px;
-
-      .nice-padding {
-        margin-inline-start: -$desktop-nice-padding;
-      }
-    }
   }
 
   &.merged.no-border {
@@ -166,9 +170,20 @@ header {
 
 @include media-breakpoint-up(sm) {
   header {
-    padding-top: 1.5rem;
-    padding-inline-start: 90px;
-    padding-inline-end: 90px;
+    .row {
+      padding-top: 1.5rem;
+      padding-inline-start: 90px;
+      padding-inline-end: 90px;
+    }
+
+    .breadcrumb + .row {
+      padding-inline-start: 90px;
+    }
+
+    &.header--home {
+      padding-top: 1.5rem;
+      margin-top: 0;
+    }
 
     .left {
       float: left;

diff --git a/docs/releases/4.0.md b/docs/releases/4.0.md
@@ -25,6 +25,7 @@ depth: 1
  * Fix issue where `ModelAdmin` index listings with export list enabled would show buttons with an incorrect layout (Josh Woodcock)
  * Fix typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
  * Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
+ * Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)
 
 
 ## Upgrade considerations

diff --git a/wagtail/admin/templates/wagtailadmin/home.html b/wagtail/admin/templates/wagtailadmin/home.html
@@ -12,10 +12,10 @@
 {% endblock %}
 
 {% block content %}
-    <header class="merged nice-padding">
+    <header class="merged header--home">
         <div class="avatar"><img src="{% avatar_url user %}" alt="" /></div>
 
-        <div>
+        <div class="sm:w-ml-4">
             <h1>{% block branding_welcome %}{% blocktrans trimmed %}Welcome to the {{ site_name }} Wagtail CMS{% endblocktrans %}{% endblock %}</h1>
             <div class="user-name">{{ user|user_display_name }}</div>
         </div>

diff --git a/wagtail/admin/templates/wagtailadmin/pages/index.html b/wagtail/admin/templates/wagtailadmin/pages/index.html
@@ -4,7 +4,7 @@
 {% block bodyclass %}page-explorer {% if ordering == 'ord' %}reordering{% endif %}{% endblock %}
 
 {% block content %}
-    <header class="merged no-border nice-padding no-v-padding">
+    <header class="merged no-border">
         <h1 class="visuallyhidden">Explorer</h1>
 
         {% explorer_breadcrumb parent_page %}

diff --git a/wagtail/admin/templates/wagtailadmin/pages/move_choose_destination.html b/wagtail/admin/templates/wagtailadmin/pages/move_choose_destination.html
@@ -2,14 +2,14 @@
 {% load i18n wagtailadmin_tags %}
 {% block titletag %}{% blocktrans trimmed with title=page_to_move.specific_deferred.get_admin_display_title %}Select a new parent page for {{ title }}{% endblocktrans %}{% endblock %}
 {% block content %}
-    <div class="nice-padding">
-        {% move_breadcrumb page_to_move viewed_page %}
-    </div>
     <header>
-        <h1>
-            {% icon name="doc-empty-inverse" %}
-            {% blocktrans trimmed with title=page_to_move.specific_deferred.get_admin_display_title %}Select a new parent page for <span>{{ title }}</span>{% endblocktrans %}
-        </h1>
+        {% move_breadcrumb page_to_move viewed_page %}
+        <div class="row">
+            <h1>
+                {% icon name="doc-empty-inverse" %}
+                {% blocktrans trimmed with title=page_to_move.specific_deferred.get_admin_display_title %}Select a new parent page for <span>{{ title }}</span>{% endblocktrans %}
+            </h1>
+        </div>
     </header>
     <div class="nice-padding">
         {% include "wagtailadmin/pages/listing/_list_move.html" with pages=child_pages parent_page=viewed_page %}

diff --git a/wagtail/admin/templates/wagtailadmin/pages/preview_error.html b/wagtail/admin/templates/wagtailadmin/pages/preview_error.html
@@ -4,7 +4,7 @@
 {% block titletag %}{% trans 'Preview error' %}{% endblock %}
 
 {% block content %}
-    <header>
+    <header class="header--with-padding">
         <h1>{% trans 'Preview error' %}</h1>
     </header>
     <div class="nice-padding">

diff --git a/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/breadcrumbs_page.scss b/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/breadcrumbs_page.scss
@@ -1,9 +1,2 @@
 @import '../../../../../../client/scss/settings';
 @import '../../../../../../client/scss/tools';
-
-@include media-breakpoint-down(sm) {
-  .breadcrumb {
-    margin-inline-start: 30px;
-    margin-inline-end: -20px;
-  }
-}
diff --git a/wagtail/contrib/modeladmin/templates/modeladmin/includes/header_with_breadcrumb.html b/wagtail/contrib/modeladmin/templates/modeladmin/includes/header_with_breadcrumb.html
@@ -1,4 +1,5 @@
-<div class="nice-padding">
+{% extends "wagtailadmin/shared/header_with_locale_selector.html" %}
+
+{% block breadcrumb %}
     {% include "modeladmin/includes/breadcrumb.html" %}
-</div>
-{% include "wagtailadmin/shared/header_with_locale_selector.html" %}
+{% endblock %}