Browse Source

Made some small adjustments to station page responsiveness and centered No song queued in queue sidebar on station page

Kristian Vos 3 years ago
parent
commit
7a138d2b66

+ 4 - 0
frontend/src/components/Queue.vue

@@ -274,6 +274,10 @@ export default {
 	background-color: var(--white);
 	border-radius: 0 0 5px 5px;
 
+	.scrollable-list {
+		max-height: calc(100% - 20px);
+	}
+
 	.actionable-button-hidden {
 		max-height: 100%;
 	}

+ 4 - 0
frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -314,6 +314,10 @@ export default {
 	margin-bottom: 20px;
 	border-radius: 0 0 5px 5px;
 	max-height: 100%;
+
+	.scrollable-list {
+		max-height: calc(100% - 60px);
+	}
 }
 
 .night-mode {

+ 8 - 1
frontend/src/pages/Station/Sidebar/index.vue

@@ -90,6 +90,10 @@ export default {
 	border-top: 0;
 }
 
+#queue {
+	padding-bottom: 40px;
+}
+
 #tab-selection {
 	display: flex;
 
@@ -113,6 +117,10 @@ export default {
 	}
 }
 
+/deep/ .nothing-here-text {
+	height: 100%;
+}
+
 /deep/ .tab-actionable-button {
 	width: calc(100% - 20px);
 	height: 40px;
@@ -139,7 +147,6 @@ export default {
 /deep/ .scrollable-list {
 	width: 100%;
 	overflow: auto;
-	max-height: calc(100% - 20px - 40px);
 	padding: 10px;
 
 	.song-item:not(:last-of-type) {

+ 39 - 4
frontend/src/pages/Station/index.vue

@@ -2057,6 +2057,11 @@ export default {
 					height: 100%;
 				}
 			}
+
+			> div:only-child {
+				flex: 1 !important;
+				flex-basis: 100% !important;
+			}
 		}
 
 		.player-container {
@@ -2513,7 +2518,26 @@ export default {
 	}
 }
 
-@media (max-width: 1350px) {
+// 	// #current-next-row {
+// 	// 	flex-direction: column;
+
+// 	// 	> div {
+// 	// 		flex: 1 !important;
+// 	// 	}
+// 	// }
+// }
+
+@media (max-width: 1700px) {
+	#current-next-row {
+		flex-direction: column !important;
+
+		> div {
+			flex: 1 !important;
+		}
+	}
+}
+
+@media (max-width: 1500px) {
 	#mobile-progress-animation {
 		display: block;
 	}
@@ -2523,11 +2547,11 @@ export default {
 	}
 
 	#station-outer-container {
-		padding: 10px;
-		max-width: 700px;
+		// padding: 10px;
+		max-width: 1500px;
 
 		#station-inner-container {
-			flex-direction: column-reverse;
+			flex-direction: row;
 
 			#station-left-column {
 				#about-station-container #admin-buttons {
@@ -2581,6 +2605,17 @@ export default {
 	}
 }
 
+@media (max-width: 1200px) {
+	#station-outer-container {
+		max-width: 1200px;
+
+		#station-inner-container {
+			flex-direction: column-reverse;
+			flex-wrap: nowrap;
+		}
+	}
+}
+
 @media (max-width: 990px) {
 	#station-outer-container {
 		min-height: calc(