diff options
Diffstat (limited to 'template.html')
| -rw-r--r-- | template.html | 56 |
1 files changed, 42 insertions, 14 deletions
diff --git a/template.html b/template.html index b0c1d3c..70720a6 100644 --- a/template.html +++ b/template.html @@ -45,25 +45,34 @@ const horizontal = urlParams.get('horizontal') const vertical = urlParams.get('vertical') const noheader = urlParams.get('noheader') + const nofooter = urlParams.get('nofooter') var autorefresh = urlParams.get('autorefresh') var autorefresh = parseInt(autorefresh) + // Often used elements + const body = document.getElementById('body') + const logWrapper = document.getElementById('log_wrapper') + const content = document.getElementById('content') + // No header removes the header from the site. if (noheader != null) { document.getElementById('header').style.visibility = 'hidden' document.getElementById('body').style.marginTop = '0px' } + // No footer removes the footer from the site. + if (nofooter != null) { + document.getElementsByClassName('now-footer')[0].style.display = 'none' + } + // Borderless mode for the 4k TV. function borderless() { const borderless = urlParams.get('borderless') if (borderless != null) { - const body = document.getElementById('body') body.style.padding = '0px' body.style.width = '100%' body.style.height = '100%' - const logWrapper = document.getElementById('log_wrapper') logWrapper.style.maxHeight = 'unset' logWrapper.style.maxWidth = 'unset' logWrapper.style.display = 'unset' @@ -75,7 +84,6 @@ log.style.height = 'unset' log.style.setProperty('--wrap', 'normal') - const content = document.getElementById('content') content.style.height = '100%' content.style.boxShadow = 'unset' content.style.maxWidth = 'unset' @@ -85,10 +93,8 @@ media.addListener(borderlessMedia) } } - function borderlessMedia(media) { - const logWrapper = document.getElementById('log_wrapper') - const content = document.getElementById('content') + function borderlessMedia(media) { if (horizontal != null || (media.matches && vertical === null)) { logWrapper.style.borderTop = 'unset' logWrapper.style.borderLeft = '3px solid #8a8a8a' @@ -121,14 +127,12 @@ } // Side By Side / OU modes & media querys. - var mediaMinWidth = window.matchMedia("(min-width: 1500px)") + var mediaMinWidth = window.matchMedia('(min-width: 1500px)') minWidth(mediaMinWidth) mediaMinWidth.addListener(minWidth) function minWidth(media) { - const body = document.getElementById('body') - const logWrapper = document.getElementsByClassName('log_wrapper')[0] - const content = document.getElementById('content') if (vertical === null && (media.matches || horizontal != null)) { + // Side by side body.style.flexDirection = 'row' logWrapper.style.marginLeft = '40px' logWrapper.style.marginTop = '0px' @@ -137,7 +141,17 @@ content.style.width = '30%' content.style.height = 'unset' content.style.minHeight = '51px' - } else if (horizontal === null && (!media.matches || vertical != null)) { + body.style.alignItems = 'normal' + } + borderless() + } + + var mediaOU = window.matchMedia('(max-width: 1500px)') + overUnder(mediaOU) + mediaOU.addListener(overUnder) + function overUnder(media) { + if (horizontal === null && (media.matches || vertical != null)) { + // Over / under body.style.flexDirection = 'column' logWrapper.style.marginLeft = '0px' logWrapper.style.marginTop = '60px' @@ -146,9 +160,23 @@ content.style.width = '100%' content.style.height = 'unset' content.style.minHeight = '150px' - } else { - // Who uses horizontal and vertical at the same time! Lul. - body.style.transform = "rotate(-45deg)" + body.style.alignItems = 'center' + } + borderless() + } + + if (horizontal !== null && vertical !== null) { + // Who uses horizontal and vertical at the same time! Lul. + body.style.transform = "rotate(-45deg)" + } + + var mediaSmall = window.matchMedia("(max-width: 871px)") + smallWidth(mediaSmall) + mediaSmall.addListener(smallWidth) + function smallWidth(media) { + if (media.matches) { + logWrapper.style.removeProperty('max-width') + logWrapper.style.removeProperty('margin-top') } borderless() } |