refactor(Station page): now using css grid, which allows for greater flexibility on mobile

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/pages/Station/components/CurrentlyPlaying.vue

@@ -30,7 +30,12 @@
 			<h5 id="song-artists" v-if="currentSong.artists">
 				{{ currentSong.artists }}
 			</h5>
-			<p id="song-request-time">
+			<p
+				id="song-request-time"
+				v-if="
+					station.type === 'community' && station.partyMode === true
+				"
+			>
 				Requested
 				<strong>{{
 					formatDistance(
@@ -78,7 +83,8 @@ import { formatDistance, parseISO } from "date-fns";
 export default {
 	computed: {
 		...mapState("station", {
-			currentSong: state => state.currentSong
+			currentSong: state => state.currentSong,
+			station: state => state.station
 		}),
 		...mapState({
 			loggedIn: state => state.user.auth.loggedIn
@@ -104,8 +110,8 @@ export default {
 	padding: 10px;
 
 	.thumbnail {
-		min-width: 140px;
-		max-height: 140px;
+		min-width: 120px;
+		max-height: 120px;
 		height: 100%;
 		position: relative;
 
@@ -139,14 +145,6 @@ export default {
 				padding: 0 10px !important;
 			}
 		}
-
-		#song-info {
-			margin-left: 0 !important;
-		}
-
-		.thumbnail {
-			display: none;
-		}
 	}
 
 	#song-info {

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

@@ -134,7 +134,6 @@ export default {
 
 	#queue-items {
 		background-color: #fff;
-		border: 1px solid $light-grey-2;
 		border-radius: 0 0 5px 5px;
 		width: 100%;
 		overflow: auto;

frontend/src/pages/Station/index.vue

@@ -8,292 +8,274 @@
 		<div id="station-outer-container">
 			<div v-show="loading" class="progress" />
 			<div v-show="!loading && exists" id="station-inner-container">
-				<div id="upper-row" class="row">
-					<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>
+				<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>
 
-						<p>{{ station.description }}</p>
+					<p>{{ station.description }}</p>
 
-						<div id="admin-buttons" v-if="isOwnerOrAdmin()">
-							<!-- (Admin) Station Settings Button -->
+					<div id="admin-buttons" v-if="isOwnerOrAdmin()">
+						<!-- (Admin) Station Settings Button -->
+						<button
+							class="button is-primary"
+							@click="openSettings()"
+						>
+							<i class="material-icons icon-with-button"
+								>settings</i
+							>
+							<span class="optional-desktop-only-text">
+								Station settings
+							</span>
+						</button>
+
+						<!-- (Admin) Skip Button -->
+						<button class="button is-danger" @click="skipStation()">
+							<i class="material-icons icon-with-button"
+								>skip_next</i
+							>
+							<span class="optional-desktop-only-text">
+								Force Skip
+							</span>
+						</button>
+
+						<!-- (Admin) Pause/Resume Button -->
+						<button
+							class="button is-danger"
+							v-if="stationPaused"
+							@click="resumeStation()"
+						>
+							<i class="material-icons icon-with-button"
+								>play_arrow</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
+							</span>
+						</button>
+					</div>
+				</div>
+				<div class="player-container quadrant" v-show="!noSong">
+					<div id="video-container">
+						<div id="player" style="width: 100%; height: 100%" />
+						<div class="player-cannot-autoplay" v-if="!canAutoplay">
+							<p>
+								Please click anywhere on the screen for the
+								video to start
+							</p>
+						</div>
+					</div>
+					<div id="seeker-bar-container">
+						<div id="seeker-bar" style="width: 0%" />
+					</div>
+					<div id="control-bar-container">
+						<div id="left-buttons">
+							<!-- Debug Box -->
 							<button
 								class="button is-primary"
-								@click="openSettings()"
+								@click="togglePlayerDebugBox()"
+								@dblclick="resetPlayerDebugBox()"
 							>
-								<i class="material-icons icon-with-button"
-									>settings</i
-								>
+								<i class="material-icons icon-with-button">
+									bug_report
+								</i>
 								<span class="optional-desktop-only-text">
-									Station settings
+									Debug
 								</span>
 							</button>
 
-							<!-- (Admin) Skip Button -->
+							<!-- Local Pause/Resume Button -->
 							<button
-								class="button is-danger"
-								@click="skipStation()"
+								class="button is-primary"
+								@click="resumeLocalStation()"
+								id="local-resume"
+								v-if="localPaused"
 							>
-								<i class="material-icons icon-with-button"
-									>skip_next</i
+								<i class="material-icons">play_arrow</i>
+								<span class="optional-desktop-only-text"
+									>Play locally</span
 								>
-								<span class="optional-desktop-only-text">
-									Force Skip
-								</span>
 							</button>
-
-							<!-- (Admin) Pause/Resume Button -->
 							<button
-								class="button is-danger"
-								v-if="stationPaused"
-								@click="resumeStation()"
+								class="button is-primary"
+								@click="pauseLocalStation()"
+								id="local-pause"
+								v-else
 							>
-								<i class="material-icons icon-with-button"
-									>play_arrow</i
+								<i class="material-icons">pause</i>
+								<span class="optional-desktop-only-text"
+									>Pause locally</span
 								>
-								<span class="optional-desktop-only-text">
-									Resume Station
-								</span>
 							</button>
+
+							<!-- Vote to Skip Button -->
 							<button
-								class="button is-danger"
-								@click="pauseStation()"
-								v-else
+								v-if="loggedIn"
+								class="button is-primary"
+								@click="voteSkipStation()"
 							>
 								<i class="material-icons icon-with-button"
-									>pause</i
+									>skip_next</i
+								>
+								<span class="optional-desktop-only-text"
+									>Vote to skip (</span
+								>
+								{{ currentSong.skipVotes }}
+								<span class="optional-desktop-only-text"
+									>)</span
 								>
-								<span class="optional-desktop-only-text">
-									Pause Station
-								</span>
 							</button>
 						</div>
-					</div>
-					<div
-						id="currently-playing-container"
-						class="quadrant"
-						:class="{ 'no-currently-playing': noSong }"
-					>
-						<currently-playing v-if="!noSong" />
-						<p v-else class="nothing-here">
-							No song is currently playing
-						</p>
-					</div>
-				</div>
-				<div id="lower-row" class="row">
-					<div class="player-container quadrant" v-show="!noSong">
-						<div id="video-container">
-							<div
-								id="player"
-								style="width: 100%; height: 100%"
+						<div id="duration">
+							<p>
+								{{ timeElapsed }} /
+								{{ utils.formatTime(currentSong.duration) }}
+							</p>
+						</div>
+						<p id="volume-control">
+							<i
+								v-if="muted"
+								class="material-icons"
+								@click="toggleMute()"
+								>volume_mute</i
+							>
+							<i
+								v-else
+								class="material-icons"
+								@click="toggleMute()"
+								>volume_down</i
+							>
+							<input
+								v-model="volumeSliderValue"
+								type="range"
+								min="0"
+								max="10000"
+								class="volume-slider active"
+								@change="changeVolume()"
+								@input="changeVolume()"
 							/>
+							<i class="material-icons" @click="increaseVolume()"
+								>volume_up</i
+							>
+						</p>
+						<div id="right-buttons" v-if="loggedIn">
+							<!-- Ratings (Like/Dislike) Buttons -->
 							<div
-								class="player-cannot-autoplay"
-								v-if="!canAutoplay"
+								id="ratings"
+								v-if="
+									currentSong.likes !== -1 &&
+										currentSong.dislikes !== -1
+								"
+								:class="{
+									liked: liked,
+									disliked: disliked
+								}"
 							>
-								<p>
-									Please click anywhere on the screen for the
-									video to start
-								</p>
-							</div>
-						</div>
-						<div id="seeker-bar-container">
-							<div id="seeker-bar" style="width: 0%" />
-						</div>
-						<div id="control-bar-container">
-							<div id="left-buttons">
-								<!-- Debug Box -->
+								<!-- Like Song Button -->
 								<button
-									class="button is-primary"
-									@click="togglePlayerDebugBox()"
-									@dblclick="resetPlayerDebugBox()"
+									class="button is-success"
+									id="like-song"
+									@click="toggleLike()"
 								>
-									<i class="material-icons icon-with-button">
-										bug_report
-									</i>
-									<span class="optional-desktop-only-text">
-										Debug
-									</span>
+									<i
+										class="material-icons icon-with-button"
+										:class="{ liked: liked }"
+										>thumb_up_alt</i
+									>{{ currentSong.likes }}
 								</button>
 
-								<!-- Local Pause/Resume Button -->
+								<!-- Dislike Song Button -->
 								<button
-									class="button is-primary"
-									@click="resumeLocalStation()"
-									id="local-resume"
-									v-if="localPaused"
+									class="button is-danger"
+									id="dislike-song"
+									@click="toggleDislike()"
 								>
-									<i class="material-icons">play_arrow</i>
-									<span class="optional-desktop-only-text"
-										>Play locally</span
-									>
-								</button>
-								<button
-									class="button is-primary"
-									@click="pauseLocalStation()"
-									id="local-pause"
-									v-else
-								>
-									<i class="material-icons">pause</i>
-									<span class="optional-desktop-only-text"
-										>Pause locally</span
-									>
-								</button>
-
-								<!-- Vote to Skip Button -->
-								<button
-									v-if="loggedIn"
-									class="button is-primary"
-									@click="voteSkipStation()"
-								>
-									<i class="material-icons icon-with-button"
-										>skip_next</i
-									>
-									<span class="optional-desktop-only-text"
-										>Vote to skip (</span
-									>
-									{{ currentSong.skipVotes }}
-									<span class="optional-desktop-only-text"
-										>)</span
-									>
+									<i
+										class="material-icons icon-with-button"
+										:class="{
+											disliked: disliked
+										}"
+										>thumb_down_alt</i
+									>{{ currentSong.dislikes }}
 								</button>
 							</div>
-							<div id="duration">
-								<p>
-									{{ timeElapsed }} /
-									{{ utils.formatTime(currentSong.duration) }}
-								</p>
-							</div>
-							<p id="volume-control">
-								<i
-									v-if="muted"
-									class="material-icons"
-									@click="toggleMute()"
-									>volume_mute</i
-								>
-								<i
-									v-else
-									class="material-icons"
-									@click="toggleMute()"
-									>volume_down</i
-								>
-								<input
-									v-model="volumeSliderValue"
-									type="range"
-									min="0"
-									max="10000"
-									class="volume-slider active"
-									@change="changeVolume()"
-									@input="changeVolume()"
-								/>
-								<i
-									class="material-icons"
-									@click="increaseVolume()"
-									>volume_up</i
-								>
-							</p>
-							<div id="right-buttons" v-if="loggedIn">
-								<!-- Ratings (Like/Dislike) Buttons -->
-								<div
-									id="ratings"
-									v-if="
-										currentSong.likes !== -1 &&
-											currentSong.dislikes !== -1
-									"
-									:class="{
-										liked: liked,
-										disliked: disliked
-									}"
-								>
-									<!-- Like Song Button -->
+
+							<!-- Add Song To Playlist Button & Dropdown -->
+							<div id="add-song-to-playlist">
+								<div class="control has-addons">
 									<button
-										class="button is-success"
-										id="like-song"
-										@click="toggleLike()"
+										class="button is-primary"
+										@click="
+											showPlaylistDropdown = !showPlaylistDropdown
+										"
 									>
-										<i
-											class="material-icons icon-with-button"
-											:class="{ liked: liked }"
-											>thumb_up_alt</i
-										>{{ currentSong.likes }}
+										<i class="material-icons">queue</i>
+										<span class="optional-desktop-only-text"
+											>Add Song To Playlist</span
+										>
 									</button>
-
-									<!-- Dislike Song Button -->
 									<button
-										class="button is-danger"
-										id="dislike-song"
-										@click="toggleDislike()"
+										class="button"
+										id="dropdown-toggle"
+										@click="
+											showPlaylistDropdown = !showPlaylistDropdown
+										"
 									>
-										<i
-											class="material-icons icon-with-button"
-											:class="{
-												disliked: disliked
-											}"
-											>thumb_down_alt</i
-										>{{ currentSong.dislikes }}
+										<i class="material-icons">
+											{{
+												showPlaylistDropdown
+													? "expand_more"
+													: "expand_less"
+											}}
+										</i>
 									</button>
 								</div>
-
-								<!-- Add Song To Playlist Button & Dropdown -->
-								<div id="add-song-to-playlist">
-									<div class="control has-addons">
-										<button
-											class="button is-primary"
-											@click="
-												showPlaylistDropdown = !showPlaylistDropdown
-											"
-										>
-											<i class="material-icons">queue</i>
-											<span
-												class="optional-desktop-only-text"
-												>Add Song To Playlist</span
-											>
-										</button>
-										<button
-											class="button"
-											id="dropdown-toggle"
-											@click="
-												showPlaylistDropdown = !showPlaylistDropdown
-											"
-										>
-											<i class="material-icons">
-												{{
-													showPlaylistDropdown
-														? "expand_more"
-														: "expand_less"
-												}}
-											</i>
-										</button>
-									</div>
-									<add-to-playlist-dropdown
-										v-if="showPlaylistDropdown"
-									/>
-								</div>
+								<add-to-playlist-dropdown
+									v-if="showPlaylistDropdown"
+								/>
 							</div>
 						</div>
 					</div>
-					<p class="player-container nothing-here" v-if="noSong">
+				</div>
+				<p class="player-container nothing-here" v-if="noSong">
+					No song is currently playing
+				</p>
+				<div id="sidebar-container" class="quadrant">
+					<station-sidebar />
+				</div>
+				<div
+					id="currently-playing-container"
+					class="quadrant"
+					:class="{ 'no-currently-playing': noSong }"
+				>
+					<currently-playing v-if="!noSong" />
+					<p v-else class="nothing-here">
 						No song is currently playing
 					</p>
-					<div id="sidebar-container" class="quadrant">
-						<station-sidebar />
-					</div>
 				</div>
 			</div>
 
@@ -1490,7 +1472,6 @@ export default {
 		background-color: $night-mode-bg-secondary !important;
 	}
 
-	#upper-row .quadrant,
 	#video-container,
 	#control-bar-container {
 		border: 0 !important;
@@ -1508,24 +1489,24 @@ export default {
 
 #station-outer-container {
 	margin: 0 auto;
-	max-width: 100%;
 	padding: 20px 40px;
 	margin-top: 5px;
 	height: 100%;
+	width: 100%;
+	max-width: 2000px;
 
-	/** Mobile Row  */
 	@media (max-width: 1040px) {
 		padding: 0;
 		margin-top: 0 !important;
 		height: auto !important;
 
 		#station-inner-container {
-			justify-content: flex-start !important;
-		}
-
-		.row {
-			width: 100%;
-			flex-direction: column !important;
+			grid-template-columns: 100% !important;
+			grid-template-areas:
+				"about-station"
+				"player"
+				"currently-playing"
+				"sidebar" !important;
 		}
 
 		.quadrant,
@@ -1539,40 +1520,32 @@ export default {
 			background: transparent !important;
 		}
 
-		#sidebar-container {
-			margin-left: 0 !important;
-			margin-top: 15px;
-		}
+		/** padding fixes on mobile */
+		#about-station-container {
+			margin-top: 30px;
+			padding: 0 10px !important;
 
-		#upper-row {
-			background-color: #fff;
-
-			/** padding fixes on mobile */
-			#about-station-container {
-				padding: 15px 10px !important;
-
-				&:not(.nothing-here) {
-					padding-bottom: 0 !important;
-				}
+			&:not(.nothing-here) {
+				padding-bottom: 0 !important;
 			}
+		}
 
-			#currently-playing-container {
-				margin-left: 0 !important;
-				padding: 15px 10px !important;
+		#currently-playing-container {
+			padding: 0 10px !important;
 
-				#currently-playing {
-					padding: 0;
-				}
+			#currently-playing {
+				padding: 0;
 			}
 		}
 
-		#lower-row {
-			margin-top: 0 !important;
+		#sidebar-container {
+			max-height: 500px !important;
+			min-height: 200px;
 		}
 
 		/** Change height of YouTube embed  */
 		.player-container:not(.nothing-here) {
-			height: 1000px !important;
+			height: 500px !important;
 		}
 
 		.player-container {
@@ -1586,14 +1559,14 @@ export default {
 	}
 
 	#station-inner-container {
-		display: flex;
-		align-items: center;
-		flex-direction: column;
+		display: grid;
 		height: 100%;
-
-		@media (min-height: 1050px) {
-			justify-content: center;
-		}
+		grid-template-columns: 66% 33%;
+		grid-template-rows: 150px auto;
+		grid-template-areas:
+			"about-station currently-playing"
+			"player sidebar";
+		gap: 30px;
 
 		@media (min-width: 1040px) and (max-width: 2100px) {
 			#control-bar-container {
@@ -1619,334 +1592,327 @@ export default {
 			display: flex;
 			flex-direction: row;
 			max-width: 100%;
+		}
 
-			.quadrant {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				flex-direction: column;
-				max-width: 100%;
-				border-radius: 5px;
-			}
+		.column {
+			display: flex;
+			flex-direction: column;
 		}
 
-		#upper-row {
-			.quadrant {
-				border: 1px solid $light-grey-2;
-				background-color: #fff;
-			}
+		.quadrant {
+			border-radius: 5px;
+		}
 
-			#about-station-container {
-				width: 1400px;
-				align-items: flex-start;
-				padding: 20px;
+		.quadrant {
+			border: 1px solid $light-grey-2;
+			background-color: #fff;
+		}
 
-				#station-name {
-					flex-direction: row !important;
+		#about-station-container {
+			align-items: flex-start;
+			padding: 20px;
+			grid-area: about-station;
 
-					h1 {
-						margin: 0;
-						font-size: 36px;
-					}
+			#station-name {
+				flex-direction: row !important;
 
-					i {
-						margin-left: 10px;
-						font-size: 30px;
-						color: $yellow;
-					}
+				h1 {
+					margin: 0;
+					font-size: 36px;
+					line-height: 0.8;
 				}
 
-				p {
-					max-width: 700px;
-					flex-grow: 1;
+				i {
+					margin-left: 10px;
+					font-size: 30px;
+					color: $yellow;
 				}
+			}
+
+			p {
+				max-width: 700px;
+				flex-grow: 1;
+			}
 
-				#admin-buttons {
-					margin-top: 15px;
+			#admin-buttons {
+				margin-top: 15px;
 
-					@media (max-width: 450px) {
-						.optional-desktop-only-text {
-							display: none;
-						}
+				@media (max-width: 450px) {
+					.optional-desktop-only-text {
+						display: none;
 					}
 				}
 			}
+		}
+
+		#currently-playing-container {
+			grid-area: currently-playing;
 
-			#currently-playing-container {
-				width: 550px;
-				margin-left: 50px;
+			.nothing-here {
+				height: 100%;
 			}
 		}
 
-		#lower-row {
-			margin-top: 20px;
-			// height: calc(100% - 75px); // accounts for footer
-			height: 60vh;
+		.player-container {
+			height: inherit;
+			background-color: #fff;
+			display: flex;
+			flex-direction: column;
+			border: 1px solid $light-grey-2;
+			border-radius: 5px;
+			overflow: hidden;
+			grid-area: player;
 
-			.player-container.nothing-here {
+			&.nothing-here {
 				border: 1px solid $light-grey-2;
 				border-radius: 5px;
 			}
 
-			.player-container {
-				height: inherit;
-				width: 1400px;
-				background-color: #fff;
-				display: flex;
-				flex-direction: column;
-				border: 1px solid $light-grey-2;
-				border-radius: 5px;
-				overflow: hidden;
+			#video-container {
+				width: 100%;
+				height: 100%;
 
-				#video-container {
+				.player-cannot-autoplay {
+					position: relative;
 					width: 100%;
 					height: 100%;
+					bottom: calc(100% + 5px);
+					background: rgba(3, 169, 244, 0.95);
+					display: flex;
+					align-items: center;
+					justify-content: center;
 
-					.player-cannot-autoplay {
-						position: relative;
-						width: 100%;
-						height: 100%;
-						bottom: calc(100% + 5px);
-						background: rgba(3, 169, 244, 0.95);
-						display: flex;
-						align-items: center;
-						justify-content: center;
-
-						p {
-							color: $white;
-							font-size: 26px;
-							text-align: center;
-						}
+					p {
+						color: $white;
+						font-size: 26px;
+						text-align: center;
 					}
 				}
+			}
 
-				#seeker-bar-container {
-					background-color: #fff;
-					position: relative;
-					height: 7px;
-					display: block;
-					width: 100%;
-					overflow: hidden;
-
-					#seeker-bar {
-						background-color: $musare-blue;
-						top: 0;
-						left: 0;
-						bottom: 0;
-						position: absolute;
+			#seeker-bar-container {
+				background-color: #fff;
+				position: relative;
+				height: 7px;
+				display: block;
+				width: 100%;
+				overflow: hidden;
+
+				#seeker-bar {
+					background-color: $musare-blue;
+					top: 0;
+					left: 0;
+					bottom: 0;
+					position: absolute;
+				}
+			}
+
+			#control-bar-container {
+				display: flex;
+				justify-content: space-around;
+				padding: 10px 0;
+				width: 100%;
+				background: #fff;
+				flex-direction: column;
+				flex-flow: wrap;
+
+				#left-buttons,
+				#right-buttons {
+					margin: 3px;
+
+					i {
+						margin-right: 3px;
 					}
 				}
 
-				#control-bar-container {
+				#left-buttons {
 					display: flex;
-					justify-content: space-around;
-					padding: 10px 0;
-					width: 100%;
-					background: #fff;
-					flex-direction: column;
-					flex-flow: wrap;
-
-					#left-buttons,
-					#right-buttons {
-						margin: 3px;
 
-						i {
-							margin-right: 3px;
-						}
+					.button:not(:first-of-type) {
+						margin-left: 5px;
 					}
+				}
 
-					#left-buttons {
-						display: flex;
+				#duration {
+					margin: 3px;
+					display: flex;
+					align-items: center;
 
-						.button:not(:first-of-type) {
-							margin-left: 5px;
-						}
+					p {
+						font-size: 22px;
+						/** prevents duration width slightly varying and shifting other controls slightly */
+						width: 125px;
+						text-align: center;
 					}
+				}
 
-					#duration {
-						margin: 3px;
-						display: flex;
-						align-items: center;
+				#volume-control {
+					margin: 3px;
+					margin-top: 0;
+					position: relative;
+					display: flex;
+					align-items: center;
+					cursor: pointer;
+
+					.volume-slider {
+						width: 500px;
+						padding: 0 15px;
+						background: transparent;
 
-						p {
-							font-size: 22px;
-							/** prevents duration width slightly varying and shifting other controls slightly */
-							width: 125px;
-							text-align: center;
+						@media (max-width: 2150px) {
+							width: 250px !important;
 						}
 					}
 
-					#volume-control {
-						margin: 3px;
-						margin-top: 0;
-						position: relative;
-						display: flex;
-						align-items: center;
-						cursor: pointer;
+					input[type="range"] {
+						-webkit-appearance: none;
+						margin: 7.3px 0;
+					}
 
-						.volume-slider {
-							width: 500px;
-							padding: 0 15px;
-							background: transparent;
+					input[type="range"]:focus {
+						outline: none;
+					}
 
-							@media (max-width: 2150px) {
-								width: 250px !important;
-							}
-						}
+					input[type="range"]::-webkit-slider-runnable-track {
+						width: 100%;
+						height: 5.2px;
+						cursor: pointer;
+						box-shadow: 0;
+						background: $light-grey-2;
+						border-radius: 0;
+						border: 0;
+					}
 
-						input[type="range"] {
-							-webkit-appearance: none;
-							margin: 7.3px 0;
-						}
+					input[type="range"]::-webkit-slider-thumb {
+						box-shadow: 0;
+						border: 0;
+						height: 19px;
+						width: 19px;
+						border-radius: 15px;
+						background: $primary-color;
+						cursor: pointer;
+						-webkit-appearance: none;
+						margin-top: -6.5px;
+					}
 
-						input[type="range"]:focus {
-							outline: none;
-						}
+					input[type="range"]::-moz-range-track {
+						width: 100%;
+						height: 5.2px;
+						cursor: pointer;
+						box-shadow: 0;
+						background: $light-grey-2;
+						border-radius: 0;
+						border: 0;
+					}
 
-						input[type="range"]::-webkit-slider-runnable-track {
-							width: 100%;
-							height: 5.2px;
-							cursor: pointer;
-							box-shadow: 0;
-							background: $light-grey-2;
-							border-radius: 0;
-							border: 0;
-						}
+					input[type="range"]::-moz-range-thumb {
+						box-shadow: 0;
+						border: 0;
+						height: 19px;
+						width: 19px;
+						border-radius: 15px;
+						background: $primary-color;
+						cursor: pointer;
+						-webkit-appearance: none;
+						margin-top: -6.5px;
+					}
+					input[type="range"]::-ms-track {
+						width: 100%;
+						height: 5.2px;
+						cursor: pointer;
+						box-shadow: 0;
+						background: $light-grey-2;
+						border-radius: 1.3px;
+					}
 
-						input[type="range"]::-webkit-slider-thumb {
-							box-shadow: 0;
-							border: 0;
-							height: 19px;
-							width: 19px;
-							border-radius: 15px;
-							background: $primary-color;
-							cursor: pointer;
-							-webkit-appearance: none;
-							margin-top: -6.5px;
-						}
+					input[type="range"]::-ms-fill-lower {
+						background: $light-grey-2;
+						border: 0;
+						border-radius: 0;
+						box-shadow: 0;
+					}
 
-						input[type="range"]::-moz-range-track {
-							width: 100%;
-							height: 5.2px;
-							cursor: pointer;
-							box-shadow: 0;
-							background: $light-grey-2;
-							border-radius: 0;
-							border: 0;
-						}
+					input[type="range"]::-ms-fill-upper {
+						background: $light-grey-2;
+						border: 0;
+						border-radius: 0;
+						box-shadow: 0;
+					}
 
-						input[type="range"]::-moz-range-thumb {
-							box-shadow: 0;
-							border: 0;
-							height: 19px;
-							width: 19px;
-							border-radius: 15px;
-							background: $primary-color;
-							cursor: pointer;
-							-webkit-appearance: none;
-							margin-top: -6.5px;
-						}
-						input[type="range"]::-ms-track {
-							width: 100%;
-							height: 5.2px;
-							cursor: pointer;
-							box-shadow: 0;
-							background: $light-grey-2;
-							border-radius: 1.3px;
-						}
+					input[type="range"]::-ms-thumb {
+						box-shadow: 0;
+						border: 0;
+						height: 15px;
+						width: 15px;
+						border-radius: 15px;
+						background: $primary-color;
+						cursor: pointer;
+						-webkit-appearance: none;
+						margin-top: 1.5px;
+					}
+				}
 
-						input[type="range"]::-ms-fill-lower {
-							background: $light-grey-2;
-							border: 0;
-							border-radius: 0;
-							box-shadow: 0;
-						}
+				#right-buttons {
+					display: flex;
 
-						input[type="range"]::-ms-fill-upper {
-							background: $light-grey-2;
-							border: 0;
-							border-radius: 0;
-							box-shadow: 0;
-						}
+					#dropdown-toggle {
+						width: 35px;
+					}
 
-						input[type="range"]::-ms-thumb {
-							box-shadow: 0;
-							border: 0;
-							height: 15px;
-							width: 15px;
-							border-radius: 15px;
-							background: $primary-color;
-							cursor: pointer;
-							-webkit-appearance: none;
-							margin-top: 1.5px;
-						}
+					#dislike-song,
+					#add-song-to-playlist .button:not(#dropdown-toggle) {
+						margin-left: 5px;
 					}
 
-					#right-buttons {
+					#ratings {
 						display: flex;
+						margin-right: 5px;
 
-						#dropdown-toggle {
-							width: 35px;
+						#like-song:hover,
+						#like-song.liked {
+							background-color: darken($green, 5%) !important;
 						}
 
-						#dislike-song,
-						#add-song-to-playlist .button:not(#dropdown-toggle) {
-							margin-left: 5px;
+						#dislike-song:hover,
+						#dislike-song.disliked {
+							background-color: darken($red, 5%) !important;
 						}
 
-						#ratings {
-							display: flex;
-							margin-right: 5px;
-
-							#like-song:hover,
-							#like-song.liked {
-								background-color: darken($green, 5%) !important;
-							}
-
-							#dislike-song:hover,
-							#dislike-song.disliked {
-								background-color: darken($red, 5%) !important;
-							}
-
-							&.liked #dislike-song,
-							&.disliked #like-song {
-								background-color: $grey !important;
-								&:hover {
-									background-color: darken(
-										$grey,
-										5%
-									) !important;
-								}
+						&.liked #dislike-song,
+						&.disliked #like-song {
+							background-color: $grey !important;
+							&:hover {
+								background-color: darken($grey, 5%) !important;
 							}
 						}
+					}
 
-						#add-song-to-playlist {
-							display: flex;
-							flex-direction: column-reverse;
-							align-items: center;
-							width: 212px;
+					#add-song-to-playlist {
+						display: flex;
+						flex-direction: column-reverse;
+						align-items: center;
+						width: 212px;
 
-							.control {
-								width: fit-content;
-								margin-bottom: 0 !important;
-							}
+						.control {
+							width: fit-content;
+							margin-bottom: 0 !important;
 						}
 					}
 				}
 			}
+		}
 
-			#sidebar-container {
-				position: relative;
-				width: 550px;
-				height: inherit;
-				margin-left: 50px;
-			}
+		#sidebar-container {
+			border-top: 0;
+			position: relative;
+			height: inherit;
+			grid-area: sidebar;
 		}
 	}
 }
 
 .footer {
-	margin-top: 15px;
+	margin-top: 30px;
 }
 
 /deep/ .nothing-here {