Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-15 03:01:37 -05:00
Code Issues Activity

🐛 Fixed responsive issues with Posts filters (#21871)

Browse source 
When using the Admin on a mobile device, the filters on the Posts screen
fell off the screen. They weren't scrollable horizontally, making them
difficult to use. These changes address that.
The Members header uses the same markup, so I addressed a responsive
issue there as well (the search bar for Members wasn't behaving
accurately across resolutions).

fixes
https://linear.app/ghost/issue/DES-1030/filters-for-posts-fall-off-screen-on-mobile-resolutions

**Before / After**


https://github.com/user-attachments/assets/f7d51801-6949-45d0-aea6-054f17d92a19
This commit is contained in:
Daniël van der Winden 2024-12-12 09:29:11 +01:00 • committed by GitHub
parent dd9810fc96
commit d78802d7d1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
ghost/admin/app/styles/layouts/main.css
View file

@ -1835,9 +1835,25 @@
.gh-canvas {
padding: 0 4vw 4vw;
}
.gh-canvas-header.break.tablet .view-actions {
position: absolute;
left: 0;
width: 100%;
}
.gh-canvas-header.break .view-actions-bottom-row {
.gh-canvas-header.break.tablet .view-actions-bottom-row {
position: relative;
max-width: calc(100vw - 56px) !important;
min-width: 100%;
display: flex;
justify-content: space-between;
overflow-x: auto;
}
.gh-canvas-header.break .view-actions .gh-contentfilter {
border: none;
}
}

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

@ -464,6 +464,10 @@ p.gh-members-list-email {
.gh-members-list-chevron {
display: none;
}
.members-header .view-actions .gh-members-header-search {
width: 100%;
}
}
@media (max-width: 450px) {
@ -2834,6 +2838,10 @@ a.gh-members-emailpreview-subscription-link {
.members-header .gh-canvas-title {
left: 25px;
}
.members-header .view-actions .gh-members-header-search {
width: 100%;
}
}
@media (max-width: 430px) {