From 4f8526fd77a23fd93c8e3f4df6ce1d1c012a20d4 Mon Sep 17 00:00:00 2001 From: James Morris Date: Thu, 1 Sep 2022 13:09:16 +0100 Subject: [PATCH] Improving the members page on mobile no issue --- ghost/admin/app/components/gh-resource-select.hbs | 2 +- ghost/admin/app/components/members/filter.hbs | 2 +- .../admin/app/styles/components/filter-builder.css | 5 +++++ ghost/admin/app/styles/components/lists.css | 2 +- ghost/admin/app/styles/layouts/main.css | 8 ++++++++ ghost/admin/app/styles/layouts/members.css | 13 ++++++++++--- ghost/admin/app/styles/patterns/buttons.css | 5 +++++ ghost/admin/app/templates/member.hbs | 2 +- ghost/admin/app/templates/members.hbs | 4 ++-- ghost/admin/tests/acceptance/members-test.js | 2 +- 10 files changed, 35 insertions(+), 10 deletions(-) diff --git a/ghost/admin/app/components/gh-resource-select.hbs b/ghost/admin/app/components/gh-resource-select.hbs index d242171bbf..bacb568125 100644 --- a/ghost/admin/app/components/gh-resource-select.hbs +++ b/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}} diff --git a/ghost/admin/app/components/members/filter.hbs b/ghost/admin/app/components/members/filter.hbs index 5371f924fe..54b150db56 100644 --- a/ghost/admin/app/components/members/filter.hbs +++ b/ghost/admin/app/components/members/filter.hbs @@ -13,7 +13,7 @@ - +

Filter list

{{#each this.filters as |filter index|}} diff --git a/ghost/admin/app/styles/components/filter-builder.css b/ghost/admin/app/styles/components/filter-builder.css index 6fbdb1ccc9..8ae18ca807 100644 --- a/ghost/admin/app/styles/components/filter-builder.css +++ b/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; + } } diff --git a/ghost/admin/app/styles/components/lists.css b/ghost/admin/app/styles/components/lists.css index 71a898a7da..b0375ebfe0 100644 --- a/ghost/admin/app/styles/components/lists.css +++ b/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)); } } \ 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 af035dbf78..d4237a7aec 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/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; } } diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index dfb05fdbb9..d9e18268fb 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/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; } } diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css index a858ba68a6..89b7cfcf5b 100644 --- a/ghost/admin/app/styles/patterns/buttons.css +++ b/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; +} \ 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 @@ Members {{svg-jar "arrow-right"}} {{#if this.member.isNew}} - New member + New member {{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 cbda0796e4..7d821b1165 100644 --- a/ghost/admin/app/templates/members.hbs +++ b/ghost/admin/app/templates/members.hbs @@ -33,7 +33,7 @@ @onLabelEdit={{this.editLabel}} @parseFilterParamCounter={{this.parseFilterParamCounter}} /> - + - New member + New memberNew
{{/if}} diff --git a/ghost/admin/tests/acceptance/members-test.js b/ghost/admin/tests/acceptance/members-test.js index ec2c53ae00..d3ceca0183 100644 --- a/ghost/admin/tests/acceptance/members-test.js +++ b/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) {