fix(frontend): mostly css fixes due to vue 3.0 upgrade

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

frontend/src/App.vue

@@ -494,9 +494,9 @@ a {
 		width: 146px;
 	}
 
-	.song-actions,
+	.icons-group,
 	.addToPlaylistDropdown,
-	.song-actions > div {
+	.icons-group > div {
 		display: inline-block;
 	}
 
@@ -907,8 +907,13 @@ h4.section-title {
 			color: var(--primary-color);
 		}
 
-		.song-actions {
+		.icons-group {
 			display: flex;
+			align-items: center;
+
+			a {
+				padding: 0;
+			}
 		}
 
 		.button {

frontend/src/components/Confirm.vue

@@ -9,7 +9,7 @@
 		@hide="clickedOnce = false"
 	>
 		<div @click.shift.stop="confirm(true)" @click.exact="confirm()">
-			<slot name="trigger" ref="trigger" />
+			<slot ref="trigger" />
 		</div>
 		<template #content>
 			<a @click="confirm(null, $event)">

frontend/src/components/Modal.vue

@@ -89,7 +89,7 @@ p {
 }
 
 .modal-card-foot {
-	overflow: auto;
+	overflow: initial;
 
 	& > div {
 		display: flex;

frontend/src/components/Queue.vue

@@ -1,69 +1,77 @@
 <template>
 	<div id="queue">
-		<draggable
-			tag="transition-group"
-			:component-data="{
-				name: !drag ? 'draggable-list-transition' : null
-			}"
+		<div
+			v-if="queue.length > 0"
 			:class="{
 				'actionable-button-hidden': !actionableButtonVisible,
 				'scrollable-list': true
 			}"
-			v-if="queue.length > 0"
-			v-model="queue"
-			item-key="_id"
-			v-bind="dragOptions"
-			@start="drag = true"
-			@end="drag = false"
-			@change="repositionSongInQueue"
 		>
-			<template #item="{element, index}">
-				<song-item
-					:song="element"
-					:requested-by="
-						station.type === 'community' &&
-							station.partyMode === true
-					"
-					:class="{
-						'item-draggable': isAdminOnly() || isOwnerOnly()
-					}"
-					:disabled-actions="[]"
-				>
-					<template v-if="isAdminOnly() || isOwnerOnly()" #actions>
-						<div class="song-actions">
-							<confirm
-								v-if="isOwnerOnly() || isAdminOnly()"
-								placement="left"
-								@confirm="removeFromQueue(element.youtubeId)"
-							>
+			<draggable
+				tag="transition-group"
+				:component-data="{
+					name: !drag ? 'draggable-list-transition' : null
+				}"
+				v-model="queue"
+				item-key="_id"
+				v-bind="dragOptions"
+				@start="drag = true"
+				@end="drag = false"
+				@change="repositionSongInQueue"
+			>
+				<template #item="{element, index}">
+					<song-item
+						:song="element"
+						:requested-by="
+							station.type === 'community' &&
+								station.partyMode === true
+						"
+						:class="{
+							'item-draggable': isAdminOnly() || isOwnerOnly()
+						}"
+						:disabled-actions="[]"
+					>
+						<template
+							v-if="isAdminOnly() || isOwnerOnly()"
+							#actions
+						>
+							<div class="icons-group">
+								<confirm
+									v-if="isOwnerOnly() || isAdminOnly()"
+									placement="left"
+									@confirm="
+										removeFromQueue(element.youtubeId)
+									"
+								>
+									<i
+										class="material-icons delete-icon"
+										content="Remove Song from Queue"
+										v-tippy
+										>delete_forever</i
+									>
+								</confirm>
 								<i
-									class="material-icons delete-icon"
-									content="Remove Song from Queue"
+									class="material-icons"
+									v-if="index > 0"
+									@click="moveSongToTop(element, index)"
+									content="Move to top of Queue"
 									v-tippy
-									>delete_forever</i
+									>vertical_align_top</i
 								>
-							</confirm>
-							<i
-								class="material-icons"
-								v-if="index > 0"
-								@click="moveSongToTop(element, index)"
-								content="Move to top of Queue"
-								v-tippy
-								>vertical_align_top</i
-							>
-							<i
-								v-if="queue.length - 1 !== index"
-								@click="moveSongToBottom(element, index)"
-								class="material-icons"
-								content="Move to bottom of Queue"
-								v-tippy
-								>vertical_align_bottom</i
-							>
-						</div>
-					</template>
-				</song-item>
-			</template>
-		</draggable>
+								<i
+									v-if="queue.length - 1 !== index"
+									@click="moveSongToBottom(element, index)"
+									class="material-icons"
+									content="Move to bottom of Queue"
+									v-tippy
+									>vertical_align_bottom</i
+								>
+							</div>
+						</template>
+					</song-item>
+				</template>
+			</draggable>
+		</div>
 		<p class="nothing-here-text" v-else>
 			There are no songs currently queued
 		</p>

frontend/src/components/SongItem.vue

@@ -87,55 +87,58 @@
 					>
 
 					<template #content>
-						<a
-							v-if="disabledActions.indexOf('youtube') === -1"
-							target="_blank"
-							:href="
-								`https://www.youtube.com/watch?v=${song.youtubeId}`
-							"
-							content="View on Youtube"
-							v-tippy
-						>
-							<div class="youtube-icon"></div>
-						</a>
-						<i
-							v-if="disabledActions.indexOf('report') === -1"
-							class="material-icons report-icon"
-							@click="report(song)"
-							content="Report Song"
-							v-tippy
-						>
-							flag
-						</i>
-						<add-to-playlist-dropdown
-							v-if="
-								disabledActions.indexOf('addToPlaylist') === -1
-							"
-							:song="song"
-						>
-							<template #button>
-								<i
-									class="material-icons add-to-playlist-icon"
-									content="Add Song to Playlist"
-									v-tippy
-									>playlist_add</i
-								>
-							</template>
-						</add-to-playlist-dropdown>
-						<i
-							v-if="
-								loggedIn &&
-									userRole === 'admin' &&
-									disabledActions.indexOf('edit') === -1
-							"
-							class="material-icons edit-icon"
-							@click="edit(song)"
-							content="Edit Song"
-							v-tippy
-						>
-							edit
-						</i>
-						<slot name="actions" />
+						<div class="icons-group">
+							<a
+								v-if="disabledActions.indexOf('youtube') === -1"
+								target="_blank"
+								:href="
+									`https://www.youtube.com/watch?v=${song.youtubeId}`
+								"
+								content="View on Youtube"
+								v-tippy
+							>
+								<div class="youtube-icon"></div>
+							</a>
+							<i
+								v-if="disabledActions.indexOf('report') === -1"
+								class="material-icons report-icon"
+								@click="report(song)"
+								content="Report Song"
+								v-tippy
+							>
+								flag
+							</i>
+							<add-to-playlist-dropdown
+								v-if="
+									disabledActions.indexOf('addToPlaylist') ===
+										-1
+								"
+								:song="song"
+							>
+								<template #button>
+									<i
+										class="material-icons add-to-playlist-icon"
+										content="Add Song to Playlist"
+										v-tippy
+										>playlist_add</i
+									>
+								</template>
+							</add-to-playlist-dropdown>
+							<i
+								v-if="
+									loggedIn &&
+										userRole === 'admin' &&
+										disabledActions.indexOf('edit') === -1
+								"
+								class="material-icons edit-icon"
+								@click="edit(song)"
+								content="Edit Song"
+								v-tippy
+							>
+								edit
+							</i>
+							<slot name="actions" />
+						</div>
 					</template>
 				</tippy>
 				<a

frontend/src/components/modals/EditPlaylist/index.vue

@@ -104,77 +104,75 @@
 											}"
 										>
 											<template #actions>
-												<div class="song-actions">
+												<i
+													class="material-icons add-to-queue-icon"
+													v-if="
+														station.partyMode &&
+															!station.locked
+													"
+													@click="
+														addSongToQueue(
+															element.youtubeId
+														)
+													"
+													content="Add Song to Queue"
+													v-tippy
+													>queue</i
+												>
+												<confirm
+													v-if="
+														userId ===
+															playlist.createdBy ||
+															isEditable()
+													"
+													placement="left"
+													@confirm="
+														removeSongFromPlaylist(
+															element.youtubeId
+														)
+													"
+												>
 													<i
-														class="material-icons add-to-queue-icon"
-														v-if="
-															station.partyMode &&
-																!station.locked
-														"
-														@click="
-															addSongToQueue(
-																element.youtubeId
-															)
-														"
-														content="Add Song to Queue"
+														class="material-icons delete-icon"
+														content="Remove Song from Playlist"
 														v-tippy
-														>queue</i
+														>delete_forever</i
 													>
-													<confirm
-														v-if="
-															userId ===
-																playlist.createdBy ||
-																isEditable()
-														"
-														placement="left"
-														@confirm="
-															removeSongFromPlaylist(
-																element.youtubeId
-															)
-														"
-													>
-														<i
-															class="material-icons delete-icon"
-															content="Remove Song from Playlist"
-															v-tippy
-															>delete_forever</i
-														>
-													</confirm>
-													<i
-														class="material-icons"
-														v-if="
-															isEditable() &&
-																index > 0
-														"
-														@click="
-															moveSongToTop(
-																element,
-																index
-															)
-														"
-														content="Move to top of Playlist"
-														v-tippy
-														>vertical_align_top</i
-													>
-													<i
-														v-if="
-															isEditable() &&
-																playlistSongs.length -
-																	1 !==
-																	index
-														"
-														@click="
-															moveSongToBottom(
-																element,
+												</confirm>
+												<i
+													class="material-icons"
+													v-if="
+														isEditable() &&
+															index > 0
+													"
+													@click="
+														moveSongToTop(
+															element,
+															index
+														)
+													"
+													content="Move to top of Playlist"
+													v-tippy
+													>vertical_align_top</i
+												>
+												<i
+													v-if="
+														isEditable() &&
+															playlistSongs.length -
+																1 !==
 																index
-															)
-														"
-														class="material-icons"
-														content="Move to bottom of Playlist"
-														v-tippy
-														>vertical_align_bottom</i
-													>
-												</div>
+													"
+													@click="
+														moveSongToBottom(
+															element,
+															index
+														)
+													"
+													class="material-icons"
+													content="Move to bottom of Playlist"
+													v-tippy
+													>vertical_align_bottom</i
+												>
 											</template>
 										</song-item>
 									</div>

frontend/src/components/modals/ManageStationKris/Tabs/Playlists.vue

@@ -265,21 +265,23 @@
 				>
 					Create new playlist
 				</button>
-				<draggable
-					tag="transition-group"
-					:component-data="{
-						name: !drag ? 'draggable-list-transition' : null
-					}"
+				<div
+					class="menu-list scrollable-list"
 					v-if="playlists.length > 0"
-					item-key="_id"
-					v-model="playlists"
-					v-bind="dragOptions"
-					@start="drag = true"
-					@end="drag = false"
-					@change="savePlaylistOrder"
 				>
-					<template #item="{element}">
-						<div class="menu-list scrollable-list">
+					<draggable
+						tag="transition-group"
+						:component-data="{
+							name: !drag ? 'draggable-list-transition' : null
+						}"
+						item-key="_id"
+						v-model="playlists"
+						v-bind="dragOptions"
+						@start="drag = true"
+						@end="drag = false"
+						@change="savePlaylistOrder"
+					>
+						<template #item="{element}">
 							<playlist-item
 								class="item-draggable"
 								:playlist="element"
@@ -439,9 +441,10 @@
 									>
 								</template>
 							</playlist-item>
-						</div>
-					</template>
-				</draggable>
+						</template>
+					</draggable>
+				</div>
+
 				<p v-else class="has-text-centered scrollable-list">
 					You don't have any playlists!
 				</p>

frontend/src/components/modals/ManageStationKris/Tabs/Songs.vue

@@ -65,7 +65,7 @@
 							:song="song"
 						>
 							<template #actions>
-								<div class="song-actions">
+								<div class="icons-group">
 									<i
 										class="material-icons add-to-queue-icon"
 										v-if="

frontend/src/components/modals/ManageStationOwen/Tabs/Playlists.vue

@@ -218,21 +218,23 @@
 				>
 					Create new playlist
 				</button>
-				<draggable
-					tag="transition-group"
-					:component-data="{
-						name: !drag ? 'draggable-list-transition' : null
-					}"
-					item-key="_id"
+				<div
+					class="menu-list scrollable-list"
 					v-if="playlists.length > 0"
-					v-model="playlists"
-					v-bind="dragOptions"
-					@start="drag = true"
-					@end="drag = false"
-					@change="savePlaylistOrder"
 				>
-					<template #item="{element}">
-						<div class="menu-list scrollable-list">
+					<draggable
+						tag="transition-group"
+						:component-data="{
+							name: !drag ? 'draggable-list-transition' : null
+						}"
+						item-key="_id"
+						v-model="playlists"
+						v-bind="dragOptions"
+						@start="drag = true"
+						@end="drag = false"
+						@change="savePlaylistOrder"
+					>
+						<template #item="{element}">
 							<playlist-item
 								class="item-draggable"
 								:playlist="element"
@@ -308,9 +310,10 @@
 									>
 								</template>
 							</playlist-item>
-						</div>
-					</template>
-				</draggable>
+						</template>
+					</draggable>
+				</div>
+
 				<p v-else class="has-text-centered scrollable-list">
 					You don't have any playlists!
 				</p>

frontend/src/components/modals/ManageStationOwen/Tabs/Search.vue

@@ -26,7 +26,7 @@
 					:song="song"
 				>
 					<template #actions>
-						<div class="song-actions">
+						<div class="icons-group">
 							<i
 								class="material-icons add-to-queue-icon"
 								v-if="station.partyMode && !station.locked"

frontend/src/pages/Profile/Tabs/RecentActivity.vue

@@ -22,7 +22,6 @@
 						<confirm
 							v-if="userId === myUserId"
 							@confirm="hideActivity(activity._id)"
-							placement="left"
 						>
 							<a content="Hide Activity" v-tippy>
 								<i class="material-icons hide-icon"

frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -1,20 +1,19 @@
 <template>
 	<div id="my-playlists">
-		<draggable
-			tag="transition-group"
-			:component-data="{
-				name: !drag ? 'draggable-list-transition' : null
-			}"
-			v-if="playlists.length > 0"
-			v-model="playlists"
-			item-key="_id"
-			v-bind="dragOptions"
-			@start="drag = true"
-			@end="drag = false"
-			@change="savePlaylistOrder"
-		>
-			<template #item="{element}">
-				<div class="menu-list scrollable-list">
+		<div class="menu-list scrollable-list" v-if="playlists.length > 0">
+			<draggable
+				tag="transition-group"
+				:component-data="{
+					name: !drag ? 'draggable-list-transition' : null
+				}"
+				v-model="playlists"
+				item-key="_id"
+				v-bind="dragOptions"
+				@start="drag = true"
+				@end="drag = false"
+				@change="savePlaylistOrder"
+			>
+				<template #item="{element}">
 					<playlist-item :playlist="element" class="item-draggable">
 						<template #actions>
 							<div class="icons-group">
@@ -87,9 +86,10 @@
 							</div>
 						</template>
 					</playlist-item>
-				</div>
-			</template>
-		</draggable>
+				</template>
+			</draggable>
+		</div>
+
 		<p v-else class="nothing-here-text scrollable-list">
 			No Playlists found
 		</p>

frontend/src/pages/Station/index.vue

@@ -2158,7 +2158,7 @@ export default {
 #station-outer-container {
 	margin: 0 auto;
 	padding: 20px 40px;
-	min-height: calc(100vh - 64px);
+	min-height: calc(100vh - 64px - 130px);
 	width: 100%;
 	max-width: 1800px;
 	display: flex;