mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 03:44:29 +03:00
c51bce7358
refs. https://github.com/TryGhost/Team/issues/205 Major update to Ghost Admin UI including: - improved general consistency (typography, colors and contrast, UI components, icons) - new design for post and pages lists, improved discoverability of filters - search moved to modal - account menu is decoupled from ghost logo - further usability fixes
62 lines
2.7 KiB
Handlebars
62 lines
2.7 KiB
Handlebars
<section class="gh-canvas">
|
|
<GhCanvasHeader class="gh-canvas-header">
|
|
<h2 class="gh-canvas-title" data-test-screen-title>Members</h2>
|
|
<div>
|
|
<GhTextInput placeholder="Search members..." @value={{this.searchText}}
|
|
@input={{action (mut this.searchText) value="target.value"}} />
|
|
</div>
|
|
</GhCanvasHeader>
|
|
|
|
<section class="view-container h-100">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="f-small fw5 midlightgrey ttu">
|
|
{{#if this.searchText}}
|
|
Search result
|
|
{{else}}
|
|
All members
|
|
{{#if this.fetchMembers.lastSuccessful}}
|
|
({{this.meta.pagination.total}})
|
|
{{else}}
|
|
(Loading...)
|
|
{{/if}}
|
|
{{/if}}
|
|
</h2>
|
|
</div>
|
|
|
|
{{#if this.filteredMembers}}
|
|
{{!-- members list, styles taken from .apps-grid --}}
|
|
<div class="flex flex-row flex-wrap items-start br3 mt2 mb10 bg-grouped-table shadow-1">
|
|
<VerticalCollection
|
|
@items={{this.filteredMembers}}
|
|
@key="id"
|
|
@containerSelector=".gh-main"
|
|
@estimateHeight=76
|
|
as |member index|
|
|
>
|
|
<div class="flex-grow-1 flex-shrink-1" style="flex-basis: 100%">
|
|
{{#link-to "member" member classNames="link whitegrey"}}
|
|
<article class="flex items-center justify-between pa4 pt3 pb3 {{if index "bt"}} highlight-whitegrey">
|
|
<div class="flex items-center">
|
|
<GhMemberAvatar @member={{member}} class="w9 h9 mr4" />
|
|
<div class="flex flex-column">
|
|
<h3 class="darkgrey ma0 f6 fw6">{{member.name}}</h3>
|
|
<p class="midgrey ma0 pa0 f7">{{member.email}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">{{svg-jar "arrow-right" class="w4 h4 fill-midlightgrey"}}</div>
|
|
</article>
|
|
{{/link-to}}
|
|
</div>
|
|
</VerticalCollection>
|
|
</div>
|
|
{{else}}
|
|
{{#if this.fetchMembers.isRunning}}
|
|
<div class="gh-content">
|
|
<GhLoadingSpinner />
|
|
</div>
|
|
{{else}}
|
|
<p class="mt2 pt10 bt b--whitegrey tc midlightgrey">No members found.</p>
|
|
{{/if}}
|
|
{{/if}}
|
|
</section>
|
|
</section> |