diff options
Diffstat (limited to 'bwlpMonitor_template.html')
| -rw-r--r-- | bwlpMonitor_template.html | 116 |
1 files changed, 86 insertions, 30 deletions
diff --git a/bwlpMonitor_template.html b/bwlpMonitor_template.html index 01bb0fb..ec61c48 100644 --- a/bwlpMonitor_template.html +++ b/bwlpMonitor_template.html @@ -1,21 +1,22 @@ <!DOCTYPE html> <html> <head> + <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/x-icon" href="img/favicon.ico"> <title>bwLp Status Monitor</title> </head> <body> <div id="header"> - <div id="header_left"> + <div id="header_left" class="header_element"> <a href=""> <img id="header_image" src="img/logo_bwlehrpool.png" alt="bwLehrpool"> </a> </div> - <div id="header_center"> + <div id="header_center" class="header_element"> <label id="header_label">Status Monitor</label> </div> - <div id="header_right"> + <div id="header_right" class="header_element"> <div> <a href="https://www.bwlehrpool.de/doku.php/start"> <img id="header_wiki" src="img/wiki_bwlehrpool.png" alt="bwLehrpool"> @@ -28,7 +29,7 @@ <div id="content"> %CONTENT% </div> - <div id="log_wrapper"> + <div id="log_wrapper" class="log_wrapper"> <div id="log"> %LOG% </div> @@ -41,55 +42,63 @@ <script> const urlParams = new URLSearchParams(window.location.search) + const horizontal = urlParams.get('horizontal') + const vertical = urlParams.get('vertical') + + // No header removes the header from the site. const noheader = urlParams.get('noheader') if (noheader != null) { document.getElementById('header').style.visibility = 'hidden' document.getElementById('body').style.marginTop = '0px' } - 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' - logWrapper.style.height = '100%' - logWrapper.style.boxShadow = 'unset' - logWrapper.style.margin = 'unset' + // 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 log = document.getElementById('log') - log.style.height = 'unset' - log.style.setProperty('--wrap', 'normal') + const logWrapper = document.getElementById('log_wrapper') + logWrapper.style.maxHeight = 'unset' + logWrapper.style.maxWidth = 'unset' + logWrapper.style.display = 'unset' + logWrapper.style.height = '100%' + logWrapper.style.boxShadow = 'unset' + logWrapper.style.margin = 'unset' - const content = document.getElementById('content') - content.style.height = '100%' - content.style.boxShadow = 'unset' - content.style.maxWidth = 'unset' + const log = document.getElementById('log') + log.style.height = 'unset' + log.style.setProperty('--wrap', 'normal') - var media = window.matchMedia("(min-width: 1500px)") - borderlessMedia(media, logWrapper, content) - media.addListener(borderlessMedia) - } + const content = document.getElementById('content') + content.style.height = '100%' + content.style.boxShadow = 'unset' + content.style.maxWidth = 'unset' + var media = window.matchMedia("(min-width: 1500px)") + borderlessMedia(media, logWrapper, content) + media.addListener(borderlessMedia) + } + } function borderlessMedia(media) { const logWrapper = document.getElementById('log_wrapper') const content = document.getElementById('content') - if (media.matches) { + if (horizontal != null || (media.matches && vertical === null)) { logWrapper.style.borderTop = 'unset' logWrapper.style.borderLeft = '3px solid #8a8a8a' content.style.flexWrap = 'nowrap' - } else { + } else if (vertical != null || (!media.matches && horizontal === null)) { logWrapper.style.borderLeft = 'unset' logWrapper.style.borderTop = '3px solid #8a8a8a' content.style.flexWrap = 'wrap' } } + // Autorefresh the site. var autorefresh = urlParams.get('autorefresh') var autorefresh = parseInt(autorefresh) if (Number.isInteger(autorefresh)) { @@ -97,4 +106,51 @@ location.reload(); }, autorefresh * 1000); } + + // Remove images in the header if the windows is to small. + var mediaMaxWidth = window.matchMedia("(max-width: 850px)") + maxWidth(mediaMaxWidth) + mediaMaxWidth.addListener(maxWidth) + function maxWidth(media) { + const header = document.getElementById('header') + if (media.matches) { + header.style.setProperty('--header-display', 'none') + } else { + header.style.setProperty('--header-display', 'flex') + } + } + + // Side By Side / OU modes & media querys. + 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)) { + body.style.flexDirection = 'row' + logWrapper.style.marginLeft = '40px' + logWrapper.style.marginTop = '0px' + logWrapper.style.maxWidth = '60vw' + logWrapper.style.maxHeight = 'calc(100vh - 120px)' + content.style.width = '30%' + content.style.height = 'calc(100vh - 120px)' + content.style.minHeight = '51px' + } else if (horizontal === null && (!media.matches || vertical != null)) { + body.style.flexDirection = 'column' + logWrapper.style.marginLeft = '0px' + logWrapper.style.marginTop = '60px' + logWrapper.style.maxWidth = '80vw' + logWrapper.style.maxHeight = '80vh' + 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)" + } + borderless() + } </script>
\ No newline at end of file |