Merge branch 'kris-responsive-station' into polishing

frontend/dist/index.css

@@ -4,11 +4,16 @@
 	font-style: normal;
 	font-weight: 400;
 	src: url("/fonts/inter-v3-latin-regular.eot"); /* IE9 Compat Modes */
-	src: local(""), url("/fonts/inter-v3-latin-regular.eot?#iefix") format("embedded-opentype"),
+	src: local(""),
+		url("/fonts/inter-v3-latin-regular.eot?#iefix")
+			format("embedded-opentype"),
 		/* IE6-IE8 */ url("/fonts/inter-v3-latin-regular.woff2") format("woff2"),
-		/* Super Modern Browsers */ url("/fonts/inter-v3-latin-regular.woff") format("woff"),
-		/* Modern Browsers */ url("/fonts/inter-v3-latin-regular.ttf") format("truetype"),
-		/* Safari, Android, iOS */ url("/fonts/inter-v3-latin-regular.svg#Inter") format("svg"); /* Legacy iOS */
+		/* Super Modern Browsers */ url("/fonts/inter-v3-latin-regular.woff")
+			format("woff"),
+		/* Modern Browsers */ url("/fonts/inter-v3-latin-regular.ttf")
+			format("truetype"),
+		/* Safari, Android, iOS */
+			url("/fonts/inter-v3-latin-regular.svg#Inter") format("svg"); /* Legacy iOS */
 }
 
 /* inter-200 - latin */
@@ -17,11 +22,15 @@
 	font-style: normal;
 	font-weight: 200;
 	src: url("/fonts/inter-v3-latin-200.eot"); /* IE9 Compat Modes */
-	src: local(""), url("/fonts/inter-v3-latin-200.eot?#iefix") format("embedded-opentype"),
+	src: local(""),
+		url("/fonts/inter-v3-latin-200.eot?#iefix") format("embedded-opentype"),
 		/* IE6-IE8 */ url("/fonts/inter-v3-latin-200.woff2") format("woff2"),
-		/* Super Modern Browsers */ url("/fonts/inter-v3-latin-200.woff") format("woff"),
-		/* Modern Browsers */ url("/fonts/inter-v3-latin-200.ttf") format("truetype"),
-		/* Safari, Android, iOS */ url("/fonts/inter-v3-latin-200.svg#Inter") format("svg"); /* Legacy iOS */
+		/* Super Modern Browsers */ url("/fonts/inter-v3-latin-200.woff")
+			format("woff"),
+		/* Modern Browsers */ url("/fonts/inter-v3-latin-200.ttf")
+			format("truetype"),
+		/* Safari, Android, iOS */ url("/fonts/inter-v3-latin-200.svg#Inter")
+			format("svg"); /* Legacy iOS */
 }
 
 /* inter-800 - latin */
@@ -30,11 +39,15 @@
 	font-style: normal;
 	font-weight: 800;
 	src: url("/fonts/inter-v3-latin-800.eot"); /* IE9 Compat Modes */
-	src: local(""), url("/fonts/inter-v3-latin-800.eot?#iefix") format("embedded-opentype"),
+	src: local(""),
+		url("/fonts/inter-v3-latin-800.eot?#iefix") format("embedded-opentype"),
 		/* IE6-IE8 */ url("/fonts/inter-v3-latin-800.woff2") format("woff2"),
-		/* Super Modern Browsers */ url("/fonts/inter-v3-latin-800.woff") format("woff"),
-		/* Modern Browsers */ url("/fonts/inter-v3-latin-800.ttf") format("truetype"),
-		/* Safari, Android, iOS */ url("/fonts/inter-v3-latin-800.svg#Inter") format("svg"); /* Legacy iOS */
+		/* Super Modern Browsers */ url("/fonts/inter-v3-latin-800.woff")
+			format("woff"),
+		/* Modern Browsers */ url("/fonts/inter-v3-latin-800.ttf")
+			format("truetype"),
+		/* Safari, Android, iOS */ url("/fonts/inter-v3-latin-800.svg#Inter")
+			format("svg"); /* Legacy iOS */
 }
 
 /* inter-600 - latin */
@@ -43,11 +56,15 @@
 	font-style: normal;
 	font-weight: 600;
 	src: url("/fonts/inter-v3-latin-600.eot"); /* IE9 Compat Modes */
-	src: local(""), url("/fonts/inter-v3-latin-600.eot?#iefix") format("embedded-opentype"),
+	src: local(""),
+		url("/fonts/inter-v3-latin-600.eot?#iefix") format("embedded-opentype"),
 		/* IE6-IE8 */ url("/fonts/inter-v3-latin-600.woff2") format("woff2"),
-		/* Super Modern Browsers */ url("/fonts/inter-v3-latin-600.woff") format("woff"),
-		/* Modern Browsers */ url("/fonts/inter-v3-latin-600.ttf") format("truetype"),
-		/* Safari, Android, iOS */ url("/fonts/inter-v3-latin-600.svg#Inter") format("svg"); /* Legacy iOS */
+		/* Super Modern Browsers */ url("/fonts/inter-v3-latin-600.woff")
+			format("woff"),
+		/* Modern Browsers */ url("/fonts/inter-v3-latin-600.ttf")
+			format("truetype"),
+		/* Safari, Android, iOS */ url("/fonts/inter-v3-latin-600.svg#Inter")
+			format("svg"); /* Legacy iOS */
 }
 
 /* pacifico-regular - latin */
@@ -56,11 +73,17 @@
 	font-style: normal;
 	font-weight: 400;
 	src: url("/fonts/pacifico-v17-latin-regular.eot"); /* IE9 Compat Modes */
-	src: local(""), url("/fonts/pacifico-v17-latin-regular.eot?#iefix") format("embedded-opentype"),
-		/* IE6-IE8 */ url("/fonts/pacifico-v17-latin-regular.woff2") format("woff2"),
-		/* Super Modern Browsers */ url("/fonts/pacifico-v17-latin-regular.woff") format("woff"),
-		/* Modern Browsers */ url("/fonts/pacifico-v17-latin-regular.ttf") format("truetype"),
-		/* Safari, Android, iOS */ url("/fonts/pacifico-v17-latin-regular.svg#Pacifico") format("svg"); /* Legacy iOS */
+	src: local(""),
+		url("/fonts/pacifico-v17-latin-regular.eot?#iefix")
+			format("embedded-opentype"),
+		/* IE6-IE8 */ url("/fonts/pacifico-v17-latin-regular.woff2")
+			format("woff2"),
+		/* Super Modern Browsers */
+			url("/fonts/pacifico-v17-latin-regular.woff") format("woff"),
+		/* Modern Browsers */ url("/fonts/pacifico-v17-latin-regular.ttf")
+			format("truetype"),
+		/* Safari, Android, iOS */
+			url("/fonts/pacifico-v17-latin-regular.svg#Pacifico") format("svg"); /* Legacy iOS */
 }
 
 @font-face {
@@ -198,7 +221,7 @@ h6 {
 }
 
 .white {
-	background-color: #FFFFFF !important;
+	background-color: #ffffff !important;
 }
 
 .btn-search {

frontend/src/pages/Station/Sidebar/index.vue

@@ -113,6 +113,16 @@ export default {
 	}
 }
 
+/deep/ .nothing-here-text {
+	height: 100%;
+}
+
+/deep/ .tab {
+	.nothing-here-text:not(:only-child) {
+		height: calc(100% - 40px);
+	}
+}
+
 /deep/ .tab-actionable-button {
 	width: calc(100% - 20px);
 	height: 40px;
@@ -138,8 +148,8 @@ export default {
 
 /deep/ .scrollable-list {
 	width: 100%;
+	max-height: calc(100% - 40px - 20px);
 	overflow: auto;
-	max-height: calc(100% - 20px - 40px);
 	padding: 10px;
 
 	.song-item:not(:last-of-type) {

frontend/src/pages/Station/index.vue

@@ -1861,6 +1861,16 @@ export default {
 };
 </script>
 
+<style lang="scss">
+#stationPlayer {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+</style>
+
 <style lang="scss" scoped>
 #page-loader-container {
 	height: inherit;
@@ -1954,14 +1964,14 @@ export default {
 #station-outer-container {
 	margin: 0 auto;
 	padding: 20px 40px;
-	height: 100%;
+	min-height: calc(100vh - 64px);
 	width: 100%;
 	max-width: 1800px;
 	display: flex;
 
 	#station-inner-container {
-		height: 100%;
 		width: 100%;
+		// height: fit-content;
 		min-height: calc(100vh - 428px);
 		display: flex;
 		flex-direction: row;
@@ -1981,7 +1991,6 @@ export default {
 		.quadrant {
 			border-radius: 5px;
 			margin: 10px;
-			flex-grow: 1;
 		}
 
 		.quadrant:not(#sidebar-container) {
@@ -2040,7 +2049,7 @@ export default {
 		#current-next-row {
 			display: flex;
 			flex-direction: row;
-			max-width: calc(100vw - 40px);
+			// max-width: calc(100vw - 40px);
 
 			#currently-playing-container,
 			#next-up-container {
@@ -2053,6 +2062,11 @@ export default {
 					height: 100%;
 				}
 			}
+
+			> div:only-child {
+				flex: 1 !important;
+				flex-basis: 100% !important;
+			}
 		}
 
 		.player-container {
@@ -2063,15 +2077,18 @@ export default {
 			border: 1px solid var(--light-grey-3);
 			border-radius: 5px;
 			overflow: hidden;
-			flex-grow: 1;
 
 			&.nothing-here-text {
 				margin: 10px;
+				flex: 1;
+				min-height: 487px;
 			}
 
 			#video-container {
-				width: 100%;
-				height: 100%;
+				position: relative;
+				padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
+				height: 0;
+				overflow: hidden;
 
 				.player-cannot-autoplay {
 					position: relative;
@@ -2097,7 +2114,6 @@ export default {
 				height: 7px;
 				display: block;
 				width: 100%;
-				// overflow: hidden;
 
 				#seeker-bar {
 					background-color: var(--primary-color);
@@ -2313,6 +2329,8 @@ export default {
 			border-top: 0;
 			position: relative;
 			height: inherit;
+			flex-grow: 1;
+			min-height: 350px;
 		}
 	}
 }
@@ -2504,7 +2522,17 @@ export default {
 	}
 }
 
-@media (max-width: 950px) {
+@media (max-width: 1700px) {
+	#current-next-row {
+		flex-direction: column !important;
+
+		> div {
+			flex: 1 !important;
+		}
+	}
+}
+
+@media (max-width: 1500px) {
 	#mobile-progress-animation {
 		display: block;
 	}
@@ -2514,11 +2542,10 @@ export default {
 	}
 
 	#station-outer-container {
-		padding: 10px;
-		max-width: 700px;
+		max-width: 1500px;
 
 		#station-inner-container {
-			flex-direction: column;
+			flex-direction: row;
 
 			#station-left-column {
 				#about-station-container #admin-buttons {
@@ -2571,4 +2598,24 @@ export default {
 		}
 	}
 }
+
+@media (max-width: 1200px) {
+	#station-outer-container {
+		max-width: 900px;
+		padding: 0;
+
+		#station-inner-container {
+			flex-direction: column-reverse;
+			flex-wrap: nowrap;
+		}
+	}
+}
+
+@media (max-width: 990px) {
+	#station-outer-container {
+		min-height: calc(
+			100vh - 256px
+		); // Height of nav (64px) + height of footer (190px)
+	}
+}
 </style>