From 495663c3c48d20f6a8d4a43741d09bb9be70b1b7 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Thu, 3 Oct 2019 12:56:31 +0200 Subject: [PATCH] Udpated members list design no issue. --- .../admin/app/components/gh-member-avatar.js | 2 +- .../app/components/gh-members-list-item.js | 8 +- ghost/admin/app/styles/components/lists.css | 69 +++++++++++++++-- ghost/admin/app/styles/layouts/main.css | 6 ++ ghost/admin/app/styles/layouts/members.css | 19 ++++- .../admin/app/styles/spirit/_line-height.css | 4 + .../components/gh-members-list-item.hbs | 30 +++++--- ghost/admin/app/templates/members.hbs | 76 ++++++++++--------- .../assets/icons/members-placeholder.svg | 1 + 9 files changed, 153 insertions(+), 62 deletions(-) create mode 100644 ghost/admin/public/assets/icons/members-placeholder.svg diff --git a/ghost/admin/app/components/gh-member-avatar.js b/ghost/admin/app/components/gh-member-avatar.js index a3277bdd57..78014eed14 100644 --- a/ghost/admin/app/components/gh-member-avatar.js +++ b/ghost/admin/app/components/gh-member-avatar.js @@ -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 () { diff --git a/ghost/admin/app/components/gh-members-list-item.js b/ghost/admin/app/components/gh-members-list-item.js index ada62e405e..d72f5f4ad9 100644 --- a/ghost/admin/app/components/gh-members-list-item.js +++ b/ghost/admin/app/components/gh-members-list-item.js @@ -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})`; }) }); diff --git a/ghost/admin/app/styles/components/lists.css b/ghost/admin/app/styles/components/lists.css index 49b5982644..7902278f56 100644 --- a/ghost/admin/app/styles/components/lists.css +++ b/ghost/admin/app/styles/components/lists.css @@ -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 /* -------------------------------------------------- */ diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css index a912a2b1aa..d8b470a98d 100644 --- a/ghost/admin/app/styles/layouts/main.css +++ b/ghost/admin/app/styles/layouts/main.css @@ -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; diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index b55d8a032d..5fa2cc8541 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -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; } \ No newline at end of file diff --git a/ghost/admin/app/styles/spirit/_line-height.css b/ghost/admin/app/styles/spirit/_line-height.css index 2ee1182545..16af74b9b7 100644 --- a/ghost/admin/app/styles/spirit/_line-height.css +++ b/ghost/admin/app/styles/spirit/_line-height.css @@ -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; } } diff --git a/ghost/admin/app/templates/components/gh-members-list-item.hbs b/ghost/admin/app/templates/components/gh-members-list-item.hbs index 737661ee0a..d2402ff7c7 100644 --- a/ghost/admin/app/templates/components/gh-members-list-item.hbs +++ b/ghost/admin/app/templates/components/gh-members-list-item.hbs @@ -1,19 +1,25 @@ -{{#link-to "member" member class="gh-list-data" title="Edit Member"}} -
- -
-

{{this.name}}

-

{{this.email}}

+{{#link-to "member" member class="gh-flex-list-data gh-flex-list-auto" title="Member details"}} +
+ +
+

+ {{#if this.name}} + {{this.name}} + {{else}} + {{this.email}} + {{/if}} +

+ {{#if this.name}} +

{{this.email}}

+ {{/if}}
{{/link-to}} -{{#link-to "member" member class="gh-list-data middarkgrey f8 gh-tag-list-slug" title="Subscribed At" }} - {{this.subscribedAt}} +{{#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"}} -
- {{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1"}} -
+{{#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}} \ No newline at end of file diff --git a/ghost/admin/app/templates/members.hbs b/ghost/admin/app/templates/members.hbs index 3004e92290..a9e62f7b4f 100644 --- a/ghost/admin/app/templates/members.hbs +++ b/ghost/admin/app/templates/members.hbs @@ -1,15 +1,18 @@

Members

-
- -
+
+
+ {{svg-jar "search" class="absolute top-2 left-2 w4 h4 fill-midlightgrey-l2"}} + +
+
-
+
+ {{#if (or filteredMembers this.fetchMembers.isRunning this.searchText)}}
-

+

{{#if this.searchText}} Search result {{else}} @@ -22,38 +25,43 @@ {{/if}}

+ {{/if}} -
-
    - {{#if filteredMembers}} - {{#vertical-collection - items=filteredMembers - key="id" - containerSelector=".gh-main" - estimateHeight=60 - bufferSize=20 - as |member| +
    +
      + {{#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}} +
      + +
      {{else}} - {{#if this.fetchMembers.isRunning}} -
      - -
      - {{else}} -
    1. -
      - {{svg-jar "tags-placeholder" class="gh-tags-placeholder"}} +
    2. +
      + {{svg-jar "members-placeholder" class="gh-members-placeholder"}} + {{#if this.searchText}}

      No members found!

      -
      -
      3. - {{/if}} + {{else}} +

      You don't have any members

      + {{/if}} +
+ {{/if}} - - + {{/if}} + + \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/members-placeholder.svg b/ghost/admin/public/assets/icons/members-placeholder.svg new file mode 100644 index 0000000000..d30d45a979 --- /dev/null +++ b/ghost/admin/public/assets/icons/members-placeholder.svg @@ -0,0 +1 @@ +Combined Shape \ No newline at end of file