Station button position changes, add song to queue fix and other tweaks

frontend/src/components/layout/MainFooter.vue

@@ -78,6 +78,7 @@ export default {
 	background-color: $white;
 	width: 100%;
 	height: 160px;
+	font-size: 16px;
 
 	@media (max-width: 650px) {
 		border-radius: 0;
@@ -99,7 +100,6 @@ export default {
 
 		a {
 			padding: 0 7px;
-			font-size: 18px;
 			color: $primary-color;
 
 			&:first-of-type {

frontend/src/pages/Station/components/Sidebar/Queue/QueueItem.vue

@@ -113,8 +113,8 @@ export default {
 	}
 
 	#thumbnail {
-		width: 70px;
-		height: 70px;
+		width: 60px;
+		height: 60px;
 	}
 
 	#song-info {
@@ -129,11 +129,11 @@ export default {
 		}
 
 		#song-title {
-			font-size: 22px;
+			font-size: 20px;
 		}
 
 		#song-artists {
-			font-size: 16px;
+			font-size: 14px;
 		}
 
 		#song-request-time {
@@ -143,7 +143,7 @@ export default {
 	}
 
 	#song-duration {
-		font-size: 22px;
+		font-size: 20px;
 	}
 
 	#remove-queue-item {

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

@@ -33,9 +33,7 @@
 			"
 		>
 			<i class="material-icons icon-with-button">queue</i>
-			<span class="optional-desktop-only-text">
-				Add Song To Queue
-			</span>
+			<span class="optional-desktop-only-text"> Add Song To Queue </span>
 		</button>
 		<div
 			id="queue-locked"
@@ -115,6 +113,8 @@ export default {
 }
 
 #queue {
+	background-color: #fff;
+	border-radius: 0 0 5px 5px;
 	::-webkit-scrollbar {
 		width: 10px;
 	}
@@ -133,30 +133,21 @@ export default {
 	}
 
 	#queue-items {
-		background-color: #fff;
-		border-radius: 0 0 5px 5px;
 		width: 100%;
 		overflow: auto;
 		max-height: calc(100% - 20px - 40px);
 		padding: 10px;
 
-		.nothing-here {
-			margin-bottom: 10px;
-		}
-
-		@media (min-width: 1040px) {
-			margin-bottom: 20px;
-		}
-
 		.queue-item:not(:last-of-type) {
 			margin-bottom: 10px;
 		}
 	}
 
 	button {
-		width: 100%;
+		width: calc(100% - 20px);
 		height: 40px;
 		border-radius: 5px;
+		margin: 10px;
 	}
 
 	#queue-locked {

frontend/src/pages/Station/index.vue

@@ -9,38 +9,50 @@
 			<div v-show="loading" class="progress" />
 			<div v-show="!loading && exists" id="station-inner-container">
 				<div id="about-station-container" class="quadrant">
-					<div class="row" id="station-name">
-						<h1>{{ station.displayName }}</h1>
-						<a href="#">
-							<!-- Favourite Station Button -->
-							<i
-								v-if="loggedIn && favoriteStation"
-								@click="unfavoriteStation($event)"
-								class="material-icons"
-								>star</i
-							>
-							<i
-								v-if="loggedIn && !favoriteStation"
-								@click="addfavoriteStation($event)"
-								class="material-icons"
-								>star_border</i
-							>
-						</a>
+					<div id="station-info">
+						<div class="row" id="station-name">
+							<h1>{{ station.displayName }}</h1>
+							<a href="#">
+								<!-- Favourite Station Button -->
+								<i
+									v-if="loggedIn && favoriteStation"
+									@click="unfavoriteStation($event)"
+									class="material-icons"
+									>star</i
+								>
+								<i
+									v-if="loggedIn && !favoriteStation"
+									@click="addfavoriteStation($event)"
+									class="material-icons"
+									>star_border</i
+								>
+							</a>
+						</div>
+						<p>{{ station.description }}</p>
 					</div>
 
-					<p>{{ station.description }}</p>
-
 					<div id="admin-buttons" v-if="isOwnerOrAdmin()">
-						<!-- (Admin) Station Settings Button -->
+						<!-- (Admin) Pause/Resume Button -->
 						<button
-							class="button is-primary"
-							@click="openSettings()"
+							class="button is-danger"
+							v-if="stationPaused"
+							@click="resumeStation()"
 						>
 							<i class="material-icons icon-with-button"
-								>settings</i
+								>play_arrow</i
 							>
 							<span class="optional-desktop-only-text">
-								Station settings
+								Resume Station
+							</span>
+						</button>
+						<button
+							class="button is-danger"
+							@click="pauseStation()"
+							v-else
+						>
+							<i class="material-icons icon-with-button">pause</i>
+							<span class="optional-desktop-only-text">
+								Pause Station
 							</span>
 						</button>
 
@@ -54,27 +66,16 @@
 							</span>
 						</button>
 
-						<!-- (Admin) Pause/Resume Button -->
+						<!-- (Admin) Station Settings Button -->
 						<button
-							class="button is-danger"
-							v-if="stationPaused"
-							@click="resumeStation()"
+							class="button is-primary"
+							@click="openSettings()"
 						>
 							<i class="material-icons icon-with-button"
-								>play_arrow</i
+								>settings</i
 							>
 							<span class="optional-desktop-only-text">
-								Resume Station
-							</span>
-						</button>
-						<button
-							class="button is-danger"
-							@click="pauseStation()"
-							v-else
-						>
-							<i class="material-icons icon-with-button">pause</i>
-							<span class="optional-desktop-only-text">
-								Pause Station
+								Station settings
 							</span>
 						</button>
 					</div>
@@ -321,6 +322,14 @@
 					{{ privatePlaylistQueueSelected }}</span
 				>
 				<span><b>Station paused</b>: {{ stationPaused }}</span>
+				<span
+					><b>Station Genres</b>:
+					{{ station.genres.join(", ") }}</span
+				>
+				<span
+					><b>Station Blacklisted Genres</b>:
+					{{ station.blacklistedGenres.join(", ") }}</span
+				>
 			</template>
 		</floating-box>
 
@@ -1561,12 +1570,13 @@ export default {
 	#station-inner-container {
 		display: grid;
 		height: 100%;
+		width: calc(100% - 25px);
 		grid-template-columns: 70% 30%;
 		grid-template-rows: 150px auto;
 		grid-template-areas:
 			"about-station currently-playing"
 			"player sidebar";
-		gap: 30px;
+		gap: 25px;
 
 		@media (min-width: 1040px) and (max-width: 2100px) {
 			#control-bar-container {
@@ -1612,35 +1622,38 @@ export default {
 			align-items: flex-start;
 			padding: 20px;
 			grid-area: about-station;
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
 
-			#station-name {
-				flex-direction: row !important;
+			#station-info {
+				flex-grow: 1;
 
-				h1 {
-					margin: 0;
-					font-size: 36px;
-					line-height: 0.8;
-				}
+				#station-name {
+					flex-direction: row !important;
+
+					h1 {
+						margin: 0;
+						font-size: 36px;
+						line-height: 0.8;
+					}
 
-				i {
-					margin-left: 10px;
-					font-size: 30px;
-					color: $yellow;
+					i {
+						margin-left: 10px;
+						font-size: 30px;
+						color: $yellow;
+					}
 				}
-			}
 
-			p {
-				max-width: 700px;
-				flex-grow: 1;
+				p {
+					max-width: 700px;
+					flex-grow: 1;
+				}
 			}
 
-			#admin-buttons {
-				margin-top: 15px;
-
-				@media (max-width: 450px) {
-					.optional-desktop-only-text {
-						display: none;
-					}
+			@media (max-width: 450px) {
+				#admin-buttons .optional-desktop-only-text {
+					display: none;
 				}
 			}
 		}