Merge pull request #94 from muffinresearch/update-for-android-967145

Update android styling (bug 967145)
mozilla · Jul 22, 2014 · 25bb936 · 25bb936
2 parents 87bd6d0 + e745a54
commit 25bb936
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 5 deletions.
diff --git a/public/stylus/_full-error.styl b/public/stylus/_full-error.styl
@@ -66,6 +66,13 @@
 
 @media $small-min-width {
     .full-error {
+
+        h1 {
+            font-size: 30px;
+            margin: 0;
+            padding: 0 0 15px;
+        }
+
         .error {
             position: static;
         }

diff --git a/public/stylus/_pin.styl b/public/stylus/_pin.styl
@@ -66,3 +66,26 @@
         }
     }
 }
+
+@media $small-min-width {
+    .pin {
+
+        margin: 0 auto;
+        max-width: 520px;
+
+        .pin-container {
+            max-width: 100%;
+        }
+
+        .buttons {
+            margin-top: 10px;
+
+            .button,
+            .button:only-child {
+                width: 48%;
+                width: calc(50% - 5px);
+            }
+        }
+
+    }
+}
diff --git a/public/stylus/_throbber.styl b/public/stylus/_throbber.styl
@@ -2,6 +2,7 @@
     // This will normally be overlaid hence it needs it's own background.
     background: $bg-color;
     background: rgba(244, 244, 244, 0.9);
+    padding-top: 80px;
     bottom: 0;
     grain();
     left: 0;
@@ -16,7 +17,7 @@
 
     .progress {
         display: block;
-        margin: 80px auto 0;
+        margin: 0 auto;
         height: 53px;
         width: 53px;
         background: transparent embedurl('throbber-53.gif') no-repeat 50% 50%;

diff --git a/public/stylus/_typography.styl b/public/stylus/_typography.styl
@@ -40,3 +40,17 @@ a:focus {
     line-height: 18px;
     text-decoration: none;
 }
+
+@media $small-min-width {
+    h1 {
+        border-bottom: 1px solid $light-gray;
+        font-size: 30px;
+        margin-bottom: 30px;
+        padding-bottom: 10px;
+    }
+
+    p {
+        font-size: 22px;
+        line-height: 28px;
+    }
+}
diff --git a/public/stylus/spartacus.styl b/public/stylus/spartacus.styl
@@ -62,9 +62,30 @@ main,
 }
 
 @media $small-min-width {
+
+    .view {
+        min-height: 100%;
+        height: auto;
+    }
+
+    main {
+        height: 100%;
+    }
+
+    .page {
+        height: auto;
+    }
+
+    main,
+    .page {
+        min-height: 100%;
+        overflow: visible;
+    }
+
+
     .inner {
         display: block;
-        padding-top: 30px;
+        padding: 85px;
     }
 }
 

diff --git a/styleguide/context.js b/styleguide/context.js
@@ -6,21 +6,25 @@ module.exports = {
     heading: "Error Heading",
     msg: "An error message telling the user what happened",
     errorCode: "ERROR_CODE",
-    showCta: true,
+    cancelModifier: 'cancel cta',
+    cancelText: 'Cancel',
+    showCancel: true,
+    showCta: false,
   },
   throbber: {
     msg: "Loading",
   },
   pinForm: {
-    pinTitle: "Create Pin",
+    pinTitle: "Create PIN",
     ctaText: "Continue"
   },
   locked: {
     pageclass: 'full-error locked',
     heading: 'Pin Locked',
     msg: 'You entered the wrong PIN too many times. Your account is locked. Please try your purchase again in 5 minutes.',
     showCancel: true,
-    cancelText: 'OK'
+    cancelText: 'OK',
+    cancelModifier: 'cancel cta',
   }
 
 };