Browse Source

Made station page under 1200px more responsive

Kristian Vos 3 years ago
parent
commit
1b69c0b047
2 changed files with 21 additions and 1 deletions
  1. 10 0
      frontend/dist/index.css
  2. 11 1
      frontend/src/pages/Station/index.vue

+ 10 - 0
frontend/dist/index.css

@@ -241,3 +241,13 @@ a.nav-item.is-tab {
 strong {
 	color: inherit;
 }
+
+@media (max-width: 1200px) {
+	#stationPlayer {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+}

+ 11 - 1
frontend/src/pages/Station/index.vue

@@ -2610,12 +2610,22 @@ export default {
 
 @media (max-width: 1200px) {
 	#station-outer-container {
-		max-width: 1200px;
+		max-width: 900px;
 		padding: 0;
 
 		#station-inner-container {
 			flex-direction: column-reverse;
 			flex-wrap: nowrap;
+
+			.player-container {
+				#video-container {
+					position: relative;
+					padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
+					height: 0;
+					overflow: hidden;
+					width: unset;
+				}
+			}
 		}
 	}
 }