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

Visual tweaks on Members list

Browse source 
- tune list style
- tweak generated avatar background-colors
- type and color refinements
This commit is contained in:
Zimo 2019-01-31 17:41:55 +01:00
parent 2f98f8b472
commit ea2b89ab1c
3 changed files with 10 additions and 10 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

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

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

@ -1,3 +1,3 @@
<div class="flex items-center justify-center br-100" style={{this.backgroundStyle}} ...attributes>
<span class="block white f5 fw7">{{this.initials}}</span>
<span class="block white f6 fw3">{{this.initials}}</span>
</div>

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

@ -1,15 +1,15 @@
<section class="gh-canvas">
<header class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>Members</h2>
<div class="view-actions">
<span>{{this.meta.pagination.total}} Members</span>
</div>
</header>
<section class="view-container">
<div class="flex justify-between items-center pt1">
<h2 class="f7 fw4 midgrey">All members ({{this.meta.pagination.total}})</h2>
</div>
{{#if this.members}}
{{!-- members list, styles taken from .apps-grid --}}
<div class="flex flex-row flex-wrap items-start ba br3">
<div class="flex flex-row flex-wrap items-start ba br3 b--whitegrey mt1">
<VerticalCollection
@items={{this.members}}
@key="id"
@ -18,16 +18,16 @@
as |member index|
>
<div class="flex-grow-1 flex-shrink-1" style="flex-basis: 100%">
{{#link-to "member" member}}
{{#link-to "member" member classNames="link whitegrey"}}
<article class="flex items-center justify-between pa4 {{if index "bt"}}">
<div class="flex items-center">
<GhMemberAvatar @member={{member}} class="w10 h10 mr4" />
<div class="flex flex-column">
<h3 class="ma0 f5 fw7">{{member.name}}</h3>
<p class="ma0 pa0 f7">{{member.email}}</p>
<h3 class="darkgrey ma0 f5 fw7">{{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"}}</div>
<div class="flex items-center">{{svg-jar "arrow-right" class="w4 h4 fill-midlightgrey"}}</div>
</article>
{{/link-to}}
</div>