🎨 Improve admin styles on mobile (#903)

refs https://github.com/TryGhost/Ghost/issues/8744
- active styles for mobile nav bar
- extra padding in the editor
- fixed bugs in team listing screen
- improved layout in the "Invite a new user" modal
- fixed bugs in theme listing layout
- improved layout of "Import content" file selection/import button

ghost/admin/app/styles/layouts/apps.css

@@ -61,6 +61,13 @@
     transition: background 0.3s ease;
 }
 
+@media (max-width: 500px) {
+    .apps-card-app {
+        min-height: 75px;
+        height: auto;
+    }
+}
+
 .apps-grid-cell:first-child .apps-card-app {
     border-top: none;
 }
@@ -70,6 +77,12 @@
     align-items: center;
 }
 
+@media (max-width: 500px) {
+    .apps-card-left {
+        flex-basis: 70%;
+    }
+}
+
 .apps-card-right {
     display: flex;
     align-items: center;
@@ -118,6 +131,7 @@
 }
 @media (max-width: 500px) {
     .apps-card-meta {
+        flex-basis: 70%;
         padding-right: 20px;
     }
 }
@@ -133,6 +147,7 @@
 }
 @media (max-width: 500px) {
     .apps-card-app-title {
+        white-space: normal;
         font-size: 1.5rem;
     }
 }

ghost/admin/app/styles/layouts/editor.css

@@ -380,6 +380,13 @@
     padding: 10vw 4vw;
 }
 
+@media (max-width: 500px) {
+    .gh-markdown-editor-pane,
+    .gh-markdown-editor-preview {
+        padding: 15vw 4vw;
+    }
+}
+
 .gh-markdown-editor-side-by-side .gh-markdown-editor-pane,
 .gh-markdown-editor-side-by-side .gh-markdown-editor-preview {
     padding: 4vw;

ghost/admin/app/styles/layouts/main.css

@@ -252,6 +252,12 @@ body > .ember-view:not(.default-liquid-destination) {
     color:  color(var(--midgrey) l(+5%));
 }
 
+@media (max-width: 500px) {
+    .gh-nav-foot-sitelink {
+        height: 56px;
+    }
+}
+
 .gh-nav-foot-sitelink svg {
     width: 13px;
     margin-left: 5px;
@@ -482,6 +488,21 @@ body > .ember-view:not(.default-liquid-destination) {
         font-size: 1.2rem;
     }
 
+    .gh-mobile-nav-bar a.active {
+        background: color(var(--blue) lightness(+10%));
+        color: #fff;
+    }
+
+    .gh-mobile-nav-bar a.active svg {
+        fill: #fff;
+    }
+
+    .gh-mobile-nav-bar a.active.gh-nav-main-users g,
+    .gh-mobile-nav-bar a.active.gh-nav-main-users path {
+        fill: transparent;
+        stroke: white;
+    }
+
     .gh-mobile-nav-bar svg,
     .gh-mobile-nav-bar svg g {
         width: 15px;
@@ -549,6 +570,15 @@ body > .ember-view:not(.default-liquid-destination) {
     min-height: 35px;
 }
 
+@media (max-width: 500px) {
+    .gh-canvas-title {
+        display: block;
+    }
+    .gh-canvas-title svg {
+        margin: 0 5px;
+    }
+}
+
 .gh-canvas-title a {
     color: var(--darkgrey);
 }

ghost/admin/app/styles/layouts/settings.css

@@ -64,6 +64,12 @@
     max-width: 250px;
 }
 
+@media (max-width: 500px) {
+    .gh-setting-action-largeimg img {
+        max-width: 190px;
+    }
+}
+
 .gh-setting-action-smallimg img:hover,
 .gh-setting-action-largeimg img:hover {
     cursor: pointer;
@@ -294,8 +300,16 @@
     line-height: inherit;
 }
 
-@media (max-width: 400px) {
+@media (max-width: 500px) {
+    #importfile {
+        flex-direction: column;
+    }
+    #importfile input {
+        width: 150px;
+    }
+
     #startupload {
+        margin-left: 0;
         margin-top: 5px;
     }
 }
@@ -356,6 +370,15 @@
     border-top: var(--lightgrey) 1px solid;
 }
 
+@media (max-width: 500px) {
+    .gh-themes-container .apps-configured {
+        justify-content: flex-end;
+    }
+    .gh-themes-container .apps-card-meta {
+        flex-basis: auto;
+    }
+}
+
 .gh-themes-uploadbtn {
     margin-top: 25px;
 }

ghost/admin/app/styles/layouts/users.css

@@ -9,6 +9,31 @@
     text-transform: none;
 }
 
+@media (max-width: 500px) {
+    .gh-invited-users .apps-card-meta {
+        max-width: 165px;
+    }
+
+    .gh-invited-users .apps-card-app-title {
+        width: 200px;
+    }
+
+    .gh-invited-users .apps-card-app-desc {
+        max-height: none;
+        display: block;
+    }
+
+    .gh-invited-users .apps-configured {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+
+    .gh-invited-users .apps-configured a {
+        margin-bottom: 7px
+    }
+}
+
+
 .user-list-item-icon {
     flex-shrink: 0;
     display: flex;
@@ -128,12 +153,28 @@
     width: 60%;
 }
 
+@media (max-width: 500px) {
+    .invite-new-user .form-group:nth-of-type(1) {
+        float: none;
+        width: 100%;
+    }
+}
+
 .invite-new-user .form-group:nth-of-type(2) {
     float: left;
     margin-left: 10px;
     width: 35%;
 }
 
+@media (max-width: 500px) {
+    .invite-new-user .form-group:nth-of-type(2) {
+        float: none;
+        margin-top: 10px;
+        margin-left: 0;
+        width: 100%;
+    }
+}
+
 .invite-new-user .form-group input {
     width: 100%;
 }