Change buttons for mobile #2780

CHANGELOG.txt

@@ -37,6 +37,7 @@ Changelog
  * Fix: Ensure that number localisation is not applied to object IDs within admin templates (Tom Hendrikx)
  * Fix: Paginating with a search present was always returning the 1st page in Internet Explorer 10 & 11 (Ralph Jacobs)
  * Fix: RoutablePageMixin and wagtailforms previews now set the `request.is_preview` flag (Wietze Helmantel)
+ * Fix: The save and preview buttons in the page editor are now mobile-friendly (Maarten Kling)
 
 
 1.9 (16.02.2017)

CONTRIBUTORS.rst

@@ -223,6 +223,7 @@ Contributors
 * Wietze Helmantel
 * Patrick Gerken
 * Will Giddens
+* Maarten Kling
 
 Translators
 ===========

docs/releases/1.10.rst

@@ -49,6 +49,7 @@ Bug fixes
  * Ensure that number localisation is not applied to object IDs within admin templates (Tom Hendrikx)
  * Paginating with a search present was always returning the 1st page in Internet Explorer 10 & 11 (Ralph Jacobs)
  * RoutablePageMixin and wagtailforms previews now set the ``request.is_preview`` flag (Wietze Helmantel)
+ * The save and preview buttons in the page editor are now mobile-friendly (Maarten Kling)
 
 
 Upgrade considerations

wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss

@@ -179,6 +179,16 @@ footer {
             }
         }
     }
+
+    @media screen and (max-width: $breakpoint-mobile) {
+        .actions {
+            width: 100%;
+        }
+
+        .meta p {
+            white-space: normal;
+        }
+    }
 }
 
 ::-webkit-scrollbar {

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

@@ -351,6 +351,13 @@
 footer .preview {
     button,
     .button {
+        @media screen and (max-width: $breakpoint-mobile) {
+            width: 100%;
+            margin-top: 2px;
+            margin-bottom: 2px;
+            height: 3em;
+        }
+
         background-color: lighten($color-grey-2, 10%);
         border-color: lighten($color-grey-2, 10%);
 
@@ -424,7 +431,7 @@ footer .preview {
                 width: 100%;
                 padding-left: 6.4em;
             }
-            
+
             &:hover .object-help {
                 opacity: 1;
             }