refactor(css): added universal item class for e.g. queue items, playlist items

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

frontend/src/App.vue

@@ -561,4 +561,75 @@ h4.section-title {
 .margin-bottom-zero {
 	margin-bottom: 0 !important;
 }
+
+/** Universial items e.g. playlist items, queue items, activity items */
+.item-draggable {
+	cursor: move;
+}
+
+.universal-item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 7.5px;
+	border: 1px solid $light-grey-2;
+	border-radius: 3px;
+
+	.item-title {
+		font-size: 20px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.item-description {
+		font-size: 14px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.universal-item-actions {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin-left: 10px;
+		justify-content: center;
+
+		i {
+			cursor: pointer;
+
+			&:hover,
+			&:focus {
+				filter: brightness(90%);
+			}
+
+			&:not(:first-of-type) {
+				margin-left: 5px;
+			}
+		}
+
+		.play-icon {
+			color: $green;
+		}
+
+		.edit-icon {
+			color: $primary-color;
+		}
+
+		.hide-icon {
+			color: #bdbdbd;
+		}
+
+		.stop-icon,
+		.remove-from-queue-icon {
+			color: $red;
+		}
+
+		.report-icon {
+			color: $yellow;
+		}
+	}
+}
 </style>

frontend/src/components/modals/EditStation.vue

@@ -1194,7 +1194,7 @@ export default {
 
 .right-section {
 	width: 157px;
-	min-height: 375px;
+	min-height: 515px;
 	margin-left: 16px;
 	display: grid;
 	gap: 16px;

frontend/src/components/ui/FloatingBox.vue

@@ -12,7 +12,7 @@
 		}"
 		@mousedown="onResizeBox"
 	>
-		<div class="box-header" @mousedown="onDragBox">
+		<div class="box-header item-draggable" @mousedown="onDragBox">
 			<slot name="header"></slot>
 		</div>
 		<div class="box-body">
@@ -143,7 +143,6 @@ export default {
 	min-width: 50px !important;
 
 	.box-header {
-		cursor: move;
 		z-index: 100000001;
 		background-color: $musare-blue;
 		padding: 10px;

frontend/src/components/ui/PlaylistItem.vue

@@ -1,22 +1,22 @@
 <template>
-	<div class="playlist">
+	<div class="playlist-item universal-item">
 		<div class="left-part">
-			<p class="top-text">
+			<p class="item-title">
 				{{ playlist.displayName }}
 				<i
 					v-if="playlist.privacy === 'private'"
-					class="privateIcon material-icons"
+					class="private-playlist-icon material-icons"
 					title="This playlist is not visible to other users."
 					>lock</i
 				>
 			</p>
-			<p class="bottom-text">
+			<p class="item-description">
 				{{ totalLength(playlist) }} •
 				{{ playlist.songs.length }}
 				{{ playlist.songs.length === 1 ? "song" : "songs" }}
 			</p>
 		</div>
-		<div class="actions">
+		<div class="universal-item-actions">
 			<slot name="actions" />
 		</div>
 	</div>
@@ -50,43 +50,32 @@ export default {
 @import "../../styles/global.scss";
 
 .night-mode {
-	.playlist {
+	.playlist-item {
 		background-color: $dark-grey-2 !important;
 		border: 0 !important;
+
 		p {
 			color: $night-mode-text !important;
 		}
 	}
 }
 
-.playlist {
+.playlist-item {
 	width: 100%;
 	height: 72px;
-	border: 0.5px $light-grey-2 solid;
-	border-radius: 3px;
-	display: flex;
 
-	.top-text {
+	.item-title {
 		color: $dark-grey-2;
 		font-size: 20px;
 		line-height: 23px;
 		margin-bottom: 0;
+		display: flex;
+		align-items: center;
 
-		.privateIcon {
+		.private-playlist-icon {
 			color: $dark-pink;
 			font-size: 18px;
-		}
-	}
-
-	.bottom-text {
-		color: $dark-grey-2;
-		font-size: 16px;
-		line-height: 19px;
-		margin-bottom: 0;
-		margin-top: 6px;
-
-		&:first-letter {
-			text-transform: uppercase;
+			margin-left: 5px;
 		}
 	}
 
@@ -95,11 +84,7 @@ export default {
 		padding: 12px;
 	}
 
-	.actions {
-		display: flex;
-		align-items: center;
-		padding: 12px;
-
+	.universal-item-actions {
 		div {
 			display: flex;
 			align-items: center;

frontend/src/pages/Profile.vue

@@ -100,7 +100,7 @@
 						<hr class="section-horizontal-rule" />
 
 						<div
-							class="item activity-item"
+							class="item activity-item universal-item"
 							v-for="activity in sortedActivities"
 							:key="activity._id"
 						>
@@ -112,10 +112,10 @@
 							</div>
 							<div class="left-part">
 								<p
-									class="top-text"
+									class="item-title"
 									v-html="activity.message"
 								></p>
-								<p class="bottom-text">
+								<p class="item-description">
 									{{
 										formatDistance(
 											parseISO(activity.createdAt),
@@ -125,13 +125,11 @@
 									}}
 								</p>
 							</div>
-							<div class="actions">
-								<a
-									class="hide-icon"
-									href="#"
-									@click="hideActivity(activity._id)"
-								>
-									<i class="material-icons">visibility_off</i>
+							<div class="universal-item-actions">
+								<a href="#" @click="hideActivity(activity._id)">
+									<i class="material-icons hide-icon"
+										>visibility_off</i
+									>
 								</a>
 							</div>
 						</div>
@@ -176,7 +174,7 @@
 								"
 							>
 								<div
-									class="item"
+									class="item item-draggable"
 									v-for="playlist in playlists"
 									:key="playlist._id"
 								>
@@ -194,19 +192,15 @@
 											v-if="user._id === userId"
 											slot="actions"
 										>
-											<button
-												class="button is-primary"
+											<i
 												@click="
 													editPlaylistClick(
 														playlist._id
 													)
 												"
+												class="material-icons edit-icon"
+												>edit</i
 											>
-												<i
-													class="material-icons icon-with-button"
-													>create</i
-												>Edit
-											</button>
 										</div>
 									</playlist-item>
 								</div>
@@ -798,10 +792,6 @@ export default {
 		.item {
 			overflow: hidden;
 
-			.playlist {
-				cursor: move;
-			}
-
 			&:not(:last-of-type) {
 				margin-bottom: 10px;
 			}
@@ -809,30 +799,10 @@ export default {
 			/** temp code - will be put into a separate component */
 
 			&.activity-item {
-				display: flex;
 				height: 72px;
 				border: 0.5px $light-grey-2 solid;
 				border-radius: 3px;
 
-				.top-text {
-					color: $dark-grey-2;
-					font-size: 20px;
-					line-height: 23px;
-					margin-bottom: 0;
-				}
-
-				.bottom-text {
-					color: $dark-grey-2;
-					font-size: 16px;
-					line-height: 19px;
-					margin-bottom: 0;
-					margin-top: 6px;
-
-					&:first-letter {
-						text-transform: uppercase;
-					}
-				}
-
 				.thumbnail {
 					position: relative;
 					display: flex;
@@ -855,25 +825,14 @@ export default {
 				.left-part {
 					flex: 1;
 					padding: 12px;
-				}
-
-				.actions {
-					display: flex;
-					align-items: center;
-					padding: 12px;
 
-					.hide-icon {
-						border-bottom: 0;
-						display: flex;
-
-						i {
-							color: #bdbdbd;
-						}
+					.item-title {
+						margin: 0;
 					}
 				}
 
-				button {
-					font-size: 17px;
+				.universal-item-actions a {
+					border-bottom: 0;
 				}
 			}
 		}

frontend/src/pages/Station/AddSongToQueue.vue

@@ -420,6 +420,10 @@ tr td {
 	#playlists {
 		font-size: 18px;
 
+		.playlist:not(:last-of-type) {
+			margin-bottom: 10px;
+		}
+
 		.radio {
 			display: flex;
 			flex-direction: row;
@@ -447,7 +451,7 @@ tr td {
 }
 
 #playlists {
-	.playlist {
+	.playlist-item {
 		.button {
 			width: 146px;
 		}

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

@@ -16,36 +16,34 @@
 					:playlist="playlist"
 					v-for="(playlist, index) in playlists"
 					:key="'key-' + index"
+					class="item-draggable"
 				>
 					<div class="icons-group" slot="actions">
-						<button
+						<i
 							v-if="
 								station.type === 'community' &&
 									isNotSelected(playlist._id) &&
 									!station.partyMode
 							"
-							class="button is-primary"
 							@click="selectPlaylist(playlist._id)"
+							class="material-icons play-icon"
+							>play_arrow</i
 						>
-							<i class="material-icons">play_arrow</i>
-						</button>
-						<button
+						<i
 							v-if="
 								station.type === 'community' &&
 									!isNotSelected(playlist._id) &&
 									!station.partyMode
 							"
-							class="button is-danger"
 							@click="deselectPlaylist()"
+							class="material-icons stop-icon"
+							>stop</i
 						>
-							<i class="material-icons">stop</i>
-						</button>
-						<button
-							class="button is-primary"
+						<i
 							@click="edit(playlist._id)"
+							class="material-icons edit-icon"
+							>edit</i
 						>
-							<i class="material-icons">edit</i>
-						</button>
 					</div>
 				</playlist-item>
 			</transition-group>
@@ -232,25 +230,13 @@ export default {
 	display: flex;
 	align-items: center;
 
-	button {
-		background-color: var(--station-theme) !important;
-		&:not(:first-of-type) {
-			margin-left: 5px;
-		}
-		&:hover,
-		&:focus {
-			filter: brightness(90%);
-		}
+	.edit-icon {
+		color: var(--station-theme);
 	}
 }
 
-.menu-list .playlist {
-	align-items: center;
-	cursor: move;
-
-	&:not(:last-of-type) {
-		margin-bottom: 10px;
-	}
+.menu-list .playlist-item:not(:last-of-type) {
+	margin-bottom: 10px;
 }
 
 .create-playlist {

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="queue-item">
+	<div class="universal-item queue-item">
 		<div id="thumbnail-and-info">
 			<img
 				id="thumbnail"
@@ -8,7 +8,7 @@
 			/>
 			<div id="song-info">
 				<h4
-					id="song-title"
+					class="item-title"
 					:style="
 						song.artists.length < 1 ? { fontSize: '16px' } : null
 					"
@@ -17,7 +17,7 @@
 					{{ song.title }}
 				</h4>
 				<h5
-					id="song-artists"
+					class="item-description"
 					v-if="song.artists"
 					:title="song.artists.join(', ')"
 				>
@@ -53,7 +53,7 @@
 			<p id="song-duration">
 				{{ utils.formatTime(song.duration) }}
 			</p>
-			<div id="queue-item-buttons">
+			<div class="universal-item-actions">
 				<i
 					v-if="
 						$parent.loggedIn &&
@@ -61,8 +61,7 @@
 							song.likes !== -1 &&
 							song.dislikes !== -1
 					"
-					class="material-icons"
-					id="report-queue-item"
+					class="material-icons report-icon"
 					@click="reportQueueSong(song)"
 					>flag</i
 				>
@@ -73,8 +72,7 @@
 							song.likes !== -1 &&
 							song.dislikes !== -1
 					"
-					class="material-icons"
-					id="edit-queue-item"
+					class="material-icons edit-icon"
 					@click="$parent.$parent.$parent.editSong(song)"
 					>edit</i
 				>
@@ -83,8 +81,7 @@
 						station.type === 'community' &&
 							($parent.isOwnerOnly() || $parent.isAdminOnly())
 					"
-					class="material-icons"
-					id="remove-queue-item"
+					class="material-icons remove-from-queue-icon"
 					@click="$parent.removeFromQueue(song.songId)"
 					>delete_forever</i
 				>
@@ -143,14 +140,6 @@ export default {
 }
 
 .queue-item {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	padding: 7.5px;
-	border: 1px solid $light-grey-2;
-	border-radius: 3px;
-
 	#thumbnail-and-info,
 	#duration-and-actions {
 		display: flex;
@@ -161,14 +150,6 @@ export default {
 		margin-left: 5px;
 	}
 
-	#queue-item-buttons {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		margin-left: 10px;
-		justify-content: center;
-	}
-
 	#thumbnail {
 		width: 65px;
 		height: 65px;
@@ -192,20 +173,6 @@ export default {
 			font-family: Karla, Arial, sans-serif;
 		}
 
-		#song-title {
-			font-size: 20px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-
-		#song-artists {
-			font-size: 14px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-
 		#song-request-time {
 			font-size: 12px;
 			margin-top: 7px;
@@ -216,31 +183,8 @@ export default {
 		font-size: 20px;
 	}
 
-	#report-queue-item {
-		cursor: pointer;
-		color: $yellow;
-		&:hover,
-		&:focus {
-			color: darken($yellow, 5%);
-		}
-	}
-
-	#edit-queue-item {
-		cursor: pointer;
+	.edit-icon {
 		color: var(--station-theme);
-		&:hover,
-		&:focus {
-			filter: brightness(90%);
-		}
-	}
-
-	#remove-queue-item {
-		cursor: pointer;
-		color: $red;
-		&:hover,
-		&:focus {
-			color: darken($red, 5%);
-		}
 	}
 }
 </style>