TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Udpated members list design

Browse Source 
no issue.
This commit is contained in:
Peter Zimon 2019-10-03 12:56:31 +02:00
parent 2d4b332e9c
commit 495663c3c4
9 changed files with 153 additions and 62 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

@ -17,7 +17,7 @@ export default Component.extend({
member: null,
initialsClass: computed('sizeClass', function () {
return this.sizeClass || 'f6 fw4';
return this.sizeClass || 'f5 fw4 lh-zero';
}),
backgroundStyle: computed('member.{name,email}', function () {

8
ghost/admin/app/components/gh-members-list-item.js
View File

@ -10,18 +10,16 @@ export default Component.extend({
router: service(),
tagName: 'li',
classNames: ['gh-list-row', 'gh-tags-list-item'],
classNames: ['gh-flex-list-row'],
active: false,
id: alias('member.id'),
email: alias('member.email'),
name: computed('member.name', function () {
return this.member.name || '-';
}),
name: alias('member.name'),
subscribedAt: computed('member.createdAt', function () {
let memberSince = moment(this.member.createdAt).from(moment());
let createdDate = moment(this.member.createdAt).format('MMM DD, YYYY');
return `Created on ${createdDate} (${memberSince})`;
return `${createdDate} (${memberSince})`;
})
});

69
ghost/admin/app/styles/components/lists.css
View File

@ -23,23 +23,23 @@
background: var(--whitegrey-l2);
}
.gh-list-row:first-child .gh-list-cell:first-child,
.gh-list-row:first-child .gh-list-data:first-child {
.gh-list-row:first-of-type .gh-list-cell:first-child,
.gh-list-row:first-of-type .gh-list-data:first-child {
border-top-left-radius: 5px;
}
.gh-list-row:first-child .gh-list-cell:last-child,
.gh-list-row:first-child .gh-list-data:last-child {
.gh-list-row:first-of-type .gh-list-cell:last-child,
.gh-list-row:first-of-type .gh-list-data:last-child {
border-top-right-radius: 5px;
}
.gh-list-row:last-child .gh-list-cell:first-child,
.gh-list-row:last-child .gh-list-data:first-child {
.gh-list-row:last-of-type .gh-list-cell:first-child,
.gh-list-row:last-of-type .gh-list-data:first-child {
border-bottom-left-radius: 5px;
}
.gh-list-row:last-child .gh-list-cell:last-child,
.gh-list-row:last-child .gh-list-data:last-child {
.gh-list-row:last-of-type .gh-list-cell:last-child,
.gh-list-row:last-of-type .gh-list-data:last-child {
border-bottom-right-radius: 5px;
}
@ -98,6 +98,10 @@
text-align: right;
}
.gh-list-cellwidth-max {
width: 100%;
}
.gh-list-cellwidth-2-3 {
width: 67%;
}
@ -152,6 +156,55 @@
}
/* Flex lists - header and responsive sizes must be custom
/* -------------------------------------------------- */
.gh-flex-list-row {
display: flex;
align-items: stretch;
justify-content: space-between;
margin: 0;
padding: 0;
border-top: var(--whitegrey) 1px solid;
}
.gh-flex-list-row:first-of-type {
border-top: none;
}
.gh-flex-list-row:not(.header):not(.loading):hover {
background: var(--whitegrey-l2);
}
.gh-flex-list-row:first-of-type {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.gh-flex-list-row:last-of-type {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.gh-flex-list-data {
display: flex;
align-items: center;
padding: 16px 20px;
transition: none !important;
}
.gh-flex-list-auto {
flex: 1 1 auto;
}
.gh-flex-list-grow {
flex-grow: 1;
}
.gh-flex-list-shrink {
flex-grow: 1;
}
/* Fake loading list
/* -------------------------------------------------- */

6
ghost/admin/app/styles/layouts/main.css
View File

@ -769,6 +769,12 @@
user-select: text;
}
.view-actions input[type="text"] {
padding: 7px 8px 8px;
height: 33px;
font-size: 1.3rem;
}
@media (max-width: 400px) {
.view-header {
padding: 0 7px;

19
ghost/admin/app/styles/layouts/members.css
View File

@ -1,3 +1,18 @@
.members-list .gh-list-row:nth-of-type(2) .gh-list-data {
border-top: var(--whitegrey) 1px solid;
.view-actions input.gh-members-list-searchfield {
min-width: 220px;
padding-left: 30px;
}
p.gh-members-list-email {
margin: -2px 0 -1px;
}
.gh-members-list-subscribed-at {
margin-right: -8px;
padding-right: 0;
}
.gh-members-placeholder {
width: 118px;
margin: -30px 0 15px;
}

4
ghost/admin/app/styles/spirit/_line-height.css
View File

@ -21,6 +21,7 @@
.lh-copy { line-height: var(--lh-1-6); }
.lh-list { line-height: 3.2rem; }
.lh-code { line-height: var(--lh-1-3); }
.lh-zero { line-height: 0; }
@media (--breakpoint-not-small) {
.lh-solid-ns { line-height: var(--lh-1-1); }
@ -29,6 +30,7 @@
.lh-copy-ns { line-height: var(--lh-1-6); }
.lh-list-ns { line-height: var(--lh-2-0); }
.lh-code-ns { line-height: var(--lh-1-3); }
.lh-zero-ns { line-height: 0; }
}
@media (--breakpoint-medium) {
@ -38,6 +40,7 @@
.lh-copy-m { line-height: var(--lh-1-6); }
.lh-list-m { line-height: var(--lh-2-0); }
.lh-code-m { line-height: var(--lh-1-3); }
.lh-zero-m { line-height: 0; }
}
@media (--breakpoint-large) {
@ -47,4 +50,5 @@
.lh-copy-l { line-height: var(--lh-1-6); }
.lh-list-l { line-height: var(--lh-2-0); }
.lh-code-l { line-height: var(--lh-1-3); }
.lh-zero-l { line-height: 0; }
}

30
ghost/admin/app/templates/components/gh-members-list-item.hbs
View File

@ -1,19 +1,25 @@
{{#link-to "member" member class="gh-list-data" title="Edit Member"}}
<div class="apps-card-left">
<GhMemberAvatar @member={{member}} class="w9 h9 mr4" />
<div class="apps-card-meta">
<h3 class="apps-card-app-title">{{this.name}}</h3>
<p class="apps-card-app-desc">{{this.email}}</p>
{{#link-to "member" member class="gh-flex-list-data gh-flex-list-auto" title="Member details"}}
<div class="flex items-center">
<GhMemberAvatar @member={{member}} class="w9 h9 mr3" />
<div>
<h3 class="ma0 pa0 gh-members-list-name">
{{#if this.name}}
{{this.name}}
{{else}}
{{this.email}}
{{/if}}
</h3>
{{#if this.name}}
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{this.email}}</p>
{{/if}}
</div>
</div>
{{/link-to}}
{{#link-to "member" member class="gh-list-data middarkgrey f8 gh-tag-list-slug" title="Subscribed At" }}
<span class="nowrap">{{this.subscribedAt}}</span>
{{#link-to "member" member class="gh-flex-list-data gh-members-list-subscribed-at middarkgrey f8 nowrap" title="Subscribed at" }}
Subscribed at {{this.subscribedAt}}
{{/link-to}}
{{#link-to "member" member class="gh-list-data" title="Edit Member"}}
<div class="flex items-center justify-end w-100">
<span class="nr2">{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}}</span>
</div>
{{#link-to "member" member class="gh-flex-list-data" title="Member details"}}
{{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1 nr2"}}
{{/link-to}}

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

@ -1,15 +1,18 @@
<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>
<section class="view-actions">
<div class="relative">
{{svg-jar "search" class="absolute top-2 left-2 w4 h4 fill-midlightgrey-l2"}}
<GhTextInput placeholder="Search members..." @value={{this.searchText}} @input={{action (mut this.searchText) value="target.value"}} class="gh-members-list-searchfield" />
</div>
</section>
</GhCanvasHeader>
<section class="view-container h-100">
<section class="view-container">
{{#if (or filteredMembers this.fetchMembers.isRunning this.searchText)}}
<div class="flex justify-between items-center">
<h2 class="f-small fw5 midlightgrey ttu">
<h2 class="f-small fw5 midlightgrey ttu mb2">
{{#if this.searchText}}
Search result
{{else}}
@ -22,38 +25,43 @@
{{/if}}
</h2>
</div>
{{/if}}
<section class="content-list">
<ol class="members-list gh-list">
{{#if filteredMembers}}
{{#vertical-collection
items=filteredMembers
key="id"
containerSelector=".gh-main"
estimateHeight=60
bufferSize=20
as |member|
<section class="content-list">
<ol class="members-list gh-list {{unless filteredMembers "no-posts"}}">
{{#if filteredMembers}}
{{#vertical-collection
items=filteredMembers
key="id"
containerSelector=".gh-main"
estimateHeight=60
bufferSize=20
as |member|
}}
{{gh-members-list-item
member=member
data-test-member-id=member.id
}}
{{gh-members-list-item
member=member
data-test-member-id=member.id
}}
{{/vertical-collection}}
{{/vertical-collection}}
{{else}}
{{#if this.fetchMembers.isRunning}}
<div class="gh-content">
<GhLoadingSpinner />
</div>
{{else}}
{{#if this.fetchMembers.isRunning}}
<div class="gh-content">
<GhLoadingSpinner />
</div>
{{else}}
<li class="no-posts-box">
<div class="no-posts">
{{svg-jar "tags-placeholder" class="gh-tags-placeholder"}}
<li class="no-posts-box">
<div class="no-posts">
{{svg-jar "members-placeholder" class="gh-members-placeholder"}}
{{#if this.searchText}}
<h3>No members found!</h3>
</div>
</li>
{{/if}}
{{else}}
<h3>You don't have any members</h3>
{{/if}}
</div>
</li>
{{/if}}
</ol>
</section>
{{/if}}
</ol>
</section>
</section>
</section>

1
ghost/admin/public/assets/icons/members-placeholder.svg Normal file
View File

@ -0,0 +1 @@
<svg width="138" height="138" viewBox="0 0 138 138" xmlns="http://www.w3.org/2000/svg"><title>Combined Shape</title><g fill="none" fill-rule="evenodd"><path d="M69 .5c37.832 0 68.5 30.668 68.5 68.5s-30.668 68.5-68.5 68.5S.5 106.832.5 69 31.168.5 69 .5zM24.82 98.183h50.347C75.025 88.69 70.84 81.579 62.58 76.79c-8.404-4.871-16.772-4.871-25.175 0-8.26 4.788-12.445 11.899-12.586 21.392zm50.347 0h.503l-.5.5c0-.168 0-.335-.003-.5zm-.663-21.045c5.182 5.666 8.348 12.685 9.498 21.044h28.848c-.14-9.492-4.325-16.603-12.585-21.391-8.404-4.871-16.772-4.871-25.176 0-.198.115-.393.23-.585.347zM49.994 37.58c-4.173 0-7.72 1.475-10.67 4.437s-4.42 6.525-4.42 10.714c0 4.19 1.47 7.752 4.42 10.714 2.95 2.962 6.497 4.437 10.67 4.437 4.171 0 7.718-1.475 10.669-4.437 2.95-2.962 4.42-6.524 4.42-10.714s-1.47-7.752-4.42-10.714c-2.95-2.962-6.498-4.437-10.67-4.437zm37.683 0c-4.172 0-7.719 1.475-10.67 4.437-2.95 2.962-4.42 6.525-4.42 10.714 0 4.19 1.47 7.752 4.42 10.714 2.951 2.962 6.498 4.437 10.67 4.437s7.72-1.475 10.67-4.437 4.42-6.524 4.42-10.714-1.47-7.752-4.42-10.714c-2.95-2.962-6.498-4.437-10.67-4.437z" stroke="#9BAEB8" fill-opacity=".1" fill="#9BAEB8" stroke-linecap="square"/><path stroke-opacity=".012" stroke="#000" stroke-width="0" d="M25 25h88v88H25z"/><path d="M62.832 76.358C71.39 81.32 75.67 88.761 75.67 98.683H24.316c0-9.922 4.28-17.364 12.839-22.325 8.559-4.96 17.118-4.96 25.677 0zm37.684 0c8.559 4.961 12.838 12.403 12.838 22.325l-29.79-.001c-1.114-8.672-4.394-15.888-9.84-21.648.363-.23.734-.455 1.115-.676 8.559-4.96 17.118-4.96 25.677 0zM49.993 37.08c4.305 0 7.98 1.528 11.024 4.584 3.044 3.056 4.566 6.745 4.566 11.067s-1.522 8.01-4.566 11.067c-3.044 3.056-6.719 4.584-11.024 4.584-4.305 0-7.98-1.528-11.023-4.584-3.044-3.056-4.566-6.745-4.566-11.067s1.522-8.01 4.566-11.067c3.044-3.056 6.718-4.584 11.023-4.584zm37.684 0c4.305 0 7.98 1.528 11.024 4.584 3.044 3.056 4.566 6.745 4.566 11.067s-1.522 8.01-4.566 11.067c-3.044 3.056-6.719 4.584-11.024 4.584-4.305 0-7.98-1.528-11.023-4.584-3.045-3.056-4.567-6.745-4.567-11.067s1.522-8.01 4.567-11.067c3.044-3.056 6.718-4.584 11.023-4.584z" stroke="#9BAEB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB