Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Fixed scrolling issues on members table (#19833)

Browse source 
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>
This commit is contained in:
Daniël van der Winden 2024-03-11 17:32:10 +01:00 • committed by GitHub
parent b41d9c9251
commit f0d6a64f7a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 21 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/members/list-item-loading.hbs
View file

@ -1,4 +1,4 @@
<tr data-test-list="members-list-item">
<tr data-test-list="members-list-item" class="gh-members-list-row">
<div class="gh-list-data gh-members-list-basic gh-list-loadingcell">
<div class="gh-list-loading-title"></div>
<div class="gh-list-loading-detail"></div>

4
ghost/admin/app/components/members/list-item.hbs
View file

@ -1,6 +1,6 @@
<tr data-test-list='members-list-item' data-test-member={{@member.id}}>
<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">
<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>

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

@ -315,6 +315,12 @@ p.gh-members-list-email {
text-transform: uppercase;
}
.gh-members-list-row .gh-list-data:first-child {
width: 30%;
min-width: 360px;
padding-right: 20px !important;
}
@media (max-width: 1100px) {
.gh-members-chart-summary-data {
font-size: 2.8rem;
@ -333,6 +339,18 @@ p.gh-members-list-email {
margin-left: 0;
margin-right: 0;
}
.gh-members-list-row .gh-list-data:first-child {
min-width: 280px;
overflow-x: hidden;
}
.gh-members-list-email,
.gh-members-list-name {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (min-width: 440px) and (max-width: 1000px) {
@ -357,31 +375,6 @@ p.gh-members-list-email {
display: none;
}
.gh-members-list-item {
display: flex;
position: relative;
flex-wrap: wrap;
border-bottom: 1px solid var(--list-color-divider);
margin: 0;
}
.gh-members-list-item:nth-of-type(2) {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.gh-members-list-item .gh-list-data {
border-top: none !important;
}
.gh-members-list-item:hover {
background: var(--whitegrey-l2);
}
.gh-members-list-item:hover .gh-list-data {
background: none !important;
}
.gh-members-list-basic {
display: block;
flex: 1 1 100%;