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

frontend/src/components/Modal.vue

@@ -86,4 +86,15 @@ p {
 .modal-card-title {
 	font-size: 27px;
 }
+
+.modal-card-foot {
+	& > div {
+		display: flex;
+		flex-grow: 1;
+	}
+	.right {
+		margin-left: auto;
+		justify-content: right;
+	}
+}
 </style>

frontend/src/components/modals/EditNews.vue

@@ -148,17 +148,6 @@
 				<i class="material-icons save-changes">done</i>
 				<span>&nbsp;Save and close</span>
 			</button>
-			<button
-				class="button is-danger"
-				@click="
-					closeModal({
-						sector,
-						modal: 'editNews'
-					})
-				"
-			>
-				<span>&nbsp;Close</span>
-			</button>
 		</div>
 	</modal>
 </template>

frontend/src/components/modals/EditPlaylist.vue

@@ -341,30 +341,32 @@
 			>
 				Download Playlist
 			</a>
-			<a
-				class="button is-danger"
-				@click="removePlaylist()"
-				href="#"
-				v-if="isEditable()"
-			>
-				Remove Playlist
-			</a>
-			<a
-				class="button is-danger"
-				@click="clearAndRefillStationPlaylist()"
-				href="#"
-				v-if="playlist.type === 'station'"
-			>
-				Clear and refill station playlist
-			</a>
-			<a
-				class="button is-danger"
-				@click="clearAndRefillGenrePlaylist()"
-				href="#"
-				v-if="playlist.type === 'genre'"
-			>
-				Clear and refill genre playlist
-			</a>
+			<div class="right">
+				<a
+					class="button is-danger"
+					@click="clearAndRefillStationPlaylist()"
+					href="#"
+					v-if="playlist.type === 'station'"
+				>
+					Clear and refill station playlist
+				</a>
+				<a
+					class="button is-danger"
+					@click="clearAndRefillGenrePlaylist()"
+					href="#"
+					v-if="playlist.type === 'genre'"
+				>
+					Clear and refill genre playlist
+				</a>
+				<a
+					class="button is-danger"
+					@click="removePlaylist()"
+					href="#"
+					v-if="isEditable()"
+				>
+					Remove Playlist
+				</a>
+			</div>
 		</div>
 	</modal>
 </template>
@@ -769,10 +771,6 @@ export default {
 			padding: 16px;
 		}
 	}
-
-	.modal-card-foot {
-		justify-content: flex-end;
-	}
 }
 </style>
 

frontend/src/components/modals/EditSong.vue

@@ -477,13 +477,6 @@
 					type="save-and-close"
 					@clicked="save(song, true)"
 				/>
-
-				<button
-					class="button is-danger"
-					@click="closeModal({ sector: sector, modal: 'editSong' })"
-				>
-					<span>&nbsp;Close</span>
-				</button>
 			</div>
 		</modal>
 		<floating-box id="genreHelper" ref="genreHelper">
@@ -1440,14 +1433,8 @@ export default {
 		}
 
 		.modal-card-foot {
-			justify-content: flex-end;
-
-			div {
-				display: flex;
-
-				div {
-					margin-right: 5px;
-				}
+			div div {
+				margin-right: 5px;
 			}
 		}
 	}

frontend/src/components/modals/EditStation.vue

@@ -472,21 +472,21 @@
 		</template>
 		<template #footer>
 			<save-button ref="saveButton" @clicked="saveChanges()" />
-
-			<button
-				v-if="station && station.type === 'community'"
-				class="button is-danger"
-				@click="deleteStation()"
-			>
-				Delete station
-			</button>
-
-			<button
-				class="button is-danger"
-				@click="clearAndRefillStationQueue()"
-			>
-				Clear and refill station queue
-			</button>
+			<div class="right">
+				<button
+					class="button is-danger"
+					@click="clearAndRefillStationQueue()"
+				>
+					Clear and refill station queue
+				</button>
+				<button
+					v-if="station && station.type === 'community'"
+					class="button is-danger"
+					@click="deleteStation()"
+				>
+					Delete station
+				</button>
+			</div>
 		</template>
 	</modal>
 </template>
@@ -1103,12 +1103,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.edit-station-modal .modal-card-foot {
-	justify-content: flex-end;
-}
-</style>
-
 <style lang="scss" scoped>
 .night-mode {
 	.modal-card,

frontend/src/components/modals/EditUser.vue

@@ -71,17 +71,6 @@
 				<button class="button is-warning" @click="removeSessions()">
 					<span>&nbsp;Remove all sessions</span>
 				</button>
-				<button
-					class="button is-danger"
-					@click="
-						closeModal({
-							sector,
-							modal: 'editUser'
-						})
-					"
-				>
-					<span>&nbsp;Close</span>
-				</button>
 			</div>
 		</modal>
 	</div>

frontend/src/components/modals/Login.vue

@@ -83,14 +83,13 @@
 				</section>
 
 				<footer class="modal-card-foot">
-					<router-link to="/register" v-if="isPage">
-						Don't have an account?
-					</router-link>
-					<a v-else href="#" @click="changeToRegisterModal()">
-						Don't have an account?
-					</a>
-
 					<div id="actions">
+						<a
+							class="button is-primary"
+							href="#"
+							@click="submitModal()"
+							>Login</a
+						>
 						<a
 							class="button is-github"
 							:href="apiDomain + '/auth/github/authorize'"
@@ -104,13 +103,13 @@
 							</div>
 							&nbsp;&nbsp;Login with GitHub
 						</a>
-						<a
-							class="button is-primary"
-							href="#"
-							@click="submitModal()"
-							>Login</a
-						>
 					</div>
+					<router-link to="/register" v-if="isPage">
+						Don't have an account?
+					</router-link>
+					<a v-else href="#" @click="changeToRegisterModal()">
+						Don't have an account?
+					</a>
 				</footer>
 			</div>
 		</div>
@@ -209,9 +208,9 @@ export default {
 
 #forgot-password {
 	display: flex;
-	justify-content: flex-end;
+	justify-content: flex-start;
 	height: 0;
-	margin-top: 5px;
+	margin: 5px 0;
 }
 
 .modal-card-foot {

frontend/src/components/modals/Register.vue

@@ -108,14 +108,13 @@
 					</p>
 				</section>
 				<footer class="modal-card-foot">
-					<router-link to="/login" v-if="isPage">
-						Already have an account?
-					</router-link>
-					<a v-else href="#" @click="changeToLoginModal()">
-						Already have an account?
-					</a>
-
 					<div id="actions">
+						<a
+							class="button is-primary"
+							href="#"
+							@click="submitModal()"
+							>Register</a
+						>
 						<a
 							class="button is-github"
 							:href="apiDomain + '/auth/github/authorize'"
@@ -129,13 +128,13 @@
 							</div>
 							&nbsp;&nbsp;Register with GitHub
 						</a>
-						<a
-							class="button is-primary"
-							href="#"
-							@click="submitModal()"
-							>Register</a
-						>
 					</div>
+					<router-link to="/login" v-if="isPage">
+						Already have an account?
+					</router-link>
+					<a v-else href="#" @click="changeToLoginModal()">
+						Already have an account?
+					</a>
 				</footer>
 			</div>
 		</div>

frontend/src/components/modals/ViewPunishment.vue

@@ -55,19 +55,7 @@
 					</div>
 				</article>
 			</div>
-			<div slot="footer">
-				<button
-					class="button is-danger"
-					@click="
-						closeModal({
-							sector,
-							modal: 'viewPunishment'
-						})
-					"
-				>
-					<span>&nbsp;Close</span>
-				</button>
-			</div>
+			<div slot="footer"></div>
 		</modal>
 	</div>
 </template>

frontend/src/components/modals/ViewReport.vue

@@ -72,18 +72,6 @@
 			>
 				<span>Go to song</span>
 			</a>
-			<a
-				class="button is-danger"
-				@click="
-					closeModal({
-						sector,
-						modal: 'viewReport'
-					})
-				"
-				href="#"
-			>
-				<span>Cancel</span>
-			</a>
 		</div>
 	</modal>
 </template>

frontend/src/pages/Station/index.vue

@@ -68,6 +68,115 @@
 					:class="{ 'nothing-here': noSong }"
 				>
 					<div id="station-left-column" class="column">
+						<div id="about-station-container" class="quadrant">
+							<div id="station-info">
+								<div class="row" id="station-name">
+									<h1>{{ station.displayName }}</h1>
+									<a href="#">
+										<!-- Favorite Station Button -->
+										<i
+											v-if="
+												loggedIn && station.isFavorited
+											"
+											@click.prevent="unfavoriteStation()"
+											content="Unfavorite Station"
+											v-tippy
+											class="material-icons"
+											>star</i
+										>
+										<i
+											v-if="
+												loggedIn && !station.isFavorited
+											"
+											@click.prevent="favoriteStation()"
+											class="material-icons"
+											content="Favorite Station"
+											v-tippy
+											>star_border</i
+										>
+									</a>
+									<i
+										class="material-icons stationMode"
+										:content="
+											station.partyMode
+												? 'Station in Party mode'
+												: 'Station in Playlist mode'
+										"
+										v-tippy
+										>{{
+											station.partyMode
+												? "emoji_people"
+												: "playlist_play"
+										}}</i
+									>
+								</div>
+								<p>{{ station.description }}</p>
+							</div>
+
+							<div id="admin-buttons" v-if="isOwnerOrAdmin()">
+								<!-- (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>
+
+								<!-- (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) Station Settings Button -->
+								<button
+									class="button is-primary"
+									@click="
+										openModal({
+											sector: 'station',
+											modal: 'editStation'
+										})
+									"
+								>
+									<i class="material-icons icon-with-button"
+										>settings</i
+									>
+									<span class="optional-desktop-only-text">
+										Station settings
+									</span>
+								</button>
+							</div>
+						</div>
+						<div id="sidebar-container" class="quadrant">
+							<station-sidebar />
+						</div>
+					</div>
+					<div id="station-right-column" class="column">
 						<div class="player-container quadrant" v-show="!noSong">
 							<div id="video-container">
 								<div
@@ -452,115 +561,6 @@
 							</div>
 						</div>
 					</div>
-					<div id="station-right-column" class="column">
-						<div id="about-station-container" class="quadrant">
-							<div id="station-info">
-								<div class="row" id="station-name">
-									<h1>{{ station.displayName }}</h1>
-									<a href="#">
-										<!-- Favorite Station Button -->
-										<i
-											v-if="
-												loggedIn && station.isFavorited
-											"
-											@click.prevent="unfavoriteStation()"
-											content="Unfavorite Station"
-											v-tippy
-											class="material-icons"
-											>star</i
-										>
-										<i
-											v-if="
-												loggedIn && !station.isFavorited
-											"
-											@click.prevent="favoriteStation()"
-											class="material-icons"
-											content="Favorite Station"
-											v-tippy
-											>star_border</i
-										>
-									</a>
-									<i
-										class="material-icons stationMode"
-										:content="
-											station.partyMode
-												? 'Station in Party mode'
-												: 'Station in Playlist mode'
-										"
-										v-tippy
-										>{{
-											station.partyMode
-												? "emoji_people"
-												: "playlist_play"
-										}}</i
-									>
-								</div>
-								<p>{{ station.description }}</p>
-							</div>
-
-							<div id="admin-buttons" v-if="isOwnerOrAdmin()">
-								<!-- (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>
-
-								<!-- (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) Station Settings Button -->
-								<button
-									class="button is-primary"
-									@click="
-										openModal({
-											sector: 'station',
-											modal: 'editStation'
-										})
-									"
-								>
-									<i class="material-icons icon-with-button"
-										>settings</i
-									>
-									<span class="optional-desktop-only-text">
-										Station settings
-									</span>
-								</button>
-							</div>
-						</div>
-						<div id="sidebar-container" class="quadrant">
-							<station-sidebar />
-						</div>
-					</div>
 				</div>
 
 				<song-queue v-if="modals.station.addSongToQueue" />
@@ -2507,10 +2507,10 @@ export default {
 
 @media (min-width: 1500px) {
 	#station-left-column {
-		max-width: calc(100% - 650px);
+		max-width: 650px;
 	}
 	#station-right-column {
-		max-width: 650px;
+		max-width: calc(100% - 650px);
 	}
 }
 
@@ -2532,6 +2532,16 @@ export default {
 			flex-direction: column;
 
 			#station-left-column {
+				#about-station-container #admin-buttons {
+					flex-wrap: wrap;
+				}
+
+				#sidebar-container {
+					min-height: 350px;
+				}
+			}
+
+			#station-right-column {
 				#current-next-row {
 					flex-direction: column;
 				}
@@ -2569,16 +2579,6 @@ export default {
 					}
 				}
 			}
-
-			#station-right-column {
-				#about-station-container #admin-buttons {
-					flex-wrap: wrap;
-				}
-
-				#sidebar-container {
-					min-height: 350px;
-				}
-			}
 		}
 	}
 }