tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Fix intermediary responsive layout, accessibility on navigation in web UI

Browse Source 
Port 0765324622 to glitch-soc

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2022-10-09 15:55:32 +02:00
committed by Claire
parent dea951cce8
commit c36f28ba77
9 changed files with 104 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/javascript/flavours/glitch/styles/components/single_column.scss
View File

@ -275,12 +275,14 @@
}
@media screen and (max-width: $no-gap-breakpoint - 1px) {
$sidebar-width: 285px;
.with-fab .scrollable .item-list:last-child {
padding-bottom: 5.25rem;
}
.columns-area__panels__main {
width: calc(100% - 55px);
width: calc(100% - $sidebar-width);
}
.columns-area__panels {
@ -288,10 +290,10 @@
}
.columns-area__panels__pane--navigational {
min-width: 55px;
min-width: $sidebar-width;
.columns-area__panels__pane__inner {
width: 55px;
width: $sidebar-width;
}
.navigation-panel {
@ -301,7 +303,6 @@
height: 100vh;
}
.column-link span,
.navigation-panel__sign-in-banner,
.navigation-panel__logo,
.getting-started__trends {
@ -326,11 +327,31 @@
}
}
@media screen and (max-width: $no-gap-breakpoint - 285px - 1px) {
$sidebar-width: 55px;
.columns-area__panels__main {
width: calc(100% - $sidebar-width);
}
.columns-area__panels__pane--navigational {
min-width: $sidebar-width;
.columns-area__panels__pane__inner {
width: $sidebar-width;
}
.column-link span {
display: none;
}
}
}
.explore__search-header {
display: none;
}
@media screen and (max-width: $no-gap-breakpoint + 285px - 1px) {
@media screen and (max-width: $no-gap-breakpoint - 1px) {
.columns-area__panels__pane--compositional {
display: none;
}