fix(Station page): playlist sidebar now is scrollable like the queue sidebar

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

frontend/src/components/ui/PlaylistItem.vue

@@ -50,9 +50,8 @@ export default {
 .playlist {
 	width: 100%;
 	height: 72px;
-	margin-bottom: 10px;
 	border: 0.5px $light-grey-2 solid;
-	border-radius: 5px;
+	border-radius: 3px;
 	display: flex;
 
 	.top-text {

frontend/src/pages/Station/components/Sidebar/MyPlaylists.vue

@@ -1,39 +1,35 @@
 <template>
 	<div id="my-playlists">
-		<aside v-if="playlists.length > 0" class="menu">
-			<ul class="menu-list">
-				<li v-for="(playlist, index) in playlists" :key="index">
-					<playlist-item :playlist="playlist">
-						<div class="icons-group" slot="actions">
-							<button
-								v-if="
-									station.type === 'community' &&
-										isNotSelected(playlist._id) &&
-										!station.partyMode
-								"
-								class="button is-primary"
-								@click="selectPlaylist(playlist._id)"
-							>
-								<i class="material-icons">play_arrow</i>
-							</button>
-							<button
-								class="button is-primary"
-								@click="edit(playlist._id)"
-							>
-								<i class="material-icons">edit</i>
-							</button>
-						</div>
-					</playlist-item>
-				</li>
-			</ul>
-		</aside>
-
-		<p v-else class="nothing-here-text">
+		<ul class="menu-list scrollable-list" v-if="playlists.length > 0">
+			<li v-for="(playlist, index) in playlists" :key="index">
+				<playlist-item :playlist="playlist">
+					<div class="icons-group" slot="actions">
+						<button
+							v-if="
+								station.type === 'community' &&
+									isNotSelected(playlist._id) &&
+									!station.partyMode
+							"
+							class="button is-primary"
+							@click="selectPlaylist(playlist._id)"
+						>
+							<i class="material-icons">play_arrow</i>
+						</button>
+						<button
+							class="button is-primary"
+							@click="edit(playlist._id)"
+						>
+							<i class="material-icons">edit</i>
+						</button>
+					</div>
+				</playlist-item>
+			</li>
+		</ul>
+		<p v-else class="nothing-here-text scrollable-list">
 			No Playlists found
 		</p>
-
 		<a
-			class="button create-playlist"
+			class="button create-playlist tab-actionable-button"
 			href="#"
 			@click="openModal({ sector: 'station', modal: 'createPlaylist' })"
 			>Create Playlist</a
@@ -150,7 +146,6 @@ export default {
 #my-playlists {
 	background-color: #fff;
 	margin-bottom: 20px;
-	padding: 10px;
 	border-radius: 0 0 5px 5px;
 	max-height: 100%;
 
@@ -177,6 +172,10 @@ export default {
 
 .menu-list li {
 	align-items: center;
+
+	&:not(:last-of-type) {
+		margin-bottom: 10px;
+	}
 }
 
 .create-playlist {
@@ -186,6 +185,7 @@ export default {
 	background-color: rgba(3, 169, 244, 1);
 	color: $white !important;
 	border: 0;
+
 	&:active,
 	&:focus {
 		border: 0;

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

@@ -1,6 +1,6 @@
 <template>
 	<div id="queue">
-		<div id="queue-items">
+		<div id="queue-items" class="scrollable-list">
 			<queue-item
 				v-for="song in songsList"
 				:key="song.songId"
@@ -16,7 +16,7 @@
 		</div>
 		<button
 			id="add-song-to-queue"
-			class="button is-primary"
+			class="button is-primary tab-actionable-button"
 			v-if="
 				loggedIn &&
 					((station.type === 'community' &&
@@ -44,12 +44,15 @@
 		>
 			<button
 				v-if="isAdminOnly() && !isOwnerOnly() && !dismissedWarning"
-				class="button"
+				class="button tab-actionable-button"
 				@click="dismissedWarning = true"
 			>
 				THIS STATION'S QUEUE IS LOCKED.
 			</button>
-			<button v-if="!isAdminOnly() && !isOwnerOnly()" class="button">
+			<button
+				v-if="!isAdminOnly() && !isOwnerOnly()"
+				class="button tab-actionable-button"
+			>
 				THIS STATION'S QUEUE IS LOCKED.
 			</button>
 		</div>
@@ -116,44 +119,11 @@ export default {
 }
 
 #queue {
-	position: absolute;
-	width: 100%;
 	background-color: #fff;
 	border-radius: 0 0 5px 5px;
 
-	::-webkit-scrollbar {
-		width: 10px;
-	}
-
-	::-webkit-scrollbar-track {
-		background-color: #fff;
-		border: 1px solid $light-grey-2;
-	}
-
-	::-webkit-scrollbar-thumb {
-		background-color: $dark-grey;
-
-		&:hover {
-			background-color: darken($dark-grey, 10%);
-		}
-	}
-
-	#queue-items {
-		width: 100%;
-		overflow: auto;
-		max-height: calc(100% - 20px - 40px);
-		padding: 10px;
-
-		.queue-item:not(:last-of-type) {
-			margin-bottom: 10px;
-		}
-	}
-
-	button {
-		width: calc(100% - 20px);
-		height: 40px;
-		border-radius: 5px;
-		margin: 10px;
+	.queue-item:not(:last-of-type) {
+		margin-bottom: 10px;
 	}
 
 	#queue-locked {
@@ -162,16 +132,8 @@ export default {
 	}
 
 	#add-song-to-queue {
-		position: absolute;
-		bottom: 0;
 		background-color: rgba(3, 169, 244, 1);
 		color: $white !important;
-		border: 0;
-
-		&:active,
-		&:focus {
-			border: 0;
-		}
 
 		&:focus {
 			background-color: $primary-color;

frontend/src/pages/Station/components/Sidebar/Users.vue

@@ -79,7 +79,7 @@ export default {
 			align-items: center;
 			padding: 5px 10px;
 			border: 0.5px $light-grey-2 solid;
-			border-radius: 5px;
+			border-radius: 3px;
 			cursor: pointer;
 			color: #000 !important;
 

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

@@ -96,7 +96,9 @@ export default {
 	height: inherit;
 
 	.tab {
+		width: 100%;
 		height: 100%;
+		position: absolute;
 	}
 }
 
@@ -122,4 +124,47 @@ export default {
 		color: #fff;
 	}
 }
+
+/deep/ .tab-actionable-button {
+	width: calc(100% - 20px);
+	height: 40px;
+	border-radius: 5px;
+	margin: 10px;
+	position: absolute;
+	bottom: 0;
+	border: 0;
+
+	&:active,
+	&:focus {
+		border: 0;
+	}
+}
+
+/deep/ .scrollable-list {
+	width: 100%;
+	overflow: auto;
+	max-height: calc(100% - 20px - 40px);
+	padding: 10px;
+
+	.queue-item:not(:last-of-type) {
+		margin-bottom: 10px;
+	}
+}
+
+/deep/ ::-webkit-scrollbar {
+	width: 10px;
+}
+
+/deep/ ::-webkit-scrollbar-track {
+	background-color: #fff;
+	border: 1px solid $light-grey-2;
+}
+
+/deep/ ::-webkit-scrollbar-thumb {
+	background-color: $dark-grey;
+
+	&:hover {
+		background-color: darken($dark-grey, 10%);
+	}
+}
 </style>