LogalDeveloper/owncast
0
Fork 0
Code Activity

Double scrollbars (#2509)

Browse Source 
* hide footer on mobile to avoid double scrollbars

* fix double scrollbars on desktop by removing scroll behaviour from main section

* add scrollbar styles to body and html

* add vertical scrolling back to main section

* prevent header from collapsing and messing around with scrolling

* prevent body from scrolling for main layout

* move tablet breakpoint into breakpoint mixin

* preffify code

* remove js height calc for lower section on mobile and use css

* enable scrolling within a tab on mobile

* remove scrollbar from main section on mobile

* adjust header height on mobile

* add react use to web

* lock body scroll for main layout
This commit is contained in:
André Rusakow
2022-12-29 19:14:12 +01:00
committed by GitHub
parent ccca93695a
commit 0a602edf5e
10 changed files with 259 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/styles/globals.scss
View File

@@ -9,7 +9,7 @@
:root {
--content-padding: 12px;
--module-spacing: 12px; // margin size between lines of stuff, if needed
--header-height: 2.5rem; // needed for making main content scrollable;
--header-height: 5.375rem; // needed for making main content scrollable;
--footer-height: 2.5rem; // needed for making main content scrollable;
--content-height: calc(100vh - var(--header-height));
}
@@ -26,7 +26,6 @@ body {
font-family: var(--theme-text-body-font-family);
line-height: 1.5em;
margin: 0;
background-color: var(--theme-color-background-main);
div,

5
web/styles/mixins.scss
View File

@@ -10,6 +10,11 @@
@content;
}
}
@if $breakpoint == tablet {
@media only screen and (max-width: 768px) {
@content;
}
}
@if $breakpoint == mobile {
@media only screen and (max-width: 481px) {
@content;