github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-24 00:51:03 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: On very short screens switch quick-access-profile to 2-columns (#12120)

Browse Source
This commit is contained in:
Kris 2021-02-18 18:47:37 -05:00 committed by GitHub
parent 77c8f0c864
commit c3f6eb17a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -356,17 +356,33 @@
&.quick-access-profile {
display: inline;
overflow-y: auto; // There's no "show all" for this content, so it always needs to be scrollable
ul {
display: inline;
a {
box-sizing: border-box; // without this you end up with horizontal scroll
}
}
li:not(.show-all) a {
color: var(--primary);
display: flex;
}
ul button {
line-height: 1.4; // match 'ul a' link height
}
@media screen and (max-height: 360px) {
// two column grid to avoid scroll
ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 0 1em;
a {
@include ellipsis;
}
button {
span:not(.relative-date) {
@include ellipsis;
}
}
}
li:not(.show-all) a {
color: var(--primary);
display: flex;
}
}
}
}
}

5
app/assets/stylesheets/mobile/menu-panel.scss
View File

@ -30,6 +30,11 @@
button {
// accounts for menu "ears" 4px + border 1px
padding: 0.75em calc(0.5em + 4px + 1px);
@media screen and (max-height: 380px) {
// reduce padding to avoid scroll
padding-top: 0.5em;
padding-bottom: 0.5em;
}
}
}