From 4855fcc3307d51149e9c17041bb7f68fd1ad972a Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@onolan.org>
Date: Tue, 25 Aug 2015 18:01:26 +0200
Subject: [PATCH] Optimise mobile navigation

Make everything a little bit larger on small screens
---
 .../app/styles/components/dropdowns.css       | 11 ++++
 .../app/styles/components/settings-menu.css   |  5 --
 core/client/app/styles/layouts/auth.css       |  3 +-
 core/client/app/styles/layouts/main.css       | 62 ++++++++++++++++---
 .../app/templates/components/gh-nav-menu.hbs  |  2 +-
 5 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/core/client/app/styles/components/dropdowns.css b/core/client/app/styles/components/dropdowns.css
index 4ef7efa885..3dcd241818 100644
--- a/core/client/app/styles/components/dropdowns.css
+++ b/core/client/app/styles/components/dropdowns.css
@@ -66,6 +66,17 @@
     line-height: 1em;
 }
 
+@media (max-width: 500px) {
+    .dropdown-menu > li > a,
+    .dropdown-menu > li > button {
+        padding: 7px 8px;
+        font-size: 1.5rem;
+    }
+    .dropdown-menu i {
+        font-size: 16px;
+    }
+}
+
 
 /* States
 /* ---------------------------------------------------------- */
diff --git a/core/client/app/styles/components/settings-menu.css b/core/client/app/styles/components/settings-menu.css
index 7553e509db..d1e2a552c3 100644
--- a/core/client/app/styles/components/settings-menu.css
+++ b/core/client/app/styles/components/settings-menu.css
@@ -174,8 +174,3 @@
 .mobile-menu-expanded .content-cover {
     transform: translate3d(235px, 0px, 0px);
 }
-@media (max-width: 500px) {
-    .mobile-menu-expanded .content-cover {
-        transform: translate3d(75vw, 0, 0);
-    }
-}
diff --git a/core/client/app/styles/layouts/auth.css b/core/client/app/styles/layouts/auth.css
index dbd85ba0e1..2880b9a4fb 100644
--- a/core/client/app/styles/layouts/auth.css
+++ b/core/client/app/styles/layouts/auth.css
@@ -41,8 +41,7 @@
     border-radius: 0;
     text-transform: none;
     letter-spacing: 0;
-    /* Needs white BG to hide browser-extension password tools like
-    lastpass and safari-password manager */
+    /* Needs white BG to hide ugly lastpass icon */
 }
 
 .forgotten-link:hover {
diff --git a/core/client/app/styles/layouts/main.css b/core/client/app/styles/layouts/main.css
index 4ca9e051d7..4c7efd3a77 100644
--- a/core/client/app/styles/layouts/main.css
+++ b/core/client/app/styles/layouts/main.css
@@ -13,6 +13,7 @@
 .gh-viewport {
     flex-grow: 1;
     display: flex;
+    overflow: hidden;
     max-height: 100vh;
 }
 
@@ -218,11 +219,15 @@
 }
 
 @media (max-width: 800px) {
+    .view-header {
+        padding-left: 0 !important;
+    }
+
     .gh-mobilemenu-button {
         flex-shrink: 0;
         display: block;
-        margin: 0 5px 0 -10px;
-        padding: 10px;
+        margin: 0;
+        padding: 24px;
         font-size: 18px;
         line-height: 18px;
     }
@@ -236,24 +241,52 @@
         position: absolute;
         top: 0;
         left: 0;
-        width: 235px;
+        width: 270px;
         height: 100%;
         transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
-        transform: translate3d(-235px, 0px, 0px);
+        transform: translate3d(-270px, 0px, 0px);
     }
     .mobile-menu-expanded .gh-nav {
         transform: translate3d(0,0,0);
     }
+
+    .gh-nav-list a {
+        padding: 7px 10px 7px 15px;
+        border-radius: 0 4px 4px 0;
+    }
 }
 
 @media (max-width: 500px) {
+    .gh-mobilemenu-button {
+        padding: 24px 15px 24px 16px;
+    }
+
     .gh-nav {
-        width: 75vw;
-        transform: translate3d(-75vw, 0px, 0px);
+        width: 80vw;
+        transform: translate3d(-80vw, 0px, 0px);
     }
     .mobile-menu-expanded .gh-nav {
         transform: translate3d(0,0,0);
     }
+    .mobile-menu-expanded .content-cover {
+        transform: translate3d(80vw, 0, 0);
+    }
+
+    .gh-nav-list {
+        font-size: 1.5rem;
+    }
+
+    .gh-nav-list-h {
+        font-size: 1.4rem;
+    }
+
+    .gh-nav-list i {
+        margin-right: 8px;
+        width: 17px;
+        height: 17px;
+        text-align: center;
+        font-size: 17px;
+    }
 }
 
 
@@ -344,8 +377,8 @@
 }
 
 .gh-help-menu .dropdown {
-    right: 112px;
     bottom: 215px;
+    left: -180px;
 }
 
 .gh-help-menu .dropdown .dropdown-menu {
@@ -382,7 +415,7 @@
 
 .view-title {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     overflow: hidden;
     margin: 0;
     padding: 0;
@@ -434,3 +467,16 @@
 .view-content p * {
     user-select: text;
 }
+
+@media (max-width: 400px) {
+    .view-header {
+        padding: 0 7px;
+        height: 50px;
+    }
+    .view-title {
+        font-size: 1.8rem;
+    }
+    .view-content {
+        padding: 15px;
+    }
+}
diff --git a/core/client/app/templates/components/gh-nav-menu.hbs b/core/client/app/templates/components/gh-nav-menu.hbs
index 9aa4c8ca6d..0f7c7adb39 100644
--- a/core/client/app/templates/components/gh-nav-menu.hbs
+++ b/core/client/app/templates/components/gh-nav-menu.hbs
@@ -7,7 +7,7 @@
     <i class="icon-arrow"></i>
 {{/gh-dropdown-button}}
 {{#gh-dropdown tagName="div" name="user-menu" closeOnClick="true"}}
-    <ul class="dropdown-menu dropdown-triangle-top js-user-menu-dropdown-menu" role="menu" style="right:-50%;left:auto;margin-right:40px">
+    <ul class="dropdown-menu dropdown-triangle-top js-user-menu-dropdown-menu" role="menu" style="right:-20px;left:auto;">
         <li role="presentation">{{#link-to "about" classNames="gh-nav-menu-about dropdown-item js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-shop"></i> About Ghost{{/link-to}}</li>
         <li class="divider"></li>
         <li role="presentation">{{#link-to "team.user" session.user.slug classNames="dropdown-item user-menu-profile js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-user"></i> Your Profile{{/link-to}}</li>