Ghost/ghost/admin/app/components/members/list-item.hbs
Daniël van der Winden f0d6a64f7a
Fixed scrolling issues on members table (#19833)
ref DES-86

Set fixed widths for different columns on the Members table specifically, so content does not jump up & down anymore as you scroll down the page.

---------

Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
2024-03-11 17:32:10 +01:00

68 lines
3.3 KiB
Handlebars

<tr data-test-list='members-list-item' data-test-member={{@member.id}} class="gh-members-list-row">
<LinkTo @route="member" @model={{@member}} @query={{@query}} class="gh-list-data" data-test-table-data="details">
<div class="flex items-center gh-members-list-name-container">
<GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
<div class="w-80">
<h3 class="ma0 pa0 gh-members-list-name {{unless @member.name "gh-members-name-noname"}}">{{or @member.name @member.email}}</h3>
{{#if @member.name}}
<p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{@member.email}}</p>
{{/if}}
</div>
</div>
</LinkTo>
{{#if this.hasMultipleTiers}}
<LinkTo @route="member" @model={{@member}} @query={{@query}} class="gh-list-data" data-test-table-data="status">
{{#if (not (is-empty @member.status))}}
<span>{{capitalize @member.status}}</span>
{{else}}
<span class="midlightgrey">-</span>
{{/if}}
<div class="midgrey">{{this.tiers}}</div>
</LinkTo>
{{else}}
<LinkTo @route="member" @model={{@member}} @query={{@query}} class="gh-list-data" data-test-table-data="status">
{{#if (not (is-empty @member.status))}}
<span>{{capitalize @member.status}}</span>
{{else}}
<span class="midlightgrey">-</span>
{{/if}}
</LinkTo>
{{/if}}
{{#if @newsletterEnabled}}
<LinkTo @route="member" @model={{@member}} @query={{@query}} class="gh-list-data middarkgrey f8 {{unless @member.name "gh-members-list-open-rate-noname"}}" data-test-table-data="open-rate">
{{#if (not (is-empty @member.emailOpenRate))}}
<span>{{@member.emailOpenRate}}%</span>
{{else}}
<span class="midlightgrey">N/A</span>
{{/if}}
</LinkTo>
{{/if}}
<LinkTo @route="member" @model={{@member}} @query={{@query}} class="gh-list-data middarkgrey f8 {{unless @member.name "gh-members-geolocation-noname"}}" data-test-table-data="location">
{{#if (and @member.geolocation @member.geolocation.country)}}
{{#if (and (eq @member.geolocation.country_code "US") @member.geolocation.region)}}
{{@member.geolocation.region}}, US
{{else}}
{{#if @member.geolocation.country}}
{{@member.geolocation.country}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
{{/if}}
{{else}}
<span class="midlightgrey">Unknown</span>
{{/if}}
</LinkTo>
<LinkTo @route="member" @model={{@member}} @query={{@query}} class="gh-list-data middarkgrey f8" data-test-table-data="created-at">
{{#if @member.createdAtUTC}}
<div>{{moment-format (moment-site-tz @member.createdAtUTC) "DD MMM YYYY"}}</div>
<div class="midlightgrey gh-members-list-subscribed-moment">{{moment-from-now @member.createdAtUTC}}</div>
{{/if}}
</LinkTo>
{{#each @filterColumns as |filterColumn|}}
<Members::ListItemColumn @member={{@member}} @filterColumn={{filterColumn}} @query={{@query}} />
{{/each}}
</tr>