From 50d233cd661e792e4aea92a389b0897dd734f772 Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Mon, 29 Jun 2020 17:02:06 +0300
Subject: [PATCH] fix: fix minor visual issues on the album page

---
 src/site/assets/styles/style.scss         |  9 +++++
 src/site/pages/dashboard/albums/index.vue | 42 +++++++++++++++--------
 src/site/pages/dashboard/tags/index.vue   |  4 +++
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index c067ef4..c3aff91 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -248,3 +248,12 @@ table.table {
 		border-color: #ffffff1c;
 	}
 }
+
+// helpers
+.has-text-default {
+	color: $textColor;
+}
+
+.has-text-default-highlight {
+	color: $textColorHighlight;
+}
\ No newline at end of file
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index 60607ac..6003c49 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -17,7 +17,8 @@
 									type="text"
 									@keyup.enter.native="createAlbum" />
 								<p class="control">
-									<button class="button is-primary"
+									<button outlined
+										class="button is-primary"
 										@click="createAlbum">Create album</button>
 								</p>
 							</b-field>
@@ -97,8 +98,7 @@
 											</b-table-column>
 
 											<b-table-column field="enabled"
-												label="Actions"
-												centered>
+												numeric>
 												<button class="button is-danger"
 													@click="promptDeleteAlbumLink(props.row.identifier)">Delete link</button>
 											</b-table-column>
@@ -112,19 +112,25 @@
 											</div>
 										</template>
 										<template slot="footer">
-											<div class="wrapper">
-												<div class="has-text-right">
-													<button :class="{ 'is-loading': album.isCreatingLink }"
-														class="button is-primary"
-														style="float: left"
-														@click="createLink(album)">Create new link</button>
-													{{ album.links.length }} / {{ config.maxLinksPerAlbum }} links created
+											<div class="level is-paddingless">
+												<div class="level-left">
+													<div class="level-item">
+														<button :class="{ 'is-loading': album.isCreatingLink }"
+															class="button is-primary"
+															style="float: left"
+															@click="createLink(album)">Create new link</button>
+													</div>
+													<div class="level-item">
+														<span class="has-text-default">{{ album.links.length }} / {{ config.maxLinksPerAlbum }} links created</span>
+													</div>
 												</div>
 
-												<div class="has-text-left">
-													<button class="button is-danger"
-														style="float: right"
-														@click="promptDeleteAlbum(album.id)">Delete album</button>
+												<div class="level-right">
+													<div class="level-item">
+														<button class="button is-danger"
+															style="float: right"
+															@click="promptDeleteAlbum(album.id)">Delete album</button>
+													</div>
 												</div>
 											</div>
 										</template>
@@ -244,6 +250,12 @@ export default {
 	div.view-container {
 		padding: 2rem;
 	}
+
+	div.search-container {
+		padding: 1rem 2rem;
+		background-color: $base-2;
+	}
+
 	div.album {
 		display: flex;
 		flex-wrap: wrap;
@@ -349,6 +361,8 @@ export default {
 	}
 
 	div.column > h2.subtitle { padding-top: 1px; }
+
+	div.no-background { background: none !important; }
 </style>
 <style lang="scss">
 	@import '~/assets/styles/_colors.scss';
diff --git a/src/site/pages/dashboard/tags/index.vue b/src/site/pages/dashboard/tags/index.vue
index bc9ae57..8523231 100644
--- a/src/site/pages/dashboard/tags/index.vue
+++ b/src/site/pages/dashboard/tags/index.vue
@@ -107,6 +107,10 @@
 	}
 
 	div.column > h2.subtitle { padding-top: 1px; }
+
+	div.no-background {
+		background: none;
+	}
 </style>
 <style lang="scss">
 	@import '~/assets/styles/_colors.scss';