TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Improving the members page on mobile

Browse Source 
no issue
This commit is contained in:
James Morris 2022-09-01 13:09:16 +01:00
parent 8b831a68e8
commit 4f8526fd77
10 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/gh-resource-select.hbs
View File

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

2
ghost/admin/app/components/members/filter.hbs
View File

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

5
ghost/admin/app/styles/components/filter-builder.css
View File

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

2
ghost/admin/app/styles/components/lists.css
View File

@ -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));
}
}

8
ghost/admin/app/styles/layouts/main.css
View File

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

13
ghost/admin/app/styles/layouts/members.css
View File

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

5
ghost/admin/app/styles/patterns/buttons.css
View File

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

2
ghost/admin/app/templates/member.hbs
View File

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

4
ghost/admin/app/templates/members.hbs
View File

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

2
ghost/admin/tests/acceptance/members-test.js
View File

@ -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) {