mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
Improved the members table on mobile
no issue
This commit is contained in:
James Morris
parent
c2b399fc2c
commit
d5bf2027dc
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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"> member</span>
|
||||
{{else}}
|
||||
{{or this.member.name this.member.email}}
|
||||
{{/if}}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user