Responsive UI fixes

ghost/admin/app/components/gh-contentfilter.hbs

@@ -1,4 +1,4 @@
-<div class="gh-contentfilter" ...attributes>
+<div class="gh-contentfilter view-actions-bottom-row" ...attributes>
     {{#unless @currentUser.isContributor}}
         <div class="gh-contentfilter-menu gh-contentfilter-type {{if @selectedType.value "gh-contentfilter-selected"}}" data-test-type-select="true">
             <PowerSelect

ghost/admin/app/components/gh-mobile-nav-bar.hbs

@@ -1,9 +1,9 @@
-<LinkTo @route="editor.new" @model="post" data-test-mobile-nav="new-post">{{svg-jar "pen"}}New post</LinkTo>
+<LinkTo @route="dashboard" data-test-mobile-nav="dashboard">{{svg-jar "house"}}Dashboard</LinkTo>
 {{#if (eq this.router.currentRouteName "posts")}}
-    <LinkTo @route="posts" @query={{hash type=null}} @classNames="active" data-test-mobile-nav="posts">{{svg-jar "content"}}Posts</LinkTo>
+    <LinkTo @route="posts" @query={{hash type=null}} @classNames="active" data-test-mobile-nav="posts">{{svg-jar "posts"}}Posts</LinkTo>
 {{else}}
     <LinkTo @route="posts">{{svg-jar "content" data-test-mobile-nav="posts"}}Posts</LinkTo>
 {{/if}}
-<LinkTo @route="staff" @classNames="gh-nav-main-users" data-test-mobile-nav="staff">{{svg-jar "account-group"}}Staff</LinkTo>
+<LinkTo @route="members" @classNames="gh-nav-main-users" data-test-mobile-nav="members">{{svg-jar "members"}}Members</LinkTo>
 <div role="button" class="gh-mobile-nav-bar-more" {{action "openMobileMenu" target=this.ui data-test-mobile-nav="more"}}>{{svg-jar "icon" class="icon-gh"}}More</div>
 {{yield}}

ghost/admin/app/styles/components/lists.css

@@ -156,6 +156,10 @@ ul.nostyle li {
 /* --------------------------------------------------- */
 
 @media (max-width: 1000px) {
+    .gh-list {
+        border-bottom: none;
+    }
+    
     .gh-list-header {
         display: none;
     }

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

@@ -51,14 +51,15 @@
     font-weight: 400;
     color: var(--darkgrey);
     letter-spacing: 0.2px;
-    height: 33px;
+    height: 34px;
-    padding: 5px 12px 6px;
+    padding: 6px 12px 6px;
     margin-right: 8px;
     outline: none;
     border: none;
     border-radius: 2px !important;
     white-space: nowrap;
     transition: all 0.25s ease;
+    overflow: hidden;
 }
 
 .gh-contentfilter-menu-trigger:hover {
@@ -314,7 +315,7 @@
     .gh-posts-list-item {
         display: flex;
         flex-wrap: wrap;
-        border-bottom: 1px solid var(--lightgrey);
+        border-bottom: 1px solid var(--whitegrey);
         margin: 0;
     }
 
@@ -354,7 +355,7 @@
     .gh-post-list-opens {
         display: inline-block;
         border: none;
-        padding: 0 4px 20px 28px;
+        padding: 0 4px 20px 0;
         font-size: 1.3rem;
         max-width: 140px;
         white-space: nowrap;
@@ -414,32 +415,6 @@
     .gh-content-email-stats-mobile {
         display: inherit;
     }
-
-    .post-header {
-        justify-content: flex-end;
-        min-height: 120px;
-    }
-
-    .post-header .gh-canvas-title {
-        position: absolute;
-        top: 29px;
-        left: 21px;
-    }
-
-    .post-header .view-actions {
-        flex-direction: column;
-        align-items: flex-end;
-        margin-top: 18px;
-        overflow-y: hidden;
-    }
-
-    .post-header .view-actions .gh-contentfilter {
-        order: 2;
-        margin: 10px 0 -20px;
-        padding: 6px 2px 26px 22px;
-        max-width: calc(100vw - 10px);
-        overflow-x: auto;
-    }
 }
 
 @media (max-width: 800px) {

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

@@ -740,6 +740,15 @@
     stroke-width: 2.0px;
 }
 
+/* Tablet/mid sizes
+/* ---------------------------------------------------------- */
+
+@media (max-width: 1240px) {
+    .gh-nav {
+        flex-basis: 280px;
+    }
+}
+
 /* Mobile Nav Menu (Slides out)
 /* ---------------------------------------------------------- */
 
@@ -773,18 +782,25 @@
         position: absolute;
         top: 0;
         left: 0;
-        width: 205px;
+        width: 260px;
         height: 100%;
         background: var(--white);
         transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
-        transform: translate3d(-205px, 0px, 0px);
+        transform: translate3d(-260px, 0px, 0px);
     }
     .mobile-menu-expanded .gh-nav {
         transform: translate3d(0,0,0);
     }
 
+    .mobile-menu-expanded .content-cover {
+        width: calc(100vw - 260px);
+        cursor: pointer;
+        transform: translate3d(260px, 0, 0);
+    }
+
     .gh-nav-list .active {
-        background: color-mod(var(--lightgrey) l(+2%) s(-10%));
+        background: var(--black);
+        color: var(--white);
     }
 }
 
@@ -883,7 +899,7 @@
     }
 
     .gh-mobile-nav-bar a.active {
-        background: var(--blue);
+        background: var(--black);
         color: #fff;
     }
 
@@ -1432,6 +1448,136 @@
     stroke: var(--whitegrey);
 }
 
+/* View action mobile sizes */
+/* -------------------------------------------------------------------------------- */
+.view-actions-top-row {
+    display: flex;
+    align-items: center;
+}
+
+.view-actions-bottom-row {
+    display: flex;
+    align-items: center;
+}
+
+@media (max-width: 1200px) {
+    .gh-canvas-header.break.tablet .gh-canvas-header-content {
+        border-bottom: 1px solid var(--main-color-area-divider);
+    }
+
+    .gh-canvas-header.break.tablet .gh-canvas-header-content {
+        height: 128px;
+        border-bottom: 1px solid var(--main-color-area-divider);
+        align-items: flex-start;
+    }
+
+    .gh-canvas-header.break.tablet .gh-canvas-title {
+        margin-top: 28px;
+    }
+
+    .gh-canvas-header.break.tablet .view-actions {
+        position: absolute;
+        top: 30px;
+        right: 0;
+        flex-direction: column;
+        align-items: flex-end;
+        overflow: hidden;
+        width: 100%;
+        max-height: 100px;
+    }
+
+    .gh-canvas-header.break.tablet .view-actions-bottom-row {
+        position: relative;
+        order: 2;
+        margin: 0;
+        padding: 24px 0 40px;
+        max-width: calc(100vw - 390px);
+        overflow-x: scroll;
+        overflow-y: hidden;
+        justify-content: space-between;
+    }
+
+    .gh-canvas-header.break.tablet .view-actions:before {
+        position: absolute;
+        content: "";
+        display: block;
+        top: 50px;
+        right: 0;
+        width: 1px;
+        height: 34px;
+        background: var(--whitegrey);
+        z-index: 999;
+    }
+
+    .view-actions-top-row {
+        margin-bottom: 16px;
+    }
+
+    .view-actions-bottom-row {
+        justify-content: flex-end;
+        order: 2;
+    }
+
+    .view-actions-top-row > *:last-child,
+    .view-actions-bottom-row > *:last-child {
+        margin-right: 0 !important;
+    }
+}
+
+@media (max-width: 1000px) {
+    .gh-canvas-title svg {
+        margin: 0 5px;
+    }
+
+    .gh-canvas-header.break.mobile .gh-canvas-header-content {
+        border-bottom: 1px solid var(--main-color-area-divider);
+    }
+
+    .gh-canvas-header.break.mobile .gh-canvas-header-content {
+        height: 128px;
+        border-bottom: 1px solid var(--main-color-area-divider);
+        align-items: flex-start;
+    }
+
+    .gh-canvas-header.break.mobile .gh-canvas-title {
+        margin-top: 28px;
+    }
+
+    .gh-canvas-header.break.mobile .view-actions {
+        position: absolute;
+        top: 30px;
+        right: 0;
+        flex-direction: column;
+        align-items: flex-end;
+        overflow: hidden;
+        width: 100%;
+        max-height: 100px;
+    }
+
+    .gh-canvas-header.break.mobile .view-actions-bottom-row {
+        position: relative;
+        order: 2;
+        margin: 0;
+        padding: 24px 0 40px;
+        max-width: calc(100vw - 390px);
+        overflow-x: scroll;
+        overflow-y: hidden;
+        justify-content: space-between;
+    }
+
+    .gh-canvas-header.break.mobile .view-actions:before {
+        position: absolute;
+        content: "";
+        display: block;
+        top: 50px;
+        right: 0;
+        width: 1px;
+        height: 34px;
+        background: var(--whitegrey);
+        z-index: 999;
+    }
+}
+
 @media (max-width: 400px) {
     .view-header {
         padding: 0 7px;
@@ -1453,6 +1599,22 @@
     .gh-canvas {
         padding: 0 4vw 4vw;
     }
+
+    .gh-canvas-header.break .view-actions-bottom-row {
+        max-width: calc(100vw - 56px) !important;
+    }
+
+    .gh-canvas-header.break .view-actions:before {
+        position: absolute;
+        content: "";
+        display: block;
+        top: 50px;
+        right: 0;
+        bottom: 5px;
+        width: 1px;
+        background: var(--whitegrey);
+        z-index: 999;
+    }
 }
 
 section.gh-ds ul {

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

@@ -303,6 +303,13 @@ p.gh-members-list-email {
     margin-top: var(--main-layout-section-vpadding);
 }
 
+@media  (min-width: 1200px) and (max-width: 1370px) {
+    .members-header .view-actions input.gh-members-list-searchfield {
+        max-width: 130px;
+        min-width: unset;
+    }
+}
+
 @media (max-width: 1100px) {
     .gh-members-chart-summary-data {
         font-size: 2.8rem;

ghost/admin/app/templates/members.hbs

@@ -1,63 +1,67 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header members-header">
+    <GhCanvasHeader class="gh-canvas-header break tablet members-header">
         <h2 class="gh-canvas-title" data-test-screen-title>Members</h2>
         <section class="view-actions">
-            <GhMembersFilter
+            <div class="view-actions-bottom-row">
-                @selectedLabel={{this.selectedLabel}}
+                <GhMembersFilter
-                @availableLabels={{this.availableLabels}}
+                    @selectedLabel={{this.selectedLabel}}
-                @onLabelChange={{this.changeLabel}}
+                    @availableLabels={{this.availableLabels}}
-                @onLabelAdd={{this.addLabel}}
+                    @onLabelChange={{this.changeLabel}}
-                @onLabelEdit={{this.editLabel}}
+                    @onLabelAdd={{this.addLabel}}
-                @selectedPaidParam={{this.selectedPaidParam}}
+                    @onLabelEdit={{this.editLabel}}
-                @availablePaidParams={{this.paidParams}}
+                    @selectedPaidParam={{this.selectedPaidParam}}
-                @onPaidParamChange={{this.changePaidParam}}
+                    @availablePaidParams={{this.paidParams}}
-                @availableOrders={{this.availableOrders}}
+                    @onPaidParamChange={{this.changePaidParam}}
-                @selectedOrder={{this.selectedOrder}}
+                    @availableOrders={{this.availableOrders}}
-                @onOrderChange={{this.changeOrder}}
+                    @selectedOrder={{this.selectedOrder}}
-            />
+                    @onOrderChange={{this.changeOrder}}
-            <div class="relative gh-members-header-search">
+                />
-                {{svg-jar "search" class="gh-input-search-icon"}}
+                <div class="relative gh-members-header-search">
-                <GhTextInput
+                    {{svg-jar "search" class="gh-input-search-icon"}}
-                    placeholder="Search members..."
+                    <GhTextInput
-                    @value={{this.searchText}}
+                        placeholder="Search members..."
-                    @input={{this.search}}
+                        @value={{this.searchText}}
-                    class="gh-members-list-searchfield {{if this.searchText "active"}}" />
+                        @input={{this.search}}
+                        class="gh-members-list-searchfield {{if this.searchText "active"}}" />
+                </div>
             </div>
 
-            <span class="dropdown">
+            <div class="view-actions-top-row">
-                <GhDropdownButton @dropdownName="members-actions-menu"
+                <span class="dropdown">
-                    @classNames="gh-btn gh-btn-icon only-has-icon gh-actions-cog" @title="Members Actions"
+                    <GhDropdownButton @dropdownName="members-actions-menu"
-                    @data-test-user-actions="true">
+                        @classNames="gh-btn gh-btn-icon only-has-icon gh-actions-cog" @title="Members Actions"
-                    <span>
+                        @data-test-user-actions="true">
-                        {{svg-jar "settings"}}
+                        <span>
-                        <span class="hidden">Actions</span>
+                            {{svg-jar "settings"}}
-                    </span>
+                            <span class="hidden">Actions</span>
-                </GhDropdownButton>
+                        </span>
-                <GhDropdown @name="members-actions-menu" @tagName="ul"
+                    </GhDropdownButton>
-                    @classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right">
+                    <GhDropdown @name="members-actions-menu" @tagName="ul"
-                    <li>
+                        @classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right">
-                        <LinkTo @route="members.import" class="mr2" data-test-link="import-csv">
+                        <li>
-                            <span>Import members</span>
+                            <LinkTo @route="members.import" class="mr2" data-test-link="import-csv">
-                        </LinkTo>
+                                <span>Import members</span>
-                    </li>
+                            </LinkTo>
-                    <li class="{{if this.members.length "" "disabled"}}">
+                        </li>
-                        {{#if this.members.length}}
+                        <li class="{{if this.members.length "" "disabled"}}">
-                            <button class="mr2" {{on "click" this.exportData}}>
+                            {{#if this.members.length}}
-                                {{#if this.showingAll}}
+                                <button class="mr2" {{on "click" this.exportData}}>
-                                    <span>Export all members</span>
+                                    {{#if this.showingAll}}
-                                {{else}}
+                                        <span>Export all members</span>
-                                <span>Export selected members ({{this.members.length}})</span>
+                                    {{else}}
-                                {{/if}}
+                                    <span>Export selected members ({{this.members.length}})</span>
-                            </button>
+                                    {{/if}}
-                        {{else}}
+                                </button>
-                            <button class="mr2" disabled="true">
+                            {{else}}
-                                <span>Export selected members (0)</span>
+                                <button class="mr2" disabled="true">
-                            </button>
+                                    <span>Export selected members (0)</span>
-                        {{/if}}
+                                </button>
-                    </li>
+                            {{/if}}
-                </GhDropdown>
+                        </li>
-            </span>
+                    </GhDropdown>
-            <LinkTo @route="member.new" class="gh-btn gh-btn-primary" data-test-new-member-button="true"><span>New member</span></LinkTo>
+                </span>
+                <LinkTo @route="member.new" class="gh-btn gh-btn-primary" data-test-new-member-button="true"><span>New member</span></LinkTo>
+            </div>
         </section>
     </GhCanvasHeader>
 

ghost/admin/app/templates/pages.hbs

@@ -1,5 +1,5 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header post-header">
+    <GhCanvasHeader class="gh-canvas-header break tablet post-header">
         <GhCustomViewTitle @title="Pages" @query={{reset-query-params "posts"}} />
 
         <section class="view-actions">
@@ -22,7 +22,7 @@
                 @onOrderChange={{action "changeOrder"}}
             />
 
-            <LinkTo @route="editor.new" @model="page" class="gh-btn gh-btn-primary" data-test-new-page-button={{true}}><span>New page</span></LinkTo>
+            <LinkTo @route="editor.new" @model="page" class="gh-btn gh-btn-primary view-actions-top-row" data-test-new-page-button={{true}}><span>New page</span></LinkTo>
         </section>
     </GhCanvasHeader>
 

ghost/admin/app/templates/posts.hbs

@@ -1,5 +1,5 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header post-header">
+    <GhCanvasHeader class="gh-canvas-header break tablet post-header">
         <GhCustomViewTitle @title="Posts" @query={{reset-query-params "posts"}} />
 
         <section class="view-actions">
@@ -22,7 +22,7 @@
                 @onOrderChange={{action "changeOrder"}}
             />
 
-            <LinkTo @route="editor.new" @model="post" class="gh-btn gh-btn-primary" data-test-new-post-button={{true}}><span>New post</span></LinkTo>
+            <LinkTo @route="editor.new" @model="post" class="gh-btn gh-btn-primary view-actions-top-row" data-test-new-post-button={{true}}><span>New post</span></LinkTo>
         </section>
     </GhCanvasHeader>