TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 12:21:36 +03:00
Code Issues Projects Releases Wiki Activity

Fixed various tiny tweaks for members scrollable table

Browse Source 
- double scrollbars showing at certain widths
- strange resizing of search members text box
- borders showing through when scrolling
- tidying table horizontal scrolling when viewport is narrower
This commit is contained in:
James Morris 2022-01-07 10:58:57 +00:00
parent 05373e7ac2
commit 3429ac6934
3 changed files with 41 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/styles/app-dark.css
View File

@ -1042,7 +1042,7 @@ input:focus,
right: -2px; right: -2px;
} }
.gh-list-scrolling thead th { .gh-list-scrolling thead th:first-child {
background: linear-gradient(90deg, rgba(21,23,25,1) 90%, rgba(21,23,25,0) 100%); background: linear-gradient(90deg, rgba(21,23,25,1) 90%, rgba(21,23,25,0) 100%);
} }

48
ghost/admin/app/styles/components/lists.css
View File

@ -313,9 +313,9 @@ ul.nostyle li {
position: relative; position: relative;
overflow: scroll; overflow: scroll;
max-width: calc(100% + 96px); max-width: calc(100% + 96px);
height: calc(100vh - 96px); height: calc(100vh - 129px);
margin: 0 -48px -81px; margin: 0 -48px -81px;
padding: 0 48px 0 0; padding: 0 48px;
} }
.gh-list-scrolling table { .gh-list-scrolling table {
@ -325,6 +325,13 @@ ul.nostyle li {
border-bottom: none; border-bottom: none;
} }
.gh-list-scrolling thead tr {
background: var(--main-bg-color);
position: sticky;
top: 0;
z-index: 2;
}
.gh-list-scrolling thead th { .gh-list-scrolling thead th {
position: sticky; position: sticky;
top: 0; top: 0;
@ -333,8 +340,6 @@ ul.nostyle li {
font-weight: 500; font-weight: 500;
letter-spacing: 0.1px; letter-spacing: 0.1px;
color: var(--black); color: var(--black);
background: var(--main-bg-color);
background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
border-bottom: var(--whitegrey) 1px solid; border-bottom: var(--whitegrey) 1px solid;
padding: 10px 20px; padding: 10px 20px;
text-transform: uppercase; text-transform: uppercase;
@ -343,9 +348,19 @@ ul.nostyle li {
.gh-list-scrolling thead th:first-child { .gh-list-scrolling thead th:first-child {
left: 0; left: 0;
z-index: 1; z-index: 3;
border-bottom: none; border-bottom: none;
padding: 0 60px 0 48px; padding: 0 60px 0 0;
background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
}
.gh-list-scrolling thead th:first-child::after {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
background: green;
} }
.gh-list-scrolling tbody .gh-list-data:first-child { .gh-list-scrolling tbody .gh-list-data:first-child {
@ -354,7 +369,7 @@ ul.nostyle li {
border-bottom: none; border-bottom: none;
background: var(--main-bg-color); background: var(--main-bg-color);
background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%); background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
padding: 0 60px 0 48px; padding: 0 60px 0 0;
} }
.gh-list-scrolling thead th:first-child::before, .gh-list-scrolling thead th:first-child::before,
@ -363,7 +378,7 @@ ul.nostyle li {
content: ""; content: "";
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 48px; left: 0;
height: 1px; height: 1px;
background: var(--whitegrey); background: var(--whitegrey);
} }
@ -383,3 +398,20 @@ ul.nostyle li {
border-top: none; border-top: none;
border-bottom: var(--whitegrey) 1px solid; border-bottom: var(--whitegrey) 1px solid;
} }
@media (max-width: 800px) {
.gh-list-scrolling {
max-width: calc(100% + 8vw);
height: calc(100vh - 193px);
margin-left: -4vw;
margin-right: -4vw;
padding-left: 4vw;
padding-right: 4vw;
}
}
@media (min-width: 1450px) {
.gh-list-scrolling {
height: calc(100vh - 96px);
}
}

7
ghost/admin/app/styles/layouts/members.css
View File

@ -287,13 +287,6 @@ p.gh-members-list-email {
text-transform: uppercase; text-transform: uppercase;
} }
@media (min-width: 1200px) and (max-width: 1370px) {
.members-header .view-actions input.gh-members-list-searchfield {
max-width: 130px;
min-width: unset;
}
}
@media (max-width: 1100px) { @media (max-width: 1100px) {
.gh-members-chart-summary-data { .gh-members-chart-summary-data {
font-size: 2.8rem; font-size: 2.8rem;