Refined member list

no issue
- added list headings
- added active state to search field when it has value
- set position of actions dropdown
- refined avatar typography

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 || 'f5 fw4 lh-zero';
+        return this.sizeClass || 'gh-member-list-avatar';
     }),
 
     backgroundStyle: computed('member.{name,email}', function () {

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

@@ -10,16 +10,17 @@ export default Component.extend({
     router: service(),
 
     tagName: 'li',
-    classNames: ['gh-flex-list-row'],
+    classNames: ['gh-list-row'],
 
     active: false,
 
     id: alias('member.id'),
     email: alias('member.email'),
     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 `${createdDate} (${memberSince})`;
+    memberSince: computed('member.createdAt', function () {
+        return moment(this.member.createdAt).from(moment());
+    }),
+    createdDate: computed('member.createdAt', function () {
+        return moment(this.member.createdAt).format('MMM DD, YYYY');
     })
 });

ghost/admin/app/styles/components/lists.css

@@ -64,10 +64,12 @@
 
 .gh-list:not(.tabbed) .gh-list-header:first-child {
     border-top-left-radius: 5px;
+    padding-left: 16px;
 }
 
 .gh-list:not(.tabbed) .gh-list-header:last-child {
     border-top-right-radius: 5px;
+    padding-right: 16px;
 }
 
 .gh-list-data {
@@ -82,6 +84,10 @@
     border-top: none;
 }
 
+.gh-list-row .gh-list-data:first-child {
+    padding-left: 16px;
+}
+
 .gh-list-data.show-on-hover > *,
 .gh-list-cell.show-on-hover > * {
     opacity: 0;
@@ -114,6 +120,21 @@
     width: 33%;
 }
 
+.gh-list-cellwidth-10 { width: 10%; }
+.gh-list-cellwidth-20 { width: 20%; }
+.gh-list-cellwidth-30 { width: 30%; }
+.gh-list-cellwidth-40 { width: 40%; }
+.gh-list-cellwidth-50 { width: 50%; }
+.gh-list-cellwidth-60 { width: 60%; }
+.gh-list-cellwidth-70 { width: 70%; }
+.gh-list-cellwidth-80 { width: 80%; }
+.gh-list-cellwidth-90 { width: 90%; }
+.gh-list-cellwidth-100 { width: 100%; }
+
+.gh-list-cellwidth-chevron {
+    width: 32px;
+}
+
 /* Typography
 /* --------------------------------------------------- */
 .gh-list h3 {

ghost/admin/app/styles/layouts/main.css

@@ -658,6 +658,7 @@
     margin: -3px 0 0 1px;
     padding: 0;
     text-overflow: ellipsis;
+    text-indent: -1px;
     white-space: nowrap;
     font-size: 2.8rem;
     line-height: 1.2em;

ghost/admin/app/styles/layouts/members.css

@@ -6,6 +6,11 @@
     padding-left: 30px;
 }
 
+.gh-members-list-searchfield.active {
+    border-color: #3eb0ef;
+    box-shadow: inset 0 0 0 1px #3eb0ef;
+}
+
 p.gh-members-list-email {
     margin: -2px 0 -1px;
 }
@@ -20,6 +25,21 @@ p.gh-members-list-email {
     margin: -30px 0 15px;
 }
 
+.gh-member-list-avatar {
+    font-size: 1.65rem;
+    font-weight: 500;
+    line-height: 0;
+    letter-spacing: -0.6px;
+}
+
+.gh-member-actions-menu {
+    top: calc(100% + 6px);
+}
+
+.gh-member-actions-menu.fade-out {
+    animation-duration: .001s;
+}
+
 
 /* Member details
 /* ----------------------------------------- */

ghost/admin/app/styles/patterns/global.css

@@ -189,7 +189,6 @@ h1 {
 }
 
 h2 {
-    text-indent: -1px;
     font-size: 2.2rem;
 }
 @media (max-width: 500px) {

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

@@ -1,4 +1,4 @@
-{{#link-to "member" member class="gh-flex-list-data gh-flex-list-auto" title="Member details"}}
+{{#link-to "member" member class="gh-list-data" title="Member details"}}
     <div class="flex items-center">
         <GhMemberAvatar @member={{member}} class="w9 h9 mr3" />
         <div>
@@ -16,10 +16,10 @@
     </div>
 {{/link-to}}
 
-{{#link-to "member" member class="gh-flex-list-data gh-members-list-subscribed-at middarkgrey f8 nowrap" title="Member details" }}
-    Member since {{this.subscribedAt}}
+{{#link-to "member" member class="gh-list-data gh-members-list-subscribed-at gh-list-cellwidth-20 nowrap middarkgrey f8 nowrap" title="Member details" }}
+    {{this.createdDate}} <span class="midgrey-l2">({{this.memberSince}})</span>
 {{/link-to}}
 
-{{#link-to "member" member class="gh-flex-list-data" title="Member details"}}
+{{#link-to "member" member class="gh-list-data gh-list-cellwidth-chevron align-right" title="Member details"}}
     {{svg-jar "arrow-right" class="w6 h6 fill-midgrey pa1 nr2"}}
 {{/link-to}}

ghost/admin/app/templates/member.hbs

@@ -15,7 +15,7 @@
             </section>
         </GhCanvasHeader>
         <div class="flex items-center mb10 bt b--lightgrey-d1 pt8">
-            <GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero' 'f-headline fw4 lh-zero'}} class="w18 h18 mr4" />
+            <GhMemberAvatar @member={{member}} @sizeClass={{if member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}} class="w18 h18 mr4" />
             <div>
                 <h3 class="f2 fw5 ma0 pa0">
                     {{if member.name member.name member.email}}

ghost/admin/app/templates/members.hbs

@@ -9,7 +9,7 @@
                     <span class="hidden">Members Actions</span>
                 </span>
                 {{/gh-dropdown-button}}
-                {{#gh-dropdown name="members-actions-menu" tagName="ul" classNames="user-actions-menu dropdown-menu dropdown-triangle-top-right"}}
+                {{#gh-dropdown name="members-actions-menu" tagName="ul" classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right"}}
                 <li>
                     {{#link-to "members.import" class="mr2" data-test-link="import-csv"}}
                     <span>Import CSV </span>
@@ -24,32 +24,29 @@
             </span>
             <div class="relative">
                 {{svg-jar "search" class="gh-input-search-icon"}}
-                <GhTextInput placeholder="Search members..." @value={{this.searchText}} @input={{action (mut this.searchText) value="target.value"}} class="gh-members-list-searchfield" />
+                <GhTextInput placeholder="Search members..." @value={{this.searchText}} @input={{action (mut this.searchText) value="target.value"}} class="gh-members-list-searchfield {{if this.searchText "active"}}" />
             </div>
         </section>
     </GhCanvasHeader>
     <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 mb2">
-                {{#if this.searchText}}
-                    Search result
-                {{else}}
-                    All members
-                    {{#if this.fetchMembers.lastSuccessful}}
-                        ({{this.meta.pagination.total}})
-                    {{else}}
-                        (Loading...)
-                    {{/if}}
-                {{/if}}
-            </h2>
-        </div>
-        {{/if}}
-
         <section class="content-list">
             <ol class="members-list gh-list {{unless filteredMembers "no-posts"}}">
                 {{#if filteredMembers}}
+                    <li class="gh-list-row header">
+                        <div class="gh-list-header">
+                            {{#if this.searchText}}
+                                Search result
+                            {{else}}
+                                {{#if this.fetchMembers.lastSuccessful}}
+                                    {{pluralize this.meta.pagination.total "member"}}
+                                {{else}}
+                                    Loading...
+                                {{/if}}
+                            {{/if}}
+                        </div>
+                        <div class="gh-list-header gh-list-cellwidth-20 nowrap">Created</div>
+                        <div class="gh-list-header gh-list-cellwidth-chevron"></div>
+                    </li>
                     {{#vertical-collection
                                 items=filteredMembers
                                 key="id"