Improving the members page on mobile

no issue

ghost/admin/app/components/gh-resource-select.hbs

@@ -7,7 +7,7 @@
     @renderInPlace={{this.renderInPlace}}
     @onChange={{this.onChange}}
     @class="select-members"
-    @placeholder="Select a page or post"
+    @placeholder="Select a page/post"
     as |resource|
 >
     {{resource.name}}

ghost/admin/app/components/members/filter.hbs

@@ -13,7 +13,7 @@
         </span>
     </dd.Trigger>
 
-    <dd.Content class="gh-member-actions-menu gh-filter-builder gh-members-filter-builder {{if this.feature.memberAttribution 'feature-memberAttribution'}} dropdown-menu dropdown-triangle-top-right">
+    <dd.Content class="gh-member-actions-menu gh-filter-builder gh-members-filter-builder fade-in-scale {{if this.feature.memberAttribution 'feature-memberAttribution'}} dropdown-menu dropdown-triangle-top-right">
         <h3>Filter list</h3>
         <section class="gh-filters">
             {{#each this.filters as |filter index|}}

ghost/admin/app/styles/components/filter-builder.css

@@ -164,4 +164,9 @@
         grid-row: 1/2;
         grid-column: 2/3;
     }
+
+    .gh-filter-builder .gh-filters {
+        max-height: calc(75vh - 180px);
+        overflow-y: auto;
+    }
 }

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

@@ -515,6 +515,6 @@ ul.nostyle li {
 @media (max-width: 450px) {
     .gh-list-sticky,
     .gh-list-scrolling {
-        height: calc(100vh - 205px);
+        height: calc(100vh - 205px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
     }
 }

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

@@ -1490,6 +1490,14 @@
     }
 
     .gh-canvas-title span.gh-canvas-title-hide-for-mobile {
+        display: none !important;
+    }
+
+    .members-header .gh-btn .gh-btn-text-hide-for-mobile {
+        display: block !important;
+    }
+
+    .members-header .gh-btn.gh-btn.gh-btn-primary > span:first-of-type {
         display: none;
     }
 }

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

@@ -475,7 +475,7 @@ p.gh-members-list-email {
         width: 100%;
     }
 
-    .members-header .view-actions-secondary {
+    .members-header .members-actions-dropdown {
         display: none;
     }
 
@@ -2357,8 +2357,15 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 @media (max-width: 690px) {
-    .gh-members-filter-builder {
-        width: calc(100% - 100px);
+    .gh-members-filter-builder,
+    .gh-members-filter-builder.feature-memberAttribution {
+        width: calc(100vw - 20px);
+        min-width: calc(100vw - 20px);
+        max-width: calc(100vw - 20px);
+        left: 0 !important;
+        right: 0 !important;
+        margin-left: 10px;
+        margin-right: 10px;
     }
 }
 

ghost/admin/app/styles/patterns/buttons.css

@@ -809,3 +809,8 @@ Usage: CTA buttons grouped together horizontally.
     pointer-events: none;
     opacity: 0.5;
 }
+
+/* Conditional wording for mobile to save space */
+.gh-btn .gh-btn-text-hide-for-mobile {
+    display: none;
+}

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}}

ghost/admin/app/templates/members.hbs

@@ -33,7 +33,7 @@
                         @onLabelEdit={{this.editLabel}}
                         @parseFilterParamCounter={{this.parseFilterParamCounter}}
                     />
-                    <span class="dropdown">
+                    <span class="dropdown members-actions-dropdown">
                         <GhDropdownButton
                             @dropdownName="members-actions-menu"
                             @classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
@@ -96,7 +96,7 @@
                             {{/if}}
                         </GhDropdown>
                     </span>
-                    <LinkTo @route="member.new" class="gh-btn gh-btn-primary" data-test-new-member-button="true"><span>New member</span></LinkTo>
+                    <LinkTo @route="member.new" class="gh-btn gh-btn-primary" data-test-new-member-button="true"><span>New member</span><span class="gh-btn-text-hide-for-mobile">New</span></LinkTo>
                 </div>
             </section>
         {{/if}}

ghost/admin/tests/acceptance/members-test.js

@@ -119,7 +119,7 @@ describe('Acceptance: Members', function () {
             expect(currentURL(), 'new member URL').to.equal('/members/new');
             // it displays the new member form
             expect(find('.gh-canvas-header h2').textContent, 'settings pane title')
-                .to.contain('New member');
+                .to.contain('New');
 
             // all fields start blank
             findAll('.gh-member-settings-primary .gh-input').forEach(function (elem) {