TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki 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 () {
let name = this.member.name;
if (name) {
let color = stringToHslColor(name, 54, 55);
let color = stringToHslColor(name, 55, 55);
return htmlSafe(`background-color: ${color}`);
}
}),

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

@ -8,41 +8,39 @@
</header>
<section class="view-container">
<div class="pt1">
<div class="flex flex-row nl2 mt10">
<GhMemberAvatar class="w20 h20 mr4" @initialsClass="f-subheadline" @member={{member}} />
<div class="flex flex-column justify-center">
<h3 class="ma0 pa0">{{member.name}}</h3>
<span class="db">
<a class="midlightgrey" href="mailto:{{member.email}}">
{{member.email}}
</a>
</span>
</div>
</div>
<div class="pt1 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}} />
<div class="flex flex-column justify-center">
<h3 class="ma0 pa0">{{member.name}}</h3>
<span class="db">
<a class="midlightgrey" href="mailto:{{member.email}}">
{{member.email}}
</a>
</span>
</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">
<span class="db ttu f8 midlightgrey">Member since</span>
<span class="db f5">{{moment-format member.createdAt "MMMM Do"}}</span>
<span class="db f8 midlightgrey">({{moment-to-now member.createdAt hideAffix=true}})</span>
</div>
<div class="flex flex-row bt b--whitegrey bg-whitegrey-l2">
<div class="flex flex-column flex-grow-1 pa5 br b--whitegrey">
<span class="db ttu f8 midlightgrey">Member since</span>
<span class="db f5">{{moment-format member.createdAt "MMMM Do"}}</span>
<span class="db f8 midlightgrey">({{moment-to-now member.createdAt hideAffix=true}})</span>
</div>
<div class="flex flex-column flex-grow-1 pa5">
<span class="db ttu f8 midlightgrey">Current plan</span>
<span class="db f5">-</span>
<span class="db f8 midlightgrey"></span>
</div>
<div class="flex flex-column flex-grow-1 pa5">
<span class="db ttu f8 midlightgrey">Current plan</span>
<span class="db f5">Monthly</span>
<span class="db f8 midlightgrey">6 USD/month</span>
</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
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)}}
data-test-button="delete-member"
>

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

@ -10,14 +10,14 @@
{{#if this.fetchMembers.lastSuccessful}}
({{this.meta.pagination.total}})
{{else}}
(...)
(Loading...)
{{/if}}
</h2>
</div>
{{#if this.members}}
{{!-- 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
@items={{this.members}}
@key="id"