forked from srxl/akkoma-fe
layout fixes
This commit is contained in:
parent
d9f8091ce6
commit
0f28c28760
1 changed files with 12 additions and 34 deletions
46
src/App.scss
46
src/App.scss
|
@ -123,7 +123,7 @@ nav {
|
|||
}
|
||||
|
||||
#main-scroller {
|
||||
top: var(--navbar-height);
|
||||
margin-top: var(--navbar-height);
|
||||
grid-area: content;
|
||||
position: relative;
|
||||
}
|
||||
|
@ -174,8 +174,9 @@ nav {
|
|||
margin: 0 auto;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 10px;
|
||||
padding: 0 calc(var(--columnGap) / 2);
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
|
||||
.column {
|
||||
--___columnMargin: var(--columnGap);
|
||||
|
@ -183,17 +184,17 @@ nav {
|
|||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 10px;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 1;
|
||||
margin: 0 calc(var(--___columnMargin) / 2);
|
||||
padding: calc(var(--___columnMargin) / 2) 0;
|
||||
row-gap: var(--___columnMargin);
|
||||
align-content: start;
|
||||
|
||||
&.-scrollable {
|
||||
--___paddingIncrease: calc(var(--columnGap) / 2);
|
||||
|
||||
padding-top: 10px;
|
||||
padding-top: calc(var(--columnGap) / 2);
|
||||
position: sticky;
|
||||
top: var(--navbar-height);
|
||||
max-height: calc(100vh - var(--navbar-height));
|
||||
|
@ -216,7 +217,7 @@ nav {
|
|||
}
|
||||
|
||||
.panel-heading.-sticky {
|
||||
top: -10px;
|
||||
top: calc(var(--columnGap) / -2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -267,6 +268,12 @@ nav {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.-normal {
|
||||
#notifs-column {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-center {
|
||||
|
@ -724,35 +731,6 @@ i[class*=icon-],
|
|||
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) {
|
||||
.mobile-hidden {
|
||||
display: none;
|
||||
|
|
Loading…
Reference in a new issue