Add nofooter param, small design fixes

Kind of smartphone optimisation
Alignment fix
JS media listeners were overriding each other on reload

2 files changed, 57 insertions, 16 deletions

diff --git a/style.css b/style.css
index ee868d9..cf569aa 100644
--- a/style.css
+++ b/style.css
@@ -87,7 +87,7 @@ a:hover {
 #body {
   display: flex;
   flex-direction: column;
-  align-items: top;
+  align-items: normal;
   margin-top: 60px;
   padding: 30px;
 }
@@ -96,13 +96,13 @@ a:hover {
   display: flex;
   flex-direction: column;
   max-width: 800px;
-  min-width: 500px;
   width: 100%;
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
   background-color: #f5f5f5;
   overflow: auto;
   min-height: 150px;
   flex-shrink: 1;
+  min-width: 500px;
 }
 
 .content_item {
@@ -208,3 +208,16 @@ a:hover {
   color: #999;
 }
 
+@media (max-width: 871px) {
+  #body {
+    padding: unset;
+    width: 100%;
+  }
+  #log_wrapper {
+    max-width: unset;
+    margin-top: 20px;
+  }
+  #content {
+    min-width: unset;
+  }
+}
\ No newline at end of file
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()
 	}