Fix issues with window size on admin components

frontend/components/Admin/QueueSongs.vue

@@ -1,39 +1,37 @@
 <template>
-	<div class='columns is-mobile'>
-		<div class='column is-8-desktop is-offset-2-desktop is-12-mobile'>
-			<table class='table is-striped'>
-				<thead>
-					<tr>
-						<td>Thumbnail</td>
-						<td>Title</td>
-						<td>YouTube ID</td>
-						<td>Artists</td>
-						<td>Genres</td>
-						<td>Requested By</td>
-						<td>Options</td>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for='(index, song) in songs' track-by='$index'>
-						<td>
-							<img class='song-thumbnail' :src='song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
-						</td>
-						<td>
-							<strong>{{ song.title }}</strong>
-						</td>
-						<td>{{ song._id }}</td>
-						<td>{{ song.artists.join(', ') }}</td>
-						<td>{{ song.genres.join(', ') }}</td>
-						<td>{{ song.requestedBy }}</td>
-						<td>
-							<a class='button is-primary' href='#' @click='edit(song, index)'>Edit</a>
-							<a class='button is-success' href='#' @click='add(song)'>Add</a>
-							<a class='button is-danger' href='#' @click='remove(song._id, index)'>Remove</a>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
+	<div class='container'>
+		<table class='table is-striped'>
+			<thead>
+				<tr>
+					<td>Thumbnail</td>
+					<td>Title</td>
+					<td>YouTube ID</td>
+					<td>Artists</td>
+					<td>Genres</td>
+					<td>Requested By</td>
+					<td>Options</td>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for='(index, song) in songs' track-by='$index'>
+					<td>
+						<img class='song-thumbnail' :src='song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
+					</td>
+					<td>
+						<strong>{{ song.title }}</strong>
+					</td>
+					<td>{{ song._id }}</td>
+					<td>{{ song.artists.join(', ') }}</td>
+					<td>{{ song.genres.join(', ') }}</td>
+					<td>{{ song.requestedBy }}</td>
+					<td>
+						<a class='button is-primary' href='#' @click='edit(song, index)'>Edit</a>
+						<a class='button is-success' href='#' @click='add(song)'>Add</a>
+						<a class='button is-danger' href='#' @click='remove(song._id, index)'>Remove</a>
+					</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
 	<edit-song v-show='isEditActive'></edit-song>
 </template>

frontend/components/Admin/Reports.vue

@@ -1,38 +1,36 @@
 <template>
-	<div class='columns is-mobile'>
-		<div class='column is-8-desktop is-offset-2-desktop is-12-mobile'>
-			<table class='table is-striped'>
-				<thead>
-					<tr>
-						<td>Song ID</td>
-						<td>Created By</td>
-						<td>Created At</td>
-						<td>Description</td>
-						<td>Options</td>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for='(index, report) in reports' track-by='$index'>
-						<td>
-							<span>{{ report.songId }}</span>
-						</td>
-						<td>
-							<span>{{ report.createdBy }}</span>
-						</td>
-						<td>
-							<span>{{ report.createdAt }}</span>
-						</td>
-						<td>
-							<span>{{ report.description }}</span>
-						</td>
-						<td>
-							<a class='button is-warning' href='#' @click='toggleModal(report)'>Issues</a>
-							<a class='button is-primary' href='#' @click='resolve(report._id)'>Resolve</a>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
+	<div class='container'>
+		<table class='table is-striped'>
+			<thead>
+				<tr>
+					<td>Song ID</td>
+					<td>Created By</td>
+					<td>Created At</td>
+					<td>Description</td>
+					<td>Options</td>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for='(index, report) in reports' track-by='$index'>
+					<td>
+						<span>{{ report.songId }}</span>
+					</td>
+					<td>
+						<span>{{ report.createdBy }}</span>
+					</td>
+					<td>
+						<span>{{ report.createdAt }}</span>
+					</td>
+					<td>
+						<span>{{ report.description }}</span>
+					</td>
+					<td>
+						<a class='button is-warning' href='#' @click='toggleModal(report)'>Issues</a>
+						<a class='button is-primary' href='#' @click='resolve(report._id)'>Resolve</a>
+					</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
 
 	<issues-modal v-if='isModalActive'></issues-modal>

frontend/components/Admin/Songs.vue

@@ -1,38 +1,36 @@
 <template>
-	<div class='columns is-mobile'>
-		<div class='column is-8-desktop is-offset-2-desktop is-12-mobile'>
-			<table class='table is-striped'>
-				<thead>
-					<tr>
-						<td>Thumbnail</td>
-						<td>Title</td>
-						<td>YouTube ID</td>
-						<td>Artists</td>
-						<td>Genres</td>
-						<td>Requested By</td>
-						<td>Options</td>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for='(index, song) in songs' track-by='$index'>
-						<td>
-							<img class='song-thumbnail' :src='song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
-						</td>
-						<td>
-							<strong>{{ song.title }}</strong>
-						</td>
-						<td>{{ song._id }}</td>
-						<td>{{ song.artists.join(', ') }}</td>
-						<td>{{ song.genres.join(', ') }}</td>
-						<td>{{ song.requestedBy }}</td>
-						<td>
-							<a class='button is-primary' href='#' @click='edit(song, index)'>Edit</a>
-							<a class='button is-danger' href='#' @click='remove(song._id, index)'>Remove</a>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
+	<div class='container'>
+		<table class='table is-striped'>
+			<thead>
+				<tr>
+					<td>Thumbnail</td>
+					<td>Title</td>
+					<td>YouTube ID</td>
+					<td>Artists</td>
+					<td>Genres</td>
+					<td>Requested By</td>
+					<td>Options</td>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for='(index, song) in songs' track-by='$index'>
+					<td>
+						<img class='song-thumbnail' :src='song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
+					</td>
+					<td>
+						<strong>{{ song.title }}</strong>
+					</td>
+					<td>{{ song._id }}</td>
+					<td>{{ song.artists.join(', ') }}</td>
+					<td>{{ song.genres.join(', ') }}</td>
+					<td>{{ song.requestedBy }}</td>
+					<td>
+						<a class='button is-primary' href='#' @click='edit(song, index)'>Edit</a>
+						<a class='button is-danger' href='#' @click='remove(song._id, index)'>Remove</a>
+					</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
 	<edit-song v-show='isEditActive'></edit-song>
 </template>

frontend/components/Admin/Stations.vue

@@ -1,84 +1,80 @@
 <template>
-	<div class='columns is-mobile'>
-		<div class='column is-8-desktop is-offset-2-desktop is-12-mobile'>
-			<table class='table is-striped'>
-				<thead>
-					<tr>
-						<td>ID</td>
-						<td>Type</td>
-						<td>Display Name</td>
-						<td>Description</td>
-						<td>Options</td>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for='(index, station) in stations' track-by='$index'>
-						<td>
-							<span>{{ station._id }}</span>
-						</td>
-						<td>
-							<span>{{ station.type }}</span>
-						</td>
-						<td>
-							<span>{{ station.description }}</span>
-						</td>
-						<td>
-							<span>{{ station.description }}</span>
-						</td>
-						<td>
-							<a class='button is-danger' @click='removeStation(index)' href='#'>Remove</a>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
+	<div class='container'>
+		<table class='table is-striped'>
+			<thead>
+				<tr>
+					<td>ID</td>
+					<td>Type</td>
+					<td>Display Name</td>
+					<td>Description</td>
+					<td>Options</td>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for='(index, station) in stations' track-by='$index'>
+					<td>
+						<span>{{ station._id }}</span>
+					</td>
+					<td>
+						<span>{{ station.type }}</span>
+					</td>
+					<td>
+						<span>{{ station.description }}</span>
+					</td>
+					<td>
+						<span>{{ station.description }}</span>
+					</td>
+					<td>
+						<a class='button is-danger' @click='removeStation(index)' href='#'>Remove</a>
+					</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
-	<div class='columns is-mobile'>
-		<div class='column is-8-desktop is-offset-2-desktop is-12-mobile'>
-			<div class='card is-fullwidth'>
-				<header class='card-header'>
-					<p class='card-header-title'>Create official station</p>
-				</header>
-				<div class='card-content'>
-					<div class='content'>
-						<div class='control is-horizontal'>
-							<div class='control is-grouped'>
-								<p class='control is-expanded'>
-									<input class='input' type='text' placeholder='Unique Identifier' v-model='newStation._id'>
-								</p>
-								<p class='control is-expanded'>
-									<input class='input' type='text' placeholder='Display Name' v-model='newStation.displayName'>
-								</p>
-							</div>
+	<div class='container'>
+		<div class='card is-fullwidth'>
+			<header class='card-header'>
+				<p class='card-header-title'>Create official station</p>
+			</header>
+			<div class='card-content'>
+				<div class='content'>
+					<div class='control is-horizontal'>
+						<div class='control is-grouped'>
+							<p class='control is-expanded'>
+								<input class='input' type='text' placeholder='Unique Identifier' v-model='newStation._id'>
+							</p>
+							<p class='control is-expanded'>
+								<input class='input' type='text' placeholder='Display Name' v-model='newStation.displayName'>
+							</p>
 						</div>
-						<label class='label'>Description</label>
-						<p class='control is-expanded'>
-							<input class='input' type='text' placeholder='Short description' v-model='newStation.description'>
-						</p>
-						<label class='label'>Genres</label>
-						<p class='control has-addons'>
-							<input class='input' id='new-genre' type='text' placeholder='Genre' v-on:keyup.enter='addGenre()'>
-							<a class='button is-info' href='#' @click='addGenre()'>Add genre</a>
-						</p>
-						<span class='tag is-info' v-for='(index, genre) in newStation.genres' track-by='$index'>
-							{{ genre }}
-							<button class='delete is-info' @click='removeGenre(index)'></button>
-						</span>
-						<label class='label'>Blacklisted Genres</label>
-						<p class='control has-addons'>
-							<input class='input' id='new-blacklisted-genre' type='text' placeholder='Blacklisted Genre' v-on:keyup.enter='addBlacklistedGenre()'>
-							<a class='button is-info' href='#' @click='addBlacklistedGenre()'>Add blacklisted genre</a>
-						</p>
-						<span class='tag is-info' v-for='(index, genre) in newStation.blacklistedGenres' track-by='$index'>
-							{{ genre }}
-							<button class='delete is-info' @click='removeBlacklistedGenre(index)'></button>
-						</span>
 					</div>
+					<label class='label'>Description</label>
+					<p class='control is-expanded'>
+						<input class='input' type='text' placeholder='Short description' v-model='newStation.description'>
+					</p>
+					<label class='label'>Genres</label>
+					<p class='control has-addons'>
+						<input class='input' id='new-genre' type='text' placeholder='Genre' v-on:keyup.enter='addGenre()'>
+						<a class='button is-info' href='#' @click='addGenre()'>Add genre</a>
+					</p>
+					<span class='tag is-info' v-for='(index, genre) in newStation.genres' track-by='$index'>
+						{{ genre }}
+						<button class='delete is-info' @click='removeGenre(index)'></button>
+					</span>
+					<label class='label'>Blacklisted Genres</label>
+					<p class='control has-addons'>
+						<input class='input' id='new-blacklisted-genre' type='text' placeholder='Blacklisted Genre' v-on:keyup.enter='addBlacklistedGenre()'>
+						<a class='button is-info' href='#' @click='addBlacklistedGenre()'>Add blacklisted genre</a>
+					</p>
+					<span class='tag is-info' v-for='(index, genre) in newStation.blacklistedGenres' track-by='$index'>
+						{{ genre }}
+						<button class='delete is-info' @click='removeBlacklistedGenre(index)'></button>
+					</span>
 				</div>
-				<footer class='card-footer'>
-					<a class='card-footer-item' @click='createStation()' href='#'>Create</a>
-				</footer>
 			</div>
+			<footer class='card-footer'>
+				<a class='card-footer-item' @click='createStation()' href='#'>Create</a>
+			</footer>
 		</div>
 	</div>
 </template>