Merge branch 'staging' of https://github.com/Musare/Musare into staging

frontend/src/App.vue

@@ -1474,6 +1474,34 @@ button.delete:focus {
 
 	&.is-grouped {
 		display: flex;
+
+		& > .control {
+			&.select.is-expanded > select {
+				width: 100%;
+			}
+			& > input,
+			& > select,
+			& > .button,
+			&.label {
+				border-radius: 0;
+			}
+			&:first-child {
+				& > input,
+				& > select,
+				& > .button,
+				&.label {
+					border-radius: @border-radius 0 0 @border-radius;
+				}
+			}
+			&:last-child {
+				& > input,
+				& > select,
+				& > .button,
+				&.label {
+					border-radius: 0 @border-radius @border-radius 0;
+				}
+			}
+		}
 	}
 
 	&.is-expanded {

frontend/src/components/AdvancedTable.vue

@@ -2321,32 +2321,9 @@ export default {
 			padding-left: 8px;
 			padding-right: 8px;
 		}
-		&.select.is-expanded > select {
-			width: 100%;
-		}
-		& > input,
-		:deep(& > div > input),
-		& > select,
-		& > .button,
-		&.label {
+		:deep(& > div > input) {
 			border-radius: 0;
 		}
-		&:first-child {
-			& > input,
-			& > select,
-			& > .button,
-			&.label {
-				border-radius: @border-radius 0 0 @border-radius;
-			}
-		}
-		&:last-child {
-			& > input,
-			& > select,
-			& > .button,
-			&.label {
-				border-radius: 0 @border-radius @border-radius 0;
-			}
-		}
 		& > .button {
 			font-size: 22px;
 		}

frontend/src/components/modals/EditUser.vue

@@ -4,35 +4,43 @@
 			<template #body v-if="user && user._id">
 				<div class="section">
 					<label class="label"> Change username </label>
-					<p class="control has-addons">
-						<input
-							v-model="user.username"
-							class="input is-expanded"
-							type="text"
-							placeholder="Username"
-							autofocus
-						/>
-						<a class="button is-info" @click="updateUsername()"
-							>Update Username</a
-						>
+					<p class="control is-grouped">
+						<span class="control is-expanded">
+							<input
+								v-model="user.username"
+								class="input"
+								type="text"
+								placeholder="Username"
+								autofocus
+							/>
+						</span>
+						<span class="control">
+							<a class="button is-info" @click="updateUsername()"
+								>Update Username</a
+							>
+						</span>
 					</p>
 
 					<label class="label"> Change email address </label>
-					<p class="control has-addons">
-						<input
-							v-model="user.email.address"
-							class="input is-expanded"
-							type="text"
-							placeholder="Email Address"
-							autofocus
-						/>
-						<a class="button is-info" @click="updateEmail()"
-							>Update Email Address</a
-						>
+					<p class="control is-grouped">
+						<span class="control is-expanded">
+							<input
+								v-model="user.email.address"
+								class="input"
+								type="text"
+								placeholder="Email Address"
+								autofocus
+							/>
+						</span>
+						<span class="control">
+							<a class="button is-info" @click="updateEmail()"
+								>Update Email Address</a
+							>
+						</span>
 					</p>
 
 					<label class="label"> Change user role </label>
-					<div class="control is-grouped input-with-button">
+					<div class="control is-grouped">
 						<div class="control is-expanded select">
 							<select v-model="user.role">
 								<option>default</option>
@@ -49,8 +57,8 @@
 
 				<div class="section">
 					<label class="label"> Punish/Ban User </label>
-					<p class="control has-addons">
-						<span class="select">
+					<p class="control is-grouped">
+						<span class="control select">
 							<select v-model="ban.expiresAt">
 								<option value="1h">1 Hour</option>
 								<option value="12h">12 Hours</option>
@@ -62,16 +70,20 @@
 								<option value="1y">1 Year</option>
 							</select>
 						</span>
-						<input
-							v-model="ban.reason"
-							class="input is-expanded"
-							type="text"
-							placeholder="Ban reason"
-							autofocus
-						/>
-						<a class="button is-danger" @click="banUser()">
-							Ban user
-						</a>
+						<span class="control is-expanded">
+							<input
+								v-model="ban.reason"
+								class="input"
+								type="text"
+								placeholder="Ban reason"
+								autofocus
+							/>
+						</span>
+						<span class="control">
+							<a class="button is-danger" @click="banUser()">
+								Ban user
+							</a>
+						</span>
 					</p>
 				</div>
 			</template>

frontend/src/components/modals/RequestSong.vue

@@ -92,7 +92,7 @@
 
 					<br />
 
-					<div class="control is-grouped input-with-button">
+					<div class="control is-grouped">
 						<p class="control is-expanded">
 							<input
 								class="input"
@@ -102,20 +102,17 @@
 								@keyup.enter="importPlaylist()"
 							/>
 						</p>
-						<p class="control has-addons">
-							<span class="select" id="playlist-import-type">
-								<select
-									v-model="
-										youtubeSearch.playlist
-											.isImportingOnlyMusic
-									"
-								>
-									<option :value="false">Import all</option>
-									<option :value="true">
-										Import only music
-									</option>
-								</select>
-							</span>
+						<p id="playlist-import-type" class="control select">
+							<select
+								v-model="
+									youtubeSearch.playlist.isImportingOnlyMusic
+								"
+							>
+								<option :value="false">Import all</option>
+								<option :value="true">Import only music</option>
+							</select>
+						</p>
+						<p class="control">
 							<button
 								class="button is-info"
 								@click.prevent="importPlaylist()"