refactor: Improved card styling after removing bulma

frontend/src/App.vue

@@ -507,26 +507,6 @@ body {
 	padding-top: 60px;
 }
 
-.card {
-	position: relative;
-	background-color: var(--white);
-	color: var(--dark-grey);
-
-	.card-image,
-	.card-image .image,
-	.card-header {
-		display: flex;
-		position: relative;
-	}
-	.card-image .image {
-		padding-top: 100%;
-	}
-
-	.card-content {
-		padding: 20px;
-	}
-}
-
 .column {
 	display: flex;
 	flex: 1 1 0;
@@ -539,6 +519,11 @@ ul {
 	display: block;
 }
 
+ol,
+ul {
+	margin-left: 2em;
+}
+
 h1,
 h2,
 h3,

frontend/src/pages/About.vue

@@ -5,57 +5,51 @@
 		<div class="container">
 			<div class="content-wrapper">
 				<h1 class="has-text-centered page-title">About</h1>
-				<div class="card is-fullwidth">
+				<div class="card">
 					<header class="card-header">
-						<p class="card-header-title">The project</p>
+						<p>The project</p>
 					</header>
 					<div class="card-content">
-						<div class="content">
-							<p>
-								Musare is an open-source music website where you
-								can listen to real-time genre specific music
-								stations, or join community stations created by
-								users.
-							</p>
-						</div>
+						<p>
+							Musare is an open-source music website where you can
+							listen to real-time genre specific music stations,
+							or join community stations created by users.
+						</p>
 					</div>
 				</div>
-				<div class="card is-fullwidth">
+				<div class="card">
 					<header class="card-header">
-						<p class="card-header-title">How you can help</p>
+						<p>How you can help</p>
 					</header>
 					<div class="card-content">
-						<div class="content">
-							<span>
-								There are multiple ways you can help us:
-								<ol>
-									<li>
-										Reporting bugs. No website is perfect,
-										but we try to eliminate as many bugs as
-										possible. If you find a bug, we would
-										highly appreciate it if you could create
-										an issue on the GitHub project with
-										steps to reproduce the issue, so we can
-										fix it as soon as possible.
-									</li>
-									<li>
-										Sending us feedback. Your comments
-										and/or suggestions are extremely
-										valuable to us. In order to improve we
-										need to know what you like, don't like
-										and what you might want on the website.
-									</li>
-									<li>
-										Sharing the joy. The more people
-										enjoying Musare, the better. Telling
-										your friends or relatives about Musare
-										would increase the amount of users we
-										have, which would motivate us and cause
-										Musare to grow faster.
-									</li>
-								</ol>
-							</span>
-						</div>
+						<span>
+							There are multiple ways you can help us:
+							<ol>
+								<li>
+									Reporting bugs. No website is perfect, but
+									we try to eliminate as many bugs as
+									possible. If you find a bug, we would highly
+									appreciate it if you could create an issue
+									on the GitHub project with steps to
+									reproduce the issue, so we can fix it as
+									soon as possible.
+								</li>
+								<li>
+									Sending us feedback. Your comments and/or
+									suggestions are extremely valuable to us. In
+									order to improve we need to know what you
+									like, don't like and what you might want on
+									the website.
+								</li>
+								<li>
+									Sharing the joy. The more people enjoying
+									Musare, the better. Telling your friends or
+									relatives about Musare would increase the
+									amount of users we have, which would
+									motivate us and cause Musare to grow faster.
+								</li>
+							</ol>
+						</span>
 					</div>
 				</div>
 			</div>
@@ -86,6 +80,20 @@ export default {
 }
 
 .card {
-	margin-top: 50px;
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	padding: 20px;
+	margin: 10px 10px 50px 10px;
+	border-radius: 5px;
+	overflow: hidden;
+	background-color: var(--white);
+	color: var(--dark-grey);
+	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+
+	.card-header {
+		font-weight: 700;
+		padding-bottom: 10px;
+	}
 }
 </style>

frontend/src/pages/Admin/tabs/Punishments.vue

@@ -57,46 +57,44 @@
 					</tr>
 				</tbody>
 			</table>
-			<div class="card is-fullwidth">
+			<div class="card">
 				<header class="card-header">
-					<p class="card-header-title">Ban an IP</p>
+					<p>Ban an IP</p>
 				</header>
 				<div class="card-content">
-					<div class="content">
-						<label class="label">Expires In</label>
-						<select v-model="ipBan.expiresAt">
-							<option value="1h">1 Hour</option>
-							<option value="12h">12 Hours</option>
-							<option value="1d">1 Day</option>
-							<option value="1w">1 Week</option>
-							<option value="1m">1 Month</option>
-							<option value="3m">3 Months</option>
-							<option value="6m">6 Months</option>
-							<option value="1y">1 Year</option>
-						</select>
-						<label class="label">IP</label>
-						<p class="control is-expanded">
-							<input
-								v-model="ipBan.ip"
-								class="input"
-								type="text"
-								placeholder="IP address (xxx.xxx.xxx.xxx)"
-							/>
-						</p>
-						<label class="label">Reason</label>
-						<p class="control is-expanded">
-							<input
-								v-model="ipBan.reason"
-								class="input"
-								type="text"
-								placeholder="Reason"
-							/>
-						</p>
-					</div>
+					<label class="label">Expires In</label>
+					<select v-model="ipBan.expiresAt">
+						<option value="1h">1 Hour</option>
+						<option value="12h">12 Hours</option>
+						<option value="1d">1 Day</option>
+						<option value="1w">1 Week</option>
+						<option value="1m">1 Month</option>
+						<option value="3m">3 Months</option>
+						<option value="6m">6 Months</option>
+						<option value="1y">1 Year</option>
+					</select>
+					<label class="label">IP</label>
+					<p class="control is-expanded">
+						<input
+							v-model="ipBan.ip"
+							class="input"
+							type="text"
+							placeholder="IP address (xxx.xxx.xxx.xxx)"
+						/>
+					</p>
+					<label class="label">Reason</label>
+					<p class="control is-expanded">
+						<input
+							v-model="ipBan.reason"
+							class="input"
+							type="text"
+							placeholder="Reason"
+						/>
+					</p>
+					<button class="button is-primary" @click="banIP()">
+						Ban IP
+					</button>
 				</div>
-				<footer class="card-footer">
-					<a class="card-footer-item" @click="banIP()">Ban IP</a>
-				</footer>
 			</div>
 		</div>
 		<view-punishment
@@ -209,10 +207,6 @@ export default {
 	.card {
 		background: var(--dark-grey-3);
 
-		.card-header {
-			box-shadow: 0 1px 2px rgba(10, 10, 10, 0.8);
-		}
-
 		p,
 		.label {
 			color: var(--light-grey-2);
@@ -220,6 +214,27 @@ export default {
 	}
 }
 
+.card {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	padding: 20px;
+	margin: 10px 0;
+	border-radius: 5px;
+	background-color: var(--white);
+	color: var(--dark-grey);
+	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+
+	.card-header {
+		font-weight: 700;
+		padding-bottom: 10px;
+	}
+
+	.button.is-primary {
+		width: 100%;
+	}
+}
+
 td {
 	vertical-align: middle;
 }

frontend/src/pages/Admin/tabs/Statistics.vue

@@ -1,210 +1,164 @@
 <template>
 	<div class="container">
 		<page-metadata title="Admin | Statistics" />
-		<div class="columns">
-			<div
-				class="
-					card
-					column
-					is-10-desktop is-offset-1-desktop is-12-mobile
-				"
-			>
-				<header class="card-header">
-					<p class="card-header-title">Average Logs</p>
-				</header>
-				<div class="card-content">
-					<div class="content">
-						<table class="table">
-							<thead>
-								<tr>
-									<th>Name</th>
-									<th>Status</th>
-									<th>Stage</th>
-									<th>Jobs in queue</th>
-									<th>Jobs in progress</th>
-									<th>Jobs paused</th>
-									<th>Concurrency</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr
-									v-for="moduleItem in modules"
-									:key="moduleItem.name"
+		<div class="card">
+			<header class="card-header">
+				<p>Average Logs</p>
+			</header>
+			<div class="card-content">
+				<table class="table">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Status</th>
+							<th>Stage</th>
+							<th>Jobs in queue</th>
+							<th>Jobs in progress</th>
+							<th>Jobs paused</th>
+							<th>Concurrency</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr
+							v-for="moduleItem in modules"
+							:key="moduleItem.name"
+						>
+							<td>
+								<router-link
+									:to="'?moduleName=' + moduleItem.name"
+									>{{ moduleItem.name }}</router-link
 								>
-									<td>
-										<router-link
-											:to="
-												'?moduleName=' + moduleItem.name
-											"
-											>{{ moduleItem.name }}</router-link
-										>
-									</td>
-									<td>{{ moduleItem.status }}</td>
-									<td>{{ moduleItem.stage }}</td>
-									<td>{{ moduleItem.jobsInQueue }}</td>
-									<td>{{ moduleItem.jobsInProgress }}</td>
-									<td>{{ moduleItem.jobsPaused }}</td>
-									<td>{{ moduleItem.concurrency }}</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
+							</td>
+							<td>{{ moduleItem.status }}</td>
+							<td>{{ moduleItem.stage }}</td>
+							<td>{{ moduleItem.jobsInQueue }}</td>
+							<td>{{ moduleItem.jobsInProgress }}</td>
+							<td>{{ moduleItem.jobsPaused }}</td>
+							<td>{{ moduleItem.concurrency }}</td>
+						</tr>
+					</tbody>
+				</table>
 			</div>
 		</div>
 		<br />
-		<div class="columns" v-if="module">
-			<div
-				class="
-					card
-					column
-					is-10-desktop is-offset-1-desktop is-12-mobile
-				"
-			>
+		<div v-if="module">
+			<div class="card">
 				<header class="card-header">
-					<p class="card-header-title">Running tasks</p>
+					<p>Running tasks</p>
 				</header>
 				<div class="card-content">
-					<div class="content">
-						<table class="table">
-							<thead>
-								<tr>
-									<th>Name</th>
-									<th>Payload</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr
-									v-for="job in module.runningTasks"
-									:key="JSON.stringify(job)"
-								>
-									<td>{{ job.name }}</td>
-									<td>
-										{{ JSON.stringify(job.payload) }}
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
+					<table class="table">
+						<thead>
+							<tr>
+								<th>Name</th>
+								<th>Payload</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr
+								v-for="job in module.runningTasks"
+								:key="JSON.stringify(job)"
+							>
+								<td>{{ job.name }}</td>
+								<td>
+									{{ JSON.stringify(job.payload) }}
+								</td>
+							</tr>
+						</tbody>
+					</table>
 				</div>
 			</div>
-			<div
-				class="
-					card
-					column
-					is-10-desktop is-offset-1-desktop is-12-mobile
-				"
-			>
+			<div class="card">
 				<header class="card-header">
-					<p class="card-header-title">Paused tasks</p>
+					<p>Paused tasks</p>
 				</header>
 				<div class="card-content">
-					<div class="content">
-						<table class="table">
-							<thead>
-								<tr>
-									<th>Name</th>
-									<th>Payload</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr
-									v-for="job in module.pausedTasks"
-									:key="JSON.stringify(job)"
-								>
-									<td>{{ job.name }}</td>
-									<td>
-										{{ JSON.stringify(job.payload) }}
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
+					<table class="table">
+						<thead>
+							<tr>
+								<th>Name</th>
+								<th>Payload</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr
+								v-for="job in module.pausedTasks"
+								:key="JSON.stringify(job)"
+							>
+								<td>{{ job.name }}</td>
+								<td>
+									{{ JSON.stringify(job.payload) }}
+								</td>
+							</tr>
+						</tbody>
+					</table>
 				</div>
 			</div>
-			<div
-				class="
-					card
-					column
-					is-10-desktop is-offset-1-desktop is-12-mobile
-				"
-			>
+			<div class="card">
 				<header class="card-header">
-					<p class="card-header-title">Queued tasks</p>
+					<p>Queued tasks</p>
 				</header>
 				<div class="card-content">
-					<div class="content">
-						<table class="table">
-							<thead>
-								<tr>
-									<th>Name</th>
-									<th>Payload</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr
-									v-for="job in module.queuedTasks"
-									:key="JSON.stringify(job)"
-								>
-									<td>{{ job.name }}</td>
-									<td>
-										{{ JSON.stringify(job.payload) }}
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
+					<table class="table">
+						<thead>
+							<tr>
+								<th>Name</th>
+								<th>Payload</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr
+								v-for="job in module.queuedTasks"
+								:key="JSON.stringify(job)"
+							>
+								<td>{{ job.name }}</td>
+								<td>
+									{{ JSON.stringify(job.payload) }}
+								</td>
+							</tr>
+						</tbody>
+					</table>
 				</div>
 			</div>
 		</div>
 		<br />
-		<div class="columns" v-if="module">
-			<div
-				class="
-					card
-					column
-					is-10-desktop is-offset-1-desktop is-12-mobile
-				"
-			>
+		<div v-if="module">
+			<div class="card">
 				<header class="card-header">
-					<p class="card-header-title">Average Logs</p>
+					<p>Average Logs</p>
 				</header>
 				<div class="card-content">
-					<div class="content">
-						<table class="table">
-							<thead>
-								<tr>
-									<th>Job name</th>
-									<th>Successful</th>
-									<th>Failed</th>
-									<th>Total</th>
-									<th>Average timing</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr
-									v-for="(
-										job, jobName
-									) in module.jobStatistics"
-									:key="jobName"
-								>
-									<td>{{ jobName }}</td>
-									<td>
-										{{ job.successful }}
-									</td>
-									<td>
-										{{ job.failed }}
-									</td>
-									<td>
-										{{ job.total }}
-									</td>
-									<td>
-										{{ job.averageTiming }}
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
+					<table class="table">
+						<thead>
+							<tr>
+								<th>Job name</th>
+								<th>Successful</th>
+								<th>Failed</th>
+								<th>Total</th>
+								<th>Average timing</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr
+								v-for="(job, jobName) in module.jobStatistics"
+								:key="jobName"
+							>
+								<td>{{ jobName }}</td>
+								<td>
+									{{ job.successful }}
+								</td>
+								<td>
+									{{ job.failed }}
+								</td>
+								<td>
+									{{ job.total }}
+								</td>
+								<td>
+									{{ job.averageTiming }}
+								</td>
+							</tr>
+						</tbody>
+					</table>
 				</div>
 			</div>
 		</div>
@@ -305,4 +259,21 @@ td {
 .is-primary:focus {
 	background-color: var(--primary-color) !important;
 }
+
+.card {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	padding: 20px;
+	margin: 10px;
+	border-radius: 5px;
+	background-color: var(--white);
+	color: var(--dark-grey);
+	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+
+	.card-header {
+		font-weight: 700;
+		padding-bottom: 10px;
+	}
+}
 </style>

frontend/src/pages/Home.vue

@@ -54,7 +54,6 @@
 								params: { id: element.name }
 							}"
 							:class="{
-								card: true,
 								'station-card': true,
 								'item-draggable': true,
 								isPrivate: element.privacy === 'private',
@@ -64,10 +63,7 @@
 								'--primary-color: var(--' + element.theme + ')'
 							"
 						>
-							<song-thumbnail
-								class="card-image"
-								:song="element.currentSong"
-							/>
+							<song-thumbnail :song="element.currentSong" />
 							<div class="card-content">
 								<div class="media">
 									<div class="media-left displayName">
@@ -235,10 +231,10 @@
 				<a
 					v-if="loggedIn"
 					@click="openModal('createCommunityStation')"
-					class="card station-card createStation"
+					class="station-card createStation"
 				>
-					<div class="card-image">
-						<figure class="image is-square">
+					<div class="thumbnail">
+						<figure class="image">
 							<i class="material-icons">radio</i>
 						</figure>
 					</div>
@@ -258,10 +254,10 @@
 				<a
 					v-else
 					@click="openModal('login')"
-					class="card station-card createStation"
+					class="station-card createStation"
 				>
-					<div class="card-image">
-						<figure class="image is-square">
+					<div class="thumbnail">
+						<figure class="image">
 							<i class="material-icons">radio</i>
 						</figure>
 					</div>
@@ -284,17 +280,14 @@
 						name: 'station',
 						params: { id: station.name }
 					}"
-					class="card station-card"
+					class="station-card"
 					:class="{
 						isPrivate: station.privacy === 'private',
 						isMine: isOwner(station)
 					}"
 					:style="'--primary-color: var(--' + station.theme + ')'"
 				>
-					<song-thumbnail
-						class="card-image"
-						:song="station.currentSong"
-					/>
+					<song-thumbnail :song="station.currentSong" />
 					<div class="card-content">
 						<div class="media">
 							<div class="media-left displayName">
@@ -797,7 +790,7 @@ html {
 			rgba(34, 34, 34, 0.8) 100%
 		);
 	}
-	.card,
+	.station-card,
 	.card-content,
 	.card-content div {
 		background-color: var(--dark-grey-3);
@@ -808,12 +801,12 @@ html {
 		color: var(--light-grey-2);
 	}
 
-	.card-image i {
+	.thumbnail i {
 		user-select: none;
 		-webkit-user-select: none;
 	}
 
-	.card-image.thumbnail {
+	.thumbnail {
 		background-color: var(--dark-grey-2);
 	}
 
@@ -1023,6 +1016,9 @@ html {
 
 .station-card {
 	display: inline-flex;
+	position: relative;
+	background-color: var(--white);
+	color: var(--dark-grey);
 	flex-direction: row;
 	overflow: hidden;
 	margin: 10px;
@@ -1035,6 +1031,8 @@ html {
 	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
 
 	.card-content {
+		display: flex;
+		position: relative;
 		padding: 10px 10px 10px 15px;
 		display: flex;
 		flex-direction: column;
@@ -1100,11 +1098,19 @@ html {
 		}
 	}
 
-	.card-image.thumbnail {
+	.thumbnail {
+		display: flex;
+		position: relative;
 		min-width: 120px;
 		width: 120px;
 		height: 120px;
 		margin: 0;
+
+		.image {
+			display: flex;
+			position: relative;
+			padding-top: 100%;
+		}
 	}
 
 	.bottomBar {
@@ -1140,8 +1146,8 @@ html {
 	}
 
 	&.createStation {
-		.card-image {
-			.image.is-square {
+		.thumbnail {
+			.image {
 				width: 120px;
 
 				@media screen and (max-width: 330px) {

frontend/src/pages/Team.vue

@@ -327,6 +327,9 @@ h2 {
 
 	.card {
 		display: inline-flex;
+		position: relative;
+		background-color: var(--white);
+		color: var(--dark-grey);
 		flex-direction: column;
 		width: calc(100% - 30px);
 		max-width: 400px;
@@ -336,6 +339,8 @@ h2 {
 		box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1),
 			0 0 0 1px rgba(10, 10, 10, 0.1);
 		.card-header {
+			display: flex;
+			position: relative;
 			line-height: 22.5px;
 			padding: 10px;
 			.profile-picture {
@@ -369,6 +374,8 @@ h2 {
 			display: flex;
 			flex-direction: column;
 			flex-grow: 1;
+			padding: 20px;
+
 			.bio {
 				font-size: 16px;
 				margin-bottom: 10px;