implement reactive breakpoints

+ fix breaking queue page when there's no data
This commit is contained in:
geoffrey45
2022-09-10 20:15:20 +03:00
parent eb774eeaeb
commit 32b309b6ee
7 changed files with 74 additions and 25 deletions
+35 -16
View File
@@ -13,23 +13,32 @@
gap: 1rem;
margin: $small auto;
@include for-desktop-down {
grid-template-columns: min-content 1fr 26rem;
}
// @include for-desktop-down {
// grid-template-columns: min-content 1fr 26rem;
// }
@include tablet-landscape {
grid-template-columns: min-content 1fr;
grid-template-areas:
"l-sidebar nav"
"l-sidebar content"
"l-sidebar content"
"l-sidebar content";
.r-sidebar,
#tabs,
#gsearch-input {
display: none;
}
}
// @include tablet-landscape {
// grid-template-columns: min-content 1fr;
// grid-template-areas:
// "l-sidebar nav"
// "l-sidebar content"
// "l-sidebar content"
// "l-sidebar content";
// .r-sidebar,
// #tabs,
// #gsearch-input {
// display: none;
// }
// }
}
#app-grid.isSmall {
grid-template-columns: min-content 1fr;
grid-template-areas:
"l-sidebar nav"
"l-sidebar content"
"l-sidebar content"
"l-sidebar content";
}
#app-grid.showAltNP {
@@ -63,6 +72,16 @@
}
}
#app-grid.isSmall #acontent {
margin-right: -$small;
padding-right: calc($small - 1px);
}
#app-grid.disableSidebar #acontent {
margin-right: -$small;
padding-right: calc($small - 1px);
}
#tabs {
grid-area: tabs;
height: 3.5rem;
+18
View File
@@ -5,4 +5,22 @@
margin-right: -1rem;
padding-right: 1rem;
}
#app-grid.isSmall #acontent {
margin-right: -$small;
padding-right: $medium;
}
#app-grid.isSmall #page-search {
margin-right: $smaller;
}
#app-grid.disableSidebar #acontent {
margin-right: -$small;
padding-right: $medium;
}
#app-grid.disableSidebar #page-search {
margin-right: $smaller;
}
}