Ghost/ghost/admin/app/templates/members.hbs
Peter Zimon c51bce7358 🎨 Updated admin area design and usability (#1232)
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
2019-06-18 11:47:20 +01:00

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>