From ad94e689fc0712d6e733975e018a56663d0f1d36 Mon Sep 17 00:00:00 2001
From: Edd Baldry <edd.baldry@gmail.com>
Date: Thu, 27 Oct 2016 08:28:43 +0100
Subject: [PATCH] Mobile viewport alignment

---
 .../wagtailadmin/scss/components/_header.scss | 19 ++++++++++++++-----
 .../wagtailadmin/scss/components/_modals.scss |  5 ++---
 .../static_src/wagtailadmin/scss/core.scss    |  8 ++++++++
 .../scss/layouts/page-editor.scss             |  7 +++++++
 .../templates/wagtailadmin/shared/header.html |  5 +++--
 .../wagtailsnippets/snippets/type_index.html  |  5 +++--
 6 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_header.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_header.scss
index 7d99197bb..013287e9c 100644
--- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_header.scss
+++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_header.scss
@@ -29,6 +29,13 @@ header {
     .col {
         float: left;
         margin-right: 2em;
+
+        // @media screen and (max-width: $breakpoint-mobile) {
+        //     // To all hamburger menu to be visible
+        //     padding-left: 2em;
+        //     margin-top: -2px;
+        // No... This fixes the snippet page but breaks all else
+        }
     }
 
     .left {
@@ -53,6 +60,13 @@ header {
     &.tab-merged, 
     &.no-border {
         border: 0;
+
+        @media screen and (max-width: $breakpoint-mobile) {
+            // To all hamburger menu to be visible
+            padding-left: $desktop-nice-padding;
+            padding-top: 11px;
+        }
+
     }
 
     &.merged.no-border {
@@ -151,10 +165,5 @@ header {
         .col9 {
             @include column(9);
         }
-
-        .breadcrumb {
-            margin-left: -($desktop-nice-padding);
-            margin-right: -($desktop-nice-padding);
-        }
     }
 }
diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_modals.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_modals.scss
index 497f6d1f3..595a19d81 100644
--- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_modals.scss
+++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_modals.scss
@@ -103,9 +103,8 @@ $zindex-modal-background: 500;
     }
 
     .header-title {
-        padding-left: 1em!important;
-        /* We need !important as the modal is nested within the page-editor and
-        page-editor.scss is compiled after this file */
+        padding-left: 0em!important;
+        margin-left: -28px;
     }
 }
 
diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss
index 30b8a77a9..35ba18eb0 100644
--- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss
+++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss
@@ -447,6 +447,8 @@ footer,
     .breadcrumb {
         padding-top: 0;
         background: $color-teal-darker;
+        margin-left: -($desktop-nice-padding);
+        margin-right: -($desktop-nice-padding);
 
         li {
             a,
@@ -501,6 +503,12 @@ footer,
     }
 }
 
+// @media screen and (max-width: $breakpoint-mobile) {
+//     .breadcrumb {
+//         padding-left: $mobile-nice-padding;
+//     }
+// }
+
 // Transitions (resolution agnostic)
 .content-wrapper,
 .nav-main,
diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss
index 2d0c7d0c8..2b8528974 100644
--- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss
+++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss
@@ -31,6 +31,13 @@
 
     .header-title {
         padding-left: 3.1em;
+
+        @media screen and (max-width: $breakpoint-mobile) {
+            padding-left: 0;
+            margin-left: -28px;
+            // Because it's nested within tab-merged which we've given padding
+            // on mobile viewports due to snippets
+        }
     }
 }
 
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/shared/header.html b/wagtail/wagtailadmin/templates/wagtailadmin/shared/header.html
index f0138aeb2..988df0035 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/shared/header.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/shared/header.html
@@ -18,10 +18,11 @@
     add_text - text for the 'add' button
 {% endcomment %}
 <header class="{% if merged %}merged{% endif %} {% if tabbed %}tab-merged{% endif %} {% if search_form %}hasform{% endif %}">
-    <div class="row">
+    <div class="row nice-padding">
         <div class="left">
             <div class="col header-title">
-                <h1 class="icon icon-{{ icon }}">{{ title }}{% if subtitle %} <span>{{ subtitle }}</span>{% endif %}</h1>
+                <h1 class="icon icon-{{ icon }}">
+                {{ title }}{% if subtitle %} <span>{{ subtitle }}</span>{% endif %}</h1>
             </div>
             {% if search_url %}
                 <form class="col search-form" action="{% url search_url %}{% if query_parameters %}?{{ query_parameters }}{% endif %}" method="get" novalidate>
diff --git a/wagtail/wagtailsnippets/templates/wagtailsnippets/snippets/type_index.html b/wagtail/wagtailsnippets/templates/wagtailsnippets/snippets/type_index.html
index d29ba34f0..9a84dca18 100644
--- a/wagtail/wagtailsnippets/templates/wagtailsnippets/snippets/type_index.html
+++ b/wagtail/wagtailsnippets/templates/wagtailsnippets/snippets/type_index.html
@@ -17,8 +17,9 @@
 
     <header class="nice-padding">
         <div class="row row-flush">
-            <div class="left col9 header-title">
-                <h1 class="icon icon-snippet">{% blocktrans with snippet_type_name_plural=model_opts.verbose_name_plural|capfirst %}Snippets <span>{{ snippet_type_name_plural }}</span>{% endblocktrans %}</h1>
+            <div class="left col9 header-snippet">
+                <h1 class="icon icon-snippet">
+                {% blocktrans with snippet_type_name_plural=model_opts.verbose_name_plural|capfirst %}Snippets <span>{{ snippet_type_name_plural }}</span>{% endblocktrans %}</h1>
 
                 {% if is_searchable %}
                     <form class="col search-form" action="{% url 'wagtailsnippets:list' model_opts.app_label model_opts.model_name %}" method="get" novalidate>