Merge pull request #694 from M165437/mobile-friendly-ui

Add breakpoint to switch to mobile friendly form layout

core/client/assets/sass/layouts/settings.scss

@@ -3,7 +3,7 @@
  * used for configuring your Ghost install.
  *
  * Table of Contents:
- * 
+ *
  * Settings
  *
  */
@@ -232,7 +232,8 @@
             left:0;
             bottom:0;
             padding:40px;
-            overflow:auto;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
 
             &.no-padding {
                 padding: 0;
@@ -240,6 +241,7 @@
 
             @include breakpoint($netbook) { padding-left:15px; }
             @include breakpoint($letterbox) { top: 0; }
+            @include breakpoint(550px) { padding: 0 15px 40px; }
         }
 
     }//.settings-content

core/client/assets/sass/modules/forms.scss

@@ -3,7 +3,7 @@
  * but mainly in the settings pages. Don't fuck with them.
  *
  * Table of Contents:
- * 
+ *
  * General
  * Buttons
  * Split Buttons
@@ -46,6 +46,15 @@ form {
             font-weight:bold;
             color:$brown;
             text-align: right;
+
+            @include breakpoint(550px) {
+                position: relative;
+                top: auto;
+                left: auto;
+                width: auto;
+                margin-bottom: 5px;
+                text-align: left;
+            }
         }
     }
 
@@ -66,6 +75,11 @@ form {
         border: darken($lightbrown, 5%) 1px solid;
         border-radius: $rounded;
         @include transition(all 0.15s ease-in-out);
+
+        @include breakpoint(550px) {
+            width: 100%;
+            @include box-sizing(border-box);
+        }
     }
 
     textarea {
@@ -104,6 +118,11 @@ form {
         width:270px;
         height:30px;
         line-height:30px;
+
+        @include breakpoint(550px) {
+            width: 100%;
+            @include box-sizing(border-box);
+        }
     }
 
     .radio input[type="radio"],
@@ -127,6 +146,8 @@ form {
         position:relative;
         margin:1.5em 0;
         padding-left:140px;
+
+        @include breakpoint(550px) { padding-left: 0; }
     }
 
 }//form
@@ -136,9 +157,9 @@ form {
    Buttons
    ============================================================================= */
 
-/* 
+/*
  * Buttons are used for primary calls to action on a page.
- * 
+ *
  * Usage:
  * <button type="button" class="button">Default</button>
  */
@@ -236,9 +257,9 @@ input[type="reset"] {
    Split Buttons
    ============================================================================= */
 
-/* 
+/*
  * The splitbutton adds addition values to a button, via a dropdown (or drop-up).
- * 
+ *
  * Usage:
  * <section class="splitbutton">
  *     <button type="button" class="button">Split Up</button>
@@ -281,7 +302,7 @@ input[type="reset"] {
             margin-top: -3px;
             margin-right: -5px;
             @include transition(margin-top 0.3s ease);
-            /* Transition of transform properties are split out due to a 
+            /* Transition of transform properties are split out due to a
                 defect in the vendor prefixing of transform transitions.
                 See: http://github.com/thoughtbot/bourbon/pull/86 */
             @include transition-property(transform);