From d5bf2027dcd4ced54179b6af84d7a39739b8ef04 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Wed, 31 Aug 2022 14:48:00 +0100
Subject: [PATCH] Improved the members table on mobile

no issue
---
 ghost/admin/app/styles/components/lists.css |  14 +-
 ghost/admin/app/styles/layouts/main.css     |   9 ++
 ghost/admin/app/styles/layouts/members.css  |  40 +++++-
 ghost/admin/app/templates/member.hbs        |   2 +-
 ghost/admin/app/templates/members.hbs       | 148 ++++++++++----------
 5 files changed, 129 insertions(+), 84 deletions(-)

diff --git a/ghost/admin/app/styles/components/lists.css b/ghost/admin/app/styles/components/lists.css
index 1456d767a1..71a898a7da 100644
--- a/ghost/admin/app/styles/components/lists.css
+++ b/ghost/admin/app/styles/components/lists.css
@@ -492,6 +492,14 @@ ul.nostyle li {
     background: var(--whitegrey-l2);
 }
 
+@media (min-width: 1450px) {
+    .gh-list-sticky,
+    .gh-list-scrolling {
+        height: calc(100vh - 96px);
+    }
+}
+
+
 @media (max-width: 800px) {
     .gh-list-sticky,
     .gh-list-scrolling {
@@ -504,9 +512,9 @@ ul.nostyle li {
     }
 }
 
-@media (min-width: 1450px) {
+@media (max-width: 450px) {
     .gh-list-sticky,
     .gh-list-scrolling {
-        height: calc(100vh - 96px);
+        height: calc(100vh - 205px);
     }
-}
+}
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index b58f977471..af035dbf78 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -1488,6 +1488,10 @@
     .gh-canvas-title svg {
         margin: 0 5px;
     }
+
+    .gh-canvas-title span.gh-canvas-title-hide-for-mobile {
+        display: none;
+    }
 }
 
 
@@ -1554,6 +1558,11 @@
     align-items: center;
 }
 
+.view-actions-secondary {
+    display: flex;
+    align-items: center;
+}
+
 .view-container,
 .view-content {
     position: relative;
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 2b47833bc2..dfb05fdbb9 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -402,7 +402,6 @@ p.gh-members-list-email {
 
     .gh-list h3.gh-members-name-noname {
         overflow: hidden;
-        margin-top: -14px;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
@@ -458,14 +457,17 @@ p.gh-members-list-email {
         min-height: 120px;
     }
 
-    .gh-canvas-header.break.tablet .gh-canvas-header-content {
-        height: 160px;
+    .members-header.gh-canvas-header.break.tablet .gh-canvas-header-content {
+        height: 140px;
     }
 
-    .members-header .gh-canvas-title {
-        position: absolute;
-        top: 29px;
-        left: 21px;
+    .members-header.gh-canvas-header.break.tablet .view-actions {
+        top: 0;
+    }
+
+    .members-header.gh-canvas-header.break.tablet .view-actions-bottom-row {
+        width: 100% !important;
+        max-width: 100% !important;
     }
 
     .members-header .view-actions {
@@ -473,6 +475,10 @@ p.gh-members-list-email {
         width: 100%;
     }
 
+    .members-header .view-actions-secondary {
+        display: none;
+    }
+
     .members-header .view-actions .gh-members-header-search {
         width: 100%;
     }
@@ -2355,3 +2361,23 @@ p.gh-members-import-errordetail:first-of-type {
         width: calc(100% - 100px);
     }
 }
+
+@media (max-width: 800px) {
+    .members-header {
+        left: 0;
+    }
+
+    .members-header .gh-canvas-title {
+        left: 25px;
+    }
+}
+
+@media (max-width: 430px) {
+    .members-header .view-actions .gh-contentfilter {
+        border-right: 1px solid var(--whitegrey-d1);
+    }
+
+    .gh-contentfilter-menu:last-of-type {
+        padding-right: 8px;
+    }
+}
\ No newline at end of file
diff --git a/ghost/admin/app/templates/member.hbs b/ghost/admin/app/templates/member.hbs
index dbba61b562..12b6f5b6e1 100644
--- a/ghost/admin/app/templates/member.hbs
+++ b/ghost/admin/app/templates/member.hbs
@@ -4,7 +4,7 @@
             <LinkTo @route="members" data-test-link="members-back">Members</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             {{#if this.member.isNew}}
-                New member
+                New<span class="gh-canvas-title-hide-for-mobile">&nbsp;member</span>
             {{else}}
                 {{or this.member.name this.member.email}}
             {{/if}}
diff --git a/ghost/admin/app/templates/members.hbs b/ghost/admin/app/templates/members.hbs
index 550ee63d76..29c57e7ec0 100644
--- a/ghost/admin/app/templates/members.hbs
+++ b/ghost/admin/app/templates/members.hbs
@@ -22,80 +22,82 @@
                 </div>
 
                 <div class="view-actions-top-row">
-                    <Members::Filter
-                        @isFiltered={{this.isFiltered}}
-                        @onApplyFilter={{this.applyFilter}}
-                        @defaultFilterParam={{this.filterParam}}
-                        @onApplySoftFilter={{this.applySoftFilter}}
-                        @onApplyParsedFilter={{this.applyParsedFilter}}
-                        @onResetSoftFilter={{this.resetSoftFilter}}
-                        @onResetFilter={{this.resetFilter}}
-                        @onLabelEdit={{this.editLabel}}
-                        @parseFilterParamCounter={{this.parseFilterParamCounter}}
-                    />
-                    <span class="dropdown">
-                        <GhDropdownButton
-                            @dropdownName="members-actions-menu"
-                            @classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
-                            @title="Members Actions"
-                            data-test-button="members-actions"
-                        >
-                            <span>
-                                {{svg-jar "settings"}}
-                                <span class="hidden">Actions</span>
-                            </span>
-                        </GhDropdownButton>
-                        <GhDropdown
-                            @name="members-actions-menu"
-                            @tagName="ul"
-                            @classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right"
-                        >
-                            <li>
-                                <LinkTo @route="members.import" class="mr2" data-test-link="import-csv">
-                                    <span>Import members</span>
-                                </LinkTo>
-                            </li>
-                            <li class="{{if this.members.length "" "disabled"}}">
-                                {{#if this.members.length}}
-                                    <button class="mr2" type="button" {{on "click" this.exportData}} data-test-button="export-members">
-                                        {{#if this.showingAll}}
-                                            <span>Export all members</span>
-                                        {{else}}
-                                            <span>Export selected members ({{this.members.length}})</span>
-                                        {{/if}}
-                                    </button>
-                                {{else}}
-                                    <button class="mr2" disabled="true" type="button" data-test-button="export-members">
-                                        <span>Export selected members (0)</span>
-                                    </button>
+                    <div class="view-actions-secondary">
+                        <Members::Filter
+                            @isFiltered={{this.isFiltered}}
+                            @onApplyFilter={{this.applyFilter}}
+                            @defaultFilterParam={{this.filterParam}}
+                            @onApplySoftFilter={{this.applySoftFilter}}
+                            @onApplyParsedFilter={{this.applyParsedFilter}}
+                            @onResetSoftFilter={{this.resetSoftFilter}}
+                            @onResetFilter={{this.resetFilter}}
+                            @onLabelEdit={{this.editLabel}}
+                            @parseFilterParamCounter={{this.parseFilterParamCounter}}
+                        />
+                        <span class="dropdown">
+                            <GhDropdownButton
+                                @dropdownName="members-actions-menu"
+                                @classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
+                                @title="Members Actions"
+                                data-test-button="members-actions"
+                            >
+                                <span>
+                                    {{svg-jar "settings"}}
+                                    <span class="hidden">Actions</span>
+                                </span>
+                            </GhDropdownButton>
+                            <GhDropdown
+                                @name="members-actions-menu"
+                                @tagName="ul"
+                                @classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right"
+                            >
+                                <li>
+                                    <LinkTo @route="members.import" class="mr2" data-test-link="import-csv">
+                                        <span>Import members</span>
+                                    </LinkTo>
+                                </li>
+                                <li class="{{if this.members.length "" "disabled"}}">
+                                    {{#if this.members.length}}
+                                        <button class="mr2" type="button" {{on "click" this.exportData}} data-test-button="export-members">
+                                            {{#if this.showingAll}}
+                                                <span>Export all members</span>
+                                            {{else}}
+                                                <span>Export selected members ({{this.members.length}})</span>
+                                            {{/if}}
+                                        </button>
+                                    {{else}}
+                                        <button class="mr2" disabled="true" type="button" data-test-button="export-members">
+                                            <span>Export selected members (0)</span>
+                                        </button>
+                                    {{/if}}
+                                </li>
+                                {{#if (and this.members.length this.isFiltered)}}
+                                    <li class="divider"></li>
+                                    <li>
+                                        <button class="mr2" data-test-button="add-label-selected" type="button" {{on "click" this.bulkAddLabel}}>
+                                            <span>Add label for selected members ({{this.members.length}})</span>
+                                        </button>
+                                    </li>
+                                    <li>
+                                        <button class="mr2" data-test-button="remove-label-selected" type="button" {{on "click" this.bulkRemoveLabel}}>
+                                            <span>Remove label from selected members ({{this.members.length}})</span>
+                                        </button>
+                                    </li>
+                                    <li>
+                                        <button class="mr2" data-test-button="unsubscribe-selected" type="button" {{on "click" this.bulkUnsubscribe}}>
+                                            <span>Unsubscribe selected members ({{this.members.length}})</span>
+                                        </button>
+                                    </li>
+                                    <li class="divider"></li>
+                                    <li>
+                                        <button class="mr2" data-test-button="delete-selected" type="button" {{on "click" this.bulkDelete}}>
+                                            <span class="red">Delete selected members ({{this.members.length}})</span>
+                                        </button>
+                                    </li>
                                 {{/if}}
-                            </li>
-                            {{#if (and this.members.length this.isFiltered)}}
-                                <li class="divider"></li>
-                                <li>
-                                    <button class="mr2" data-test-button="add-label-selected" type="button" {{on "click" this.bulkAddLabel}}>
-                                        <span>Add label for selected members ({{this.members.length}})</span>
-                                    </button>
-                                </li>
-                                <li>
-                                    <button class="mr2" data-test-button="remove-label-selected" type="button" {{on "click" this.bulkRemoveLabel}}>
-                                        <span>Remove label from selected members ({{this.members.length}})</span>
-                                    </button>
-                                </li>
-                                <li>
-                                    <button class="mr2" data-test-button="unsubscribe-selected" type="button" {{on "click" this.bulkUnsubscribe}}>
-                                        <span>Unsubscribe selected members ({{this.members.length}})</span>
-                                    </button>
-                                </li>
-                                <li class="divider"></li>
-                                <li>
-                                    <button class="mr2" data-test-button="delete-selected" type="button" {{on "click" this.bulkDelete}}>
-                                        <span class="red">Delete selected members ({{this.members.length}})</span>
-                                    </button>
-                                </li>
-                            {{/if}}
-                        </GhDropdown>
-                    </span>
+                            </GhDropdown>
+                        </span>
+                    </div>
                     <LinkTo @route="member.new" class="gh-btn gh-btn-primary" data-test-new-member-button="true"><span>New member</span></LinkTo>
                 </div>
             </section>