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

Fixed columns resizing whilst scrolling members list

Browse source 
no issue

- the members list uses occluded rendering to keep scrolling performance high but this will cause constant reflows of the table contents whilst scrolling because contents are swapped in and out causing the browser to adjust the column widths to match longest/shortest content in the currently rendered set of rows
- applying `table-layout: fixed` to the table means that columns will always match the sizes defined by the first row of the table (in this case the header) ensuring that there is no dynamic resizing whilst scrolling
This commit is contained in:
Kevin Ansfield 2020-05-28 12:59:34 +01:00
parent 29b4d72939
commit a76465b5ee
2 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/app/styles/layouts/members.css
View file

@ -45,6 +45,10 @@
/* Members list /* Members list
/* ----------------------------------------- */ /* ----------------------------------------- */
.members-list {
table-layout: fixed;
}
.members-header .view-actions input.gh-members-list-searchfield { .members-header .view-actions input.gh-members-list-searchfield {
min-width: 220px; min-width: 220px;
padding-left: 30px; padding-left: 30px;

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

@ -58,9 +58,9 @@
{{#if this.members}} {{#if this.members}}
<li class="gh-list-row header"> <li class="gh-list-row header">
<div class="gh-list-header">{{this.listHeader}}</div> <div class="gh-list-header">{{this.listHeader}}</div>
<div class="gh-list-header gh-list-cellwidth-20 nowrap">Location</div> <div class="gh-list-header gh-members-list-geolocation gh-list-cellwidth-20 nowrap">Location</div>
<div class="gh-list-header gh-list-cellwidth-20 nowrap">Created</div> <div class="gh-list-header gh-members-list-subscribed-at gh-list-cellwidth-20 nowrap">Created</div>
<div class="gh-list-header gh-list-cellwidth-chevron"></div> <div class="gh-list-header gh-members-list-chevron gh-list-cellwidth-chevron"></div>
</li> </li>
<VerticalCollection @items={{this.members}} @key="id" @containerSelector=".gh-main" @estimateHeight={{69}} @staticHeight={{true}} @bufferSize={{20}} as |member|> <VerticalCollection @items={{this.members}} @key="id" @containerSelector=".gh-main" @estimateHeight={{69}} @staticHeight={{true}} @bufferSize={{20}} as |member|>
<GhMembersListItem @member={{member}} @data-test-member-id={{member.id}} /> <GhMembersListItem @member={{member}} @data-test-member-id={{member.id}} />