Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Refined members list and detail design

Browse source
This commit is contained in:
Zimo 2019-02-23 16:31:18 +07:00
parent 57092b2821
commit 46124ed6ee
3 changed files with 27 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/gh-member-avatar.js
View file

@ -21,7 +21,7 @@ export default Component.extend({
backgroundStyle: computed('member.name', function () { backgroundStyle: computed('member.name', function () {
let name = this.member.name; let name = this.member.name;
if (name) { if (name) {
let color = stringToHslColor(name, 54, 55); let color = stringToHslColor(name, 55, 55);
return htmlSafe(`background-color: ${color}`); return htmlSafe(`background-color: ${color}`);
} }
}), }),

22
ghost/admin/app/templates/member.hbs
View file

@ -8,12 +8,7 @@
</header> </header>
<section class="view-container"> <section class="view-container">
<div class="pt1"> <div class="flex flex-row nl2 mt10">
<h2 class="f7 fw4 midgrey">Overview</h2>
</div>
<div class="flex flex-column mb10 ba br3 b--whitegrey">
<div class="flex flex-row pa5">
<GhMemberAvatar class="w20 h20 mr4" @initialsClass="f-subheadline" @member={{member}} /> <GhMemberAvatar class="w20 h20 mr4" @initialsClass="f-subheadline" @member={{member}} />
<div class="flex flex-column justify-center"> <div class="flex flex-column justify-center">
<h3 class="ma0 pa0">{{member.name}}</h3> <h3 class="ma0 pa0">{{member.name}}</h3>
@ -25,7 +20,11 @@
</div> </div>
</div> </div>
<div class="flex flex-row bt b--whitegrey bg-whitegrey-l2"> <div class="pt1 mt10">
<h2 class="f7 fw4 midgrey">Overview</h2>
</div>
<div class="flex flex-row ba b--whitegrey br4 bg-whitegrey-l2 mt2">
<div class="flex flex-column flex-grow-1 pa5 br b--whitegrey"> <div class="flex flex-column flex-grow-1 pa5 br b--whitegrey">
<span class="db ttu f8 midlightgrey">Member since</span> <span class="db ttu f8 midlightgrey">Member since</span>
<span class="db f5">{{moment-format member.createdAt "MMMM Do"}}</span> <span class="db f5">{{moment-format member.createdAt "MMMM Do"}}</span>
@ -33,16 +32,15 @@
</div> </div>
<div class="flex flex-column flex-grow-1 pa5"> <div class="flex flex-column flex-grow-1 pa5">
<span class="db ttu f8 midlightgrey">Current plan</span> <span class="db ttu f8 midlightgrey">Current plan</span>
<span class="db f5">-</span> <span class="db f5">Monthly</span>
<span class="db f8 midlightgrey"></span> <span class="db f8 midlightgrey">6 USD/month</span>
</div>
</div> </div>
</div> </div>
<h2 class="pb1 bb b--whitegrey f7 fw4 midgrey">Danger zone</h2> <h2 class="pb1 bb b--whitegrey f7 fw4 midgrey mt10 pb2">Danger zone</h2>
<button <button
type="button" type="button"
class="gh-btn gh-btn-red gh-btn-icon" class="gh-btn gh-btn-red gh-btn-icon mt3"
{{action (toggle "showDeleteMemberModal" this)}} {{action (toggle "showDeleteMemberModal" this)}}
data-test-button="delete-member" data-test-button="delete-member"
> >

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

@ -10,14 +10,14 @@
{{#if this.fetchMembers.lastSuccessful}} {{#if this.fetchMembers.lastSuccessful}}
({{this.meta.pagination.total}}) ({{this.meta.pagination.total}})
{{else}} {{else}}
(...) (Loading...)
{{/if}} {{/if}}
</h2> </h2>
</div> </div>
{{#if this.members}} {{#if this.members}}
{{!-- members list, styles taken from .apps-grid --}} {{!-- members list, styles taken from .apps-grid --}}
<div class="flex flex-row flex-wrap items-start ba br3 b--whitegrey mt1"> <div class="flex flex-row flex-wrap items-start ba br3 b--whitegrey mt2 mb10">
<VerticalCollection <VerticalCollection
@items={{this.members}} @items={{this.members}}
@key="id" @key="id"