Explorar o código

fix(Station page): scaling on different device widths/heights much better, other small fixes

Signed-off-by: Jonathan <theflametrooper@gmail.com>
Jonathan %!s(int64=4) %!d(string=hai) anos
pai
achega
4448e882ca

+ 1 - 1
frontend/src/pages/Station/components/CurrentlyPlaying.vue

@@ -88,7 +88,7 @@ export default {
 
 	.thumbnail {
 		min-width: 140px;
-		min-height: 140px;
+		max-height: 140px;
 	}
 
 	#yt-thumbnail {

+ 5 - 21
frontend/src/pages/Station/index.vue

@@ -55,7 +55,7 @@
 									bug_report
 								</i>
 								<span class="optional-desktop-only-text">
-									Toggle debug player box
+									Debug player box
 								</span>
 							</button>
 
@@ -1427,7 +1427,8 @@ export default {
 .night-mode {
 	#currently-playing-container,
 	#about-station-container,
-	#control-bar-container {
+	#control-bar-container,
+	.player-container.nothing-here {
 		background-color: #222 !important;
 	}
 
@@ -1438,14 +1439,6 @@ export default {
 	}
 }
 
-/** Ultrawide */
-
-@media (min-height: 1200px) {
-	#station-inner-container {
-		transform: scale(1.1);
-	}
-}
-
 #station-outer-container {
 	margin: 0 auto;
 	max-width: 100%;
@@ -1507,7 +1500,6 @@ export default {
 
 		@media (min-height: 1050px) {
 			justify-content: center;
-			height: calc(100vh - 64px - 5px);
 		}
 
 		@media (min-width: 1040px) {
@@ -1524,13 +1516,6 @@ export default {
 			}
 		}
 
-		@media (min-width: 1450px) and (max-width: 2200px) {
-			#about-station-container,
-			.player-container {
-				width: 1400px !important;
-			}
-		}
-
 		@media (min-width: 1040px) and (max-width: 1950px) {
 			#control-bar-container {
 				.optional-desktop-only-text {
@@ -1605,9 +1590,7 @@ export default {
 				}
 
 				p {
-					font-size: 14px;
 					max-width: 700px;
-					flex-grow: 1;
 				}
 
 				#admin-buttons {
@@ -1628,9 +1611,10 @@ export default {
 
 		#lower-row {
 			margin-top: 20px;
-			flex-grow: 1;
+			height: 90%;
 
 			.player-container {
+				width: 1400px;
 				background-color: #fff;
 				display: flex;
 				flex-direction: column;