Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

layout fixes

Browse source
This commit is contained in:
Henry Jameson 2022-04-10 19:29:10 +03:00
parent d9f8091ce6
commit 0f28c28760
1 changed files with 12 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/App.scss
View file

@ -123,7 +123,7 @@ nav {
} }
#main-scroller { #main-scroller {
top: var(--navbar-height); margin-top: var(--navbar-height);
grid-area: content; grid-area: content;
position: relative; position: relative;
} }
@ -174,8 +174,9 @@ nav {
margin: 0 auto; margin: 0 auto;
align-content: flex-start; align-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 10px; padding: 0 calc(var(--columnGap) / 2);
justify-content: center; justify-content: center;
min-height: 100vh;
.column { .column {
--___columnMargin: var(--columnGap); --___columnMargin: var(--columnGap);
@ -183,17 +184,17 @@ nav {
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-top: 10px;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
margin: 0 calc(var(--___columnMargin) / 2); margin: 0 calc(var(--___columnMargin) / 2);
padding: calc(var(--___columnMargin) / 2) 0;
row-gap: var(--___columnMargin); row-gap: var(--___columnMargin);
align-content: start; align-content: start;
&.-scrollable { &.-scrollable {
--___paddingIncrease: calc(var(--columnGap) / 2); --___paddingIncrease: calc(var(--columnGap) / 2);
padding-top: 10px; padding-top: calc(var(--columnGap) / 2);
position: sticky; position: sticky;
top: var(--navbar-height); top: var(--navbar-height);
max-height: calc(100vh - var(--navbar-height)); max-height: calc(100vh - var(--navbar-height));
@ -216,7 +217,7 @@ nav {
} }
.panel-heading.-sticky { .panel-heading.-sticky {
top: -10px; top: calc(var(--columnGap) / -2);
} }
} }
} }
@ -267,6 +268,12 @@ nav {
display: none; display: none;
} }
} }
&.-normal {
#notifs-column {
display: none;
}
}
} }
.text-center { .text-center {
@ -724,35 +731,6 @@ i[class*=icon-],
flex: 1; flex: 1;
} }
@media all and (min-width: 800px) {
.sidebar-bounds {
overflow: hidden;
max-height: 100vh;
width: 345px;
position: fixed;
margin-top: -10px;
.sidebar-scroller {
height: 96vh;
width: 365px;
padding-top: 10px;
padding-right: 50px;
overflow-x: hidden;
overflow-y: scroll;
}
.sidebar {
width: 345px;
}
}
.sidebar-flexer {
max-height: 96vh;
flex-shrink: 0;
flex-grow: 0;
}
}
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
.mobile-hidden { .mobile-hidden {
display: none; display: none;