fix: Remove hero and hero body and use sections and containers instead

Hero is meant to be used as a full-width banner to showcare or present somethign, not to contain the entire content of the webpage

18 files changed, 614 insertions, 535 deletions

diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss
index 78d6f99..a141447 100644
--- a/src/site/assets/styles/_colors.scss
+++ b/src/site/assets/styles/_colors.scss
@@ -7,14 +7,13 @@ $base-5: #4C566A;
 
 $background: #1e2430;
 $backgroundAccent: #20222b;
+$backgroundAccentLighter: #53555E;
 $backgroundLight1: #f5f6f8;
 
 // customize navbar
 $navbar-background-color: $backgroundAccent;
 $navbar-item-color: #f5f6f8;
 
-
-
 // $defaultTextColor: #4a4a4a;
 $defaultTextColor: rgb(236, 239, 244);
 $textColor: #c7ccd8;
@@ -31,3 +30,19 @@ $uploaderDropdownColor: #797979;
 
 $boxShadow: 0 10px 15px rgba(4,39,107,0.2);
 $boxShadowLight: rgba(15, 17, 21, 0.35) 0px 6px 9px 0px;
+
+// pagination
+
+$pagination-color: $defaultTextColor;
+
+$pagination-focus-color: $textColorHighlight;
+$pagination-focus-border-color: $textColorHighlight;
+
+$pagination-active-color: $textColorHighlight;
+$pagination-active-border-color: $textColorHighlight;
+
+$pagination-hover-color: $textColorHighlight;
+$pagination-hover-border-color: $textColorHighlight;
+
+$pagination-current-background-color: $base-3;
+$pagination-current-border-color: $base-2;
\ No newline at end of file
diff --git a/src/site/assets/styles/style.scss b/src/site/assets/styles/style.scss
index c3aff91..69d15d3 100644
--- a/src/site/assets/styles/style.scss
+++ b/src/site/assets/styles/style.scss
@@ -249,6 +249,57 @@ table.table {
 	}
 }
 
+// vue-bar
+.vb > .vb-dragger {
+    z-index: 5;
+    width: 12px;
+    right: 0;
+}
+
+.vb > .vb-dragger > .vb-dragger-styler {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transform: rotate3d(0,0,0,0);
+    transform: rotate3d(0,0,0,0);
+    -webkit-transition:
+        background-color 100ms ease-out,
+        margin 100ms ease-out,
+        height 100ms ease-out;
+    transition:
+        background-color 100ms ease-out,
+        margin 100ms ease-out,
+        height 100ms ease-out;
+    background-color: $backgroundAccent;
+    margin: 5px 5px 5px 0;
+    border-radius: 20px;
+    height: calc(100% - 10px);
+    display: block;
+}
+
+.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+}
+
+.vb > .vb-dragger:hover > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+    margin: 0px;
+    height: 100%;
+}
+
+.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+    margin: 0px;
+    height: 100%;
+}
+
+.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
+    background-color: $backgroundAccentLighter;
+}
+
+.vb-content{
+	overflow: auto !important 
+}
+
 // helpers
 .has-text-default {
 	color: $textColor;
@@ -256,4 +307,13 @@ table.table {
 
 .has-text-default-highlight {
 	color: $textColorHighlight;
-}
\ No newline at end of file
+}
+
+.is-height-max-content {
+	height: max-content;
+}
+
+.pagination a, .pagination a:hover {
+	text-decoration: none;
+}
+
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue
index da9b26c..4c4bdf4 100644
--- a/src/site/components/grid/Grid.vue
+++ b/src/site/components/grid/Grid.vue
@@ -167,7 +167,7 @@
 					</div>
 				</template>
 				<template slot="footer">
-					<div class="has-text-right">
+					<div class="has-text-right has-text-default">
 						{{ files.length }} files
 					</div>
 				</template>
@@ -197,6 +197,7 @@
 		</b-modal>
 	</div>
 </template>
+
 <script>
 import Waterfall from './waterfall/Waterfall.vue';
 import WaterfallItem from './waterfall/WaterfallItem.vue';
@@ -328,6 +329,7 @@ export default {
 	}
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	.item-move {
diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue
index 528ed93..47f90cb 100644
--- a/src/site/components/navbar/Navbar.vue
+++ b/src/site/components/navbar/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-	<b-navbar :class="{ isWhite }" 
+	<b-navbar :class="{ isWhite }"
 		transparent>
 		<template slot="end">
 			<b-navbar-item tag="div">
@@ -12,7 +12,7 @@
 			</b-navbar-item>
 			<b-navbar-item tag="div">
 				<router-link
-					to="/"
+					to="/faq"
 					class="navbar-item no-active"
 					exact>
 					Docs
diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index 1642980..744285c 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -1,15 +1,11 @@
 <template>
-	<div v-bar>
-		<div>
-			<section class="hero is-fullheight has-text-centered">
-				<Navbar :isWhite="true" />
-				<div class="hero-body">
-					<nuxt-child id="app" />
-				</div>
-				<div class="hero-foot">
-					<Footer />
-				</div>
-			</section>
+	<div v-bar
+		class="scroll-area">
+		<div class="default-body">
+			<Navbar :isWhite="true" />
+			<nuxt-child id="app"
+				class="nuxt-app is-height-max-content" />
+			<Footer />
 		</div>
 	</div>
 </template>
@@ -17,7 +13,10 @@
 import Navbar from '~/components/navbar/Navbar.vue';
 import Footer from '~/components/footer/Footer';
 export default {
-	components: { Navbar, Footer },
+	components: { 
+		Navbar, 
+		Footer
+	},
 	computed: {
 		config() {
 			return this.$store.state.config;
@@ -49,25 +48,19 @@ export default {
 </script>
 <style lang="scss">
 	html { overflow: hidden !important; }
-	.is-fullheight { height: 100vh; }
-	.hero-body {
-		padding: 3rem 0 !important;
-		#app {
-			width: 100%;
-			& > .container {
-				margin-top: 5rem;
-			}
-		}
-		> .hero {
-			min-height: auto !important;
-			height: auto !important;
-		}
+	.is-fullheight { height: 100vh !important; }
+	.nuxt-app > .section {
+		min-height: auto !important;
+		height: auto !important;
 	}
 	@import "~/assets/styles/style.scss";
 	@import "~/assets/styles/icons.min.css";
 </style>
 <style lang="scss" scoped>
-	.hero-body {
+	.default-body {
 		align-items: baseline !important;
 	}
+	.scroll-area {
+		height: 100vh;
+	}
 </style>
diff --git a/src/site/pages/a/_identifier.vue b/src/site/pages/a/_identifier.vue
index ea36852..24d172b 100644
--- a/src/site/pages/a/_identifier.vue
+++ b/src/site/pages/a/_identifier.vue
@@ -16,9 +16,9 @@
 </style>
 
 <template>
-	<section class="hero is-fullheight">
+	<section class="section is-fullheight">
 		<template v-if="files && files.length">
-			<div class="hero-body align-top">
+			<div class="align-top">
 				<div class="container">
 					<h1 class="title">{{ name }}</h1>
 					<h2 class="subtitle">Serving {{ files ? files.length : 0 }} files</h2>
@@ -27,23 +27,19 @@
 					<hr>
 				</div>
 			</div>
-			<div class="hero-body">
-				<div class="container">
-					<Grid v-if="files && files.length"
-						:files="files"
-						:isPublic="true"
-						:width="200"
-						:enableSearch="false"
-						:enableToolbar="false" />
-				</div>
+			<div class="container">
+				<Grid v-if="files && files.length"
+					:files="files"
+					:isPublic="true"
+					:width="200"
+					:enableSearch="false"
+					:enableToolbar="false" />
 			</div>
 		</template>
 		<template v-else>
-			<div class="hero-body">
-				<div class="container">
-					<h1 class="title">:(</h1>
-					<h2 class="subtitle">This album seems to be empty</h2>
-				</div>
+			<div class="container">
+				<h1 class="title">:(</h1>
+				<h2 class="subtitle">This album seems to be empty</h2>
 			</div>
 		</template>
 	</section>
diff --git a/src/site/pages/dashboard/account.vue b/src/site/pages/dashboard/account.vue
index 6ecc885..121b2b3 100644
--- a/src/site/pages/dashboard/account.vue
+++ b/src/site/pages/dashboard/account.vue
@@ -1,64 +1,62 @@
 <template>
-	<section class="hero is-fullheight dashboard">
-		<div class="hero-body">
-			<div class="container">
-				<div class="columns">
-					<div class="column is-narrow">
-						<Sidebar />
-					</div>
-					<div class="column">
-						<h2 class="subtitle">Account settings</h2>
-						<hr>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Account settings</h2>
+					<hr>
 
-						<b-field label="Username"
-							message="Nothing to do here"
-							horizontal>
-							<b-input v-model="user.username"
-								expanded
-								disabled />
-						</b-field>
+					<b-field label="Username"
+						message="Nothing to do here"
+						horizontal>
+						<b-input v-model="user.username"
+							expanded
+							disabled />
+					</b-field>
 
-						<b-field label="Current password"
-							message="If you want to change your password input the current one here"
-							horizontal>
-							<b-input v-model="user.password"
-								type="password"
-								expanded />
-						</b-field>
+					<b-field label="Current password"
+						message="If you want to change your password input the current one here"
+						horizontal>
+						<b-input v-model="user.password"
+							type="password"
+							expanded />
+					</b-field>
 
-						<b-field label="New password"
-							message="Your new password"
-							horizontal>
-							<b-input v-model="user.newPassword"
-								type="password"
-								expanded />
-						</b-field>
+					<b-field label="New password"
+						message="Your new password"
+						horizontal>
+						<b-input v-model="user.newPassword"
+							type="password"
+							expanded />
+					</b-field>
 
-						<b-field label="New password again"
-							message="Your new password once again"
-							horizontal>
-							<b-input v-model="user.reNewPassword"
-								type="password"
-								expanded />
-						</b-field>
+					<b-field label="New password again"
+						message="Your new password once again"
+						horizontal>
+						<b-input v-model="user.reNewPassword"
+							type="password"
+							expanded />
+					</b-field>
 
-						<div class="mb2 mt2 text-center">
-							<button class="button is-primary"
-								@click="changePassword">Change password</button>
-						</div>
+					<div class="mb2 mt2 text-center">
+						<button class="button is-primary"
+							@click="changePassword">Change password</button>
+					</div>
 
-						<b-field label="Api key"
-							message="This API key lets you use the service from other apps"
-							horizontal>
-							<b-input v-model="user.apiKey"
-								expanded
-								disabled />
-						</b-field>
+					<b-field label="Api key"
+						message="This API key lets you use the service from other apps"
+						horizontal>
+						<b-input v-model="user.apiKey"
+							expanded
+							disabled />
+					</b-field>
 
-						<div class="mb2 mt2 text-center">
-							<button class="button is-primary"
-								@click="promptNewAPIKey">Request new API key</button>
-						</div>
+					<div class="mb2 mt2 text-center">
+						<button class="button is-primary"
+							@click="promptNewAPIKey">Request new API key</button>
 					</div>
 				</div>
 			</div>
diff --git a/src/site/pages/dashboard/admin/file/_id.vue b/src/site/pages/dashboard/admin/file/_id.vue
index 6718b32..5821292 100644
--- a/src/site/pages/dashboard/admin/file/_id.vue
+++ b/src/site/pages/dashboard/admin/file/_id.vue
@@ -2,97 +2,95 @@
 	.underline { text-decoration: underline; }
 </style>
 <template>
-	<section class="hero is-fullheight dashboard">
-		<div class="hero-body">
-			<div class="container">
-				<div class="columns">
-					<div class="column is-narrow">
-						<Sidebar />
-					</div>
-					<div class="column">
-						<h2 class="subtitle">File details</h2>
-						<hr>
-
-						<div class="columns">
-							<div class="column is-6">
-								<b-field label="ID"
-									horizontal>
-									<span>{{ file.id }}</span>
-								</b-field>
-
-								<b-field label="Name"
-									horizontal>
-									<span>{{ file.name }}</span>
-								</b-field>
-
-								<b-field label="Original Name"
-									horizontal>
-									<span>{{ file.original }}</span>
-								</b-field>
-
-								<b-field label="IP"
-									horizontal>
-									<span class="underline">{{ file.ip }}</span>
-								</b-field>
-
-								<b-field label="Link"
-									horizontal>
-									<a :href="file.url"
-										target="_blank">{{ file.url }}</a>
-								</b-field>
-
-								<b-field label="Size"
-									horizontal>
-									<span>{{ formatBytes(file.size) }}</span>
-								</b-field>
-
-								<b-field label="Hash"
-									horizontal>
-									<span>{{ file.hash }}</span>
-								</b-field>
-
-								<b-field label="Uploaded"
-									horizontal>
-									<span><timeago :since="file.createdAt" /></span>
-								</b-field>
-							</div>
-							<div class="column is-6">
-								<b-field label="User Id"
-									horizontal>
-									<span>{{ user.id }}</span>
-								</b-field>
-
-								<b-field label="Username"
-									horizontal>
-									<span>{{ user.username }}</span>
-								</b-field>
-
-								<b-field label="Enabled"
-									horizontal>
-									<span>{{ user.enabled }}</span>
-								</b-field>
-
-								<b-field label="Registered"
-									horizontal>
-									<span><timeago :since="user.createdAt" /></span>
-								</b-field>
-
-								<b-field label="Files"
-									horizontal>
-									<span>
-										<nuxt-link :to="`/dashboard/admin/user/${user.id}`">{{ user.fileCount }}</nuxt-link>
-									</span>
-								</b-field>
-							</div>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">File details</h2>
+					<hr>
+
+					<div class="columns">
+						<div class="column is-6">
+							<b-field label="ID"
+								horizontal>
+								<span>{{ file.id }}</span>
+							</b-field>
+
+							<b-field label="Name"
+								horizontal>
+								<span>{{ file.name }}</span>
+							</b-field>
+
+							<b-field label="Original Name"
+								horizontal>
+								<span>{{ file.original }}</span>
+							</b-field>
+
+							<b-field label="IP"
+								horizontal>
+								<span class="underline">{{ file.ip }}</span>
+							</b-field>
+
+							<b-field label="Link"
+								horizontal>
+								<a :href="file.url"
+									target="_blank">{{ file.url }}</a>
+							</b-field>
+
+							<b-field label="Size"
+								horizontal>
+								<span>{{ formatBytes(file.size) }}</span>
+							</b-field>
+
+							<b-field label="Hash"
+								horizontal>
+								<span>{{ file.hash }}</span>
+							</b-field>
+
+							<b-field label="Uploaded"
+								horizontal>
+								<span><timeago :since="file.createdAt" /></span>
+							</b-field>
 						</div>
-
-						<div class="mb2 mt2 text-center">
-							<button class="button is-danger"
-								@click="promptBanIP">Ban IP</button>
-							<button class="button is-danger"
-								@click="promptDisableUser">Disable user</button>
+						<div class="column is-6">
+							<b-field label="User Id"
+								horizontal>
+								<span>{{ user.id }}</span>
+							</b-field>
+
+							<b-field label="Username"
+								horizontal>
+								<span>{{ user.username }}</span>
+							</b-field>
+
+							<b-field label="Enabled"
+								horizontal>
+								<span>{{ user.enabled }}</span>
+							</b-field>
+
+							<b-field label="Registered"
+								horizontal>
+								<span><timeago :since="user.createdAt" /></span>
+							</b-field>
+
+							<b-field label="Files"
+								horizontal>
+								<span>
+									<nuxt-link :to="`/dashboard/admin/user/${user.id}`">{{ user.fileCount }}</nuxt-link>
+								</span>
+							</b-field>
 						</div>
 					</div>
+
+					<div class="mb2 mt2 text-center">
+						<button class="button is-danger"
+							@click="promptBanIP">Ban IP</button>
+						<button class="button is-danger"
+							@click="promptDisableUser">Disable user</button>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/src/site/pages/dashboard/admin/settings.vue b/src/site/pages/dashboard/admin/settings.vue
index 052a641..2d59fff 100644
--- a/src/site/pages/dashboard/admin/settings.vue
+++ b/src/site/pages/dashboard/admin/settings.vue
@@ -1,94 +1,92 @@
 <template>
-	<section class="hero is-fullheight dashboard">
-		<div class="hero-body">
-			<div class="container">
-				<div class="columns">
-					<div class="column is-narrow">
-						<Sidebar />
-					</div>
-					<div class="column">
-						<h2 class="subtitle">Service settings</h2>
-						<hr>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Service settings</h2>
+					<hr>
 
-						<b-field label="Service name"
-							message="Please enter the name which this service is gonna be identified as"
-							horizontal>
-							<b-input v-model="options.serviceName"
-								expanded />
-						</b-field>
+					<b-field label="Service name"
+						message="Please enter the name which this service is gonna be identified as"
+						horizontal>
+						<b-input v-model="options.serviceName"
+							expanded />
+					</b-field>
 
-						<b-field label="Upload folder"
-							message="Where to store the files relative to the working directory"
-							horizontal>
-							<b-input v-model="options.uploadFolder"
-								expanded />
-						</b-field>
+					<b-field label="Upload folder"
+						message="Where to store the files relative to the working directory"
+						horizontal>
+						<b-input v-model="options.uploadFolder"
+							expanded />
+					</b-field>
 
-						<b-field label="Links per album"
-							message="Maximum links allowed per album"
-							horizontal>
-							<b-input v-model="options.linksPerAlbum"
-								type="number"
-								expanded />
-						</b-field>
+					<b-field label="Links per album"
+						message="Maximum links allowed per album"
+						horizontal>
+						<b-input v-model="options.linksPerAlbum"
+							type="number"
+							expanded />
+					</b-field>
 
-						<b-field label="Max upload size"
-							message="Maximum allowed file size in MB"
-							horizontal>
-							<b-input v-model="options.maxUploadSize"
-								expanded />
-						</b-field>
+					<b-field label="Max upload size"
+						message="Maximum allowed file size in MB"
+						horizontal>
+						<b-input v-model="options.maxUploadSize"
+							expanded />
+					</b-field>
 
-						<b-field label="Filename length"
-							message="How many characters long should the generated filenames be"
-							horizontal>
-							<b-input v-model="options.filenameLength"
-								expanded />
-						</b-field>
+					<b-field label="Filename length"
+						message="How many characters long should the generated filenames be"
+						horizontal>
+						<b-input v-model="options.filenameLength"
+							expanded />
+					</b-field>
 
-						<b-field label="Album link length"
-							message="How many characters a link for an album should have"
-							horizontal>
-							<b-input v-model="options.albumLinkLength"
-								expanded />
-						</b-field>
+					<b-field label="Album link length"
+						message="How many characters a link for an album should have"
+						horizontal>
+						<b-input v-model="options.albumLinkLength"
+							expanded />
+					</b-field>
 
-						<b-field label="Generate thumbnails"
-							message="Generate thumbnails when uploading a file if possible"
-							horizontal>
-							<b-switch v-model="options.generateThumbnails"
-								:true-value="true"
-								:false-value="false" />
-						</b-field>
+					<b-field label="Generate thumbnails"
+						message="Generate thumbnails when uploading a file if possible"
+						horizontal>
+						<b-switch v-model="options.generateThumbnails"
+							:true-value="true"
+							:false-value="false" />
+					</b-field>
 
-						<b-field label="Generate zips"
-							message="Allow generating zips to download entire albums"
-							horizontal>
-							<b-switch v-model="options.generateZips"
-								:true-value="true"
-								:false-value="false" />
-						</b-field>
+					<b-field label="Generate zips"
+						message="Allow generating zips to download entire albums"
+						horizontal>
+						<b-switch v-model="options.generateZips"
+							:true-value="true"
+							:false-value="false" />
+					</b-field>
 
-						<b-field label="Public mode"
-							message="Enable anonymous uploades"
-							horizontal>
-							<b-switch v-model="options.publicMode"
-								:true-value="true"
-								:false-value="false" />
-						</b-field>
+					<b-field label="Public mode"
+						message="Enable anonymous uploades"
+						horizontal>
+						<b-switch v-model="options.publicMode"
+							:true-value="true"
+							:false-value="false" />
+					</b-field>
 
-						<b-field label="Enable creating account"
-							message="Enable creating new accounts in the platform"
-							horizontal>
-							<b-switch v-model="options.enableAccounts"
-								:true-value="true"
-								:false-value="false" />
-						</b-field>
+					<b-field label="Enable creating account"
+						message="Enable creating new accounts in the platform"
+						horizontal>
+						<b-switch v-model="options.enableAccounts"
+							:true-value="true"
+							:false-value="false" />
+					</b-field>
 
-						<div class="mb2 mt2 text-center">
-							<button class="button is-primary"
-								@click="promptRestartService">Save and restart service</button>
-						</div>
+					<div class="mb2 mt2 text-center">
+						<button class="button is-primary"
+							@click="promptRestartService">Save and restart service</button>
 					</div>
 				</div>
 			</div>
diff --git a/src/site/pages/dashboard/admin/user/_id.vue b/src/site/pages/dashboard/admin/user/_id.vue
index 7703b1c..2a56c34 100644
--- a/src/site/pages/dashboard/admin/user/_id.vue
+++ b/src/site/pages/dashboard/admin/user/_id.vue
@@ -2,50 +2,48 @@
 	.underline { text-decoration: underline; }
 </style>
 <template>
-	<section class="hero is-fullheight dashboard">
-		<div class="hero-body">
-			<div class="container">
-				<div class="columns">
-					<div class="column is-narrow">
-						<Sidebar />
-					</div>
-					<div class="column">
-						<h2 class="subtitle">User details</h2>
-						<hr>
-
-						<b-field label="User Id"
-							horizontal>
-							<span>{{ user.id }}</span>
-						</b-field>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">User details</h2>
+					<hr>
 
-						<b-field label="Username"
-							horizontal>
-							<span>{{ user.username }}</span>
-						</b-field>
+					<b-field label="User Id"
+						horizontal>
+						<span>{{ user.id }}</span>
+					</b-field>
 
-						<b-field label="Enabled"
-							horizontal>
-							<span>{{ user.enabled }}</span>
-						</b-field>
+					<b-field label="Username"
+						horizontal>
+						<span>{{ user.username }}</span>
+					</b-field>
 
-						<b-field label="Registered"
-							horizontal>
-							<span><timeago :since="user.createdAt" /></span>
-						</b-field>
+					<b-field label="Enabled"
+						horizontal>
+						<span>{{ user.enabled }}</span>
+					</b-field>
 
-						<b-field label="Files"
-							horizontal>
-							<span>{{ files.length }}</span>
-						</b-field>
+					<b-field label="Registered"
+						horizontal>
+						<span><timeago :since="user.createdAt" /></span>
+					</b-field>
 
-						<div class="mb2 mt2 text-center">
-							<button class="button is-danger"
-								@click="promptDisableUser">Disable user</button>
-						</div>
+					<b-field label="Files"
+						horizontal>
+						<span>{{ files.length }}</span>
+					</b-field>
 
-						<Grid v-if="files.length"
-							:files="files" />
+					<div class="mb2 mt2 text-center">
+						<button class="button is-danger"
+							@click="promptDisableUser">Disable user</button>
 					</div>
+
+					<Grid v-if="files.length"
+						:files="files" />
 				</div>
 			</div>
 		</div>
diff --git a/src/site/pages/dashboard/admin/users.vue b/src/site/pages/dashboard/admin/users.vue
index 1fefa1e..695cf0b 100644
--- a/src/site/pages/dashboard/admin/users.vue
+++ b/src/site/pages/dashboard/admin/users.vue
@@ -121,69 +121,67 @@
 
 
 <template>
-	<section class="hero is-fullheight dashboard">
-		<div class="hero-body">
-			<div class="container">
-				<div class="columns">
-					<div class="column is-narrow">
-						<Sidebar />
-					</div>
-					<div class="column">
-						<h2 class="subtitle">Manage your users</h2>
-						<hr>
-
-						<div class="view-container">
-							<b-table
-								:data="users || []"
-								:mobile-cards="true">
-								<template slot-scope="props">
-									<b-table-column field="id"
-										label="Id"
-										centered>
-										{{ props.row.id }}
-									</b-table-column>
-
-									<b-table-column field="username"
-										label="Username"
-										centered>
-										<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">{{ props.row.username }}</nuxt-link>
-									</b-table-column>
-
-									<b-table-column field="enabled"
-										label="Enabled"
-										centered>
-										<b-switch v-model="props.row.enabled"
-											@input="changeEnabledStatus(props.row)" />
-									</b-table-column>
-
-									<b-table-column field="isAdmin"
-										label="Admin"
-										centered>
-										<b-switch v-model="props.row.isAdmin"
-											@input="changeIsAdmin(props.row)" />
-									</b-table-column>
-
-									<b-table-column field="purge"
-										centered>
-										<button class="button is-primary"
-											@click="promptPurgeFiles(props.row)">Purge files</button>
-									</b-table-column>
-								</template>
-								<template slot="empty">
-									<div class="has-text-centered">
-										<i class="icon-misc-mood-sad" />
-									</div>
-									<div class="has-text-centered">
-										Nothing here
-									</div>
-								</template>
-								<template slot="footer">
-									<div class="has-text-right">
-										{{ users.length }} users
-									</div>
-								</template>
-							</b-table>
-						</div>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Manage your users</h2>
+					<hr>
+
+					<div class="view-container">
+						<b-table
+							:data="users || []"
+							:mobile-cards="true">
+							<template slot-scope="props">
+								<b-table-column field="id"
+									label="Id"
+									centered>
+									{{ props.row.id }}
+								</b-table-column>
+
+								<b-table-column field="username"
+									label="Username"
+									centered>
+									<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">{{ props.row.username }}</nuxt-link>
+								</b-table-column>
+
+								<b-table-column field="enabled"
+									label="Enabled"
+									centered>
+									<b-switch v-model="props.row.enabled"
+										@input="changeEnabledStatus(props.row)" />
+								</b-table-column>
+
+								<b-table-column field="isAdmin"
+									label="Admin"
+									centered>
+									<b-switch v-model="props.row.isAdmin"
+										@input="changeIsAdmin(props.row)" />
+								</b-table-column>
+
+								<b-table-column field="purge"
+									centered>
+									<button class="button is-primary"
+										@click="promptPurgeFiles(props.row)">Purge files</button>
+								</b-table-column>
+							</template>
+							<template slot="empty">
+								<div class="has-text-centered">
+									<i class="icon-misc-mood-sad" />
+								</div>
+								<div class="has-text-centered">
+									Nothing here
+								</div>
+							</template>
+							<template slot="footer">
+								<div class="has-text-right">
+									{{ users.length }} users
+								</div>
+							</template>
+						</b-table>
 					</div>
 				</div>
 			</div>
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index 1b7c442..e716b37 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -3,20 +3,18 @@
 </style>
 
 <template>
-	<section class="hero is-fullheight dashboard">
-		<div class="hero-body">
-			<div class="container">
-				<div class="columns">
-					<div class="column is-narrow">
-						<Sidebar />
-					</div>
-					<div class="column">
-						<h2 class="subtitle">Files</h2>
-						<hr>
-						<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
-						<Grid v-if="files.length"
-							:files="files" />
-					</div>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Files</h2>
+					<hr>
+					<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
+					<Grid v-if="files.length"
+						:files="files" />
 				</div>
 			</div>
 		</div>
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue
index b58e567..8a4031b 100644
--- a/src/site/pages/dashboard/index.vue
+++ b/src/site/pages/dashboard/index.vue
@@ -1,19 +1,32 @@
 <template>
-	<section class="hero is-fullheight dashboard">
-		<div class="hero-body">
-			<div class="container">
-				<div class="columns">
-					<div class="column is-narrow">
-						<Sidebar />
-					</div>
-					<div class="column">
-						<h2 class="subtitle">Your uploaded files</h2>
-						<hr>
-						<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
-						<Grid v-if="files.length"
-							:files="files"
-							:enableSearch="false" />
-					</div>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns is-variable is-0-mobile">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Your uploaded files</h2>
+					<hr>
+					<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
+					<Grid v-if="files.length"
+						:files="paginatedFiles"
+						:enableSearch="false"
+						class="grid" />
+
+					<b-pagination
+						v-if="files.length > perPage"
+						:total="files.length"
+						:per-page="perPage"
+						:current.sync="current"
+						class="pagination"
+						icon-prev="icon-interface-arrow-left"
+						icon-next="icon-interface-arrow-right"
+						icon-pack="icon"
+						aria-next-label="Next page"
+						aria-previous-label="Previous page"
+						aria-page-label="Page"
+						aria-current-label="Current page" />
 				</div>
 			</div>
 		</div>
@@ -32,9 +45,16 @@ export default {
 	middleware: 'auth',
 	data() {
 		return {
-			files: []
+			files: [],
+			current: 1,
+			perPage: 20
 		};
 	},
+	computed: {
+		paginatedFiles() {
+			return this.files.slice((this.current - 1) * this.perPage, this.current * this.perPage);
+		}
+	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
@@ -49,3 +69,9 @@ export default {
 	}
 };
 </script>
+
+<style lang="scss" scoped>
+	div.grid {
+		margin-bottom: 1rem;
+	}
+</style>
\ No newline at end of file
diff --git a/src/site/pages/dashboard/tags/index.vue b/src/site/pages/dashboard/tags/index.vue
index 8523231..7c295b7 100644
--- a/src/site/pages/dashboard/tags/index.vue
+++ b/src/site/pages/dashboard/tags/index.vue
@@ -125,75 +125,73 @@
 
 
 <template>
-	<section class="hero is-fullheight dashboard">
-		<div class="hero-body">
-			<div class="container">
-				<div class="columns">
-					<div class="column is-narrow">
-						<Sidebar />
-					</div>
-					<div class="column">
-						<h2 class="subtitle">Manage your tags</h2>
-						<hr>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">Manage your tags</h2>
+					<hr>
 
-						<div class="search-container">
-							<b-field>
-								<b-input v-model="newTagName"
-									placeholder="Tag name..."
-									type="text"
-									@keyup.enter.native="createTag" />
-								<p class="control">
-									<button class="button is-primary"
-										@click="createTag">Create tags</button>
-								</p>
-							</b-field>
-						</div>
+					<div class="search-container">
+						<b-field>
+							<b-input v-model="newTagName"
+								placeholder="Tag name..."
+								type="text"
+								@keyup.enter.native="createTag" />
+							<p class="control">
+								<button class="button is-primary"
+									@click="createTag">Create tags</button>
+							</p>
+						</b-field>
+					</div>
 
-						<div class="view-container">
-							<div v-for="tag in tags"
-								:key="tag.id"
-								class="album">
-								<div class="arrow-container"
-									@click="promptDeleteTag">
-									<i class="icon-arrow" />
-								</div>
-								<!--
-								<div class="thumb">
-									<figure class="image is-64x64 thumb">
-										<img src="~/assets/images/blank.png">
-									</figure>
-								</div>
-								-->
-								<div class="info">
-									<h4>
-										<router-link :to="`/dashboard/tags/${tag.id}`">{{ tag.name }}</router-link>
-									</h4>
-									<span>{{ tag.count || 0 }} files</span>
-								</div>
-								<!--
-								<div class="latest is-hidden-mobile">
-									<template v-if="album.fileCount > 0">
-										<div v-for="file of album.files"
-											:key="file.id"
-											class="thumb">
-											<figure class="image is-64x64">
-												<a :href="file.url"
-													target="_blank">
-													<img :src="file.thumbSquare">
-												</a>
-											</figure>
-										</div>
-										<div v-if="album.fileCount > 5"
-											class="thumb more no-background">
-											<router-link :to="`/dashboard/albums/${album.uuid}`">{{ album.fileCount - 5 }}+ more</router-link>
-										</div>
-									</template>
-									<template v-else>
-										<span class="no-files">Nothing to show here</span>
-									</template>
-								</div>
-								-->
+					<div class="view-container">
+						<div v-for="tag in tags"
+							:key="tag.id"
+							class="album">
+							<div class="arrow-container"
+								@click="promptDeleteTag">
+								<i class="icon-arrow" />
+							</div>
+							<!--
+							<div class="thumb">
+								<figure class="image is-64x64 thumb">
+									<img src="~/assets/images/blank.png">
+								</figure>
+							</div>
+							-->
+							<div class="info">
+								<h4>
+									<router-link :to="`/dashboard/tags/${tag.id}`">{{ tag.name }}</router-link>
+								</h4>
+								<span>{{ tag.count || 0 }} files</span>
+							</div>
+							<!--
+							<div class="latest is-hidden-mobile">
+								<template v-if="album.fileCount > 0">
+									<div v-for="file of album.files"
+										:key="file.id"
+										class="thumb">
+										<figure class="image is-64x64">
+											<a :href="file.url"
+												target="_blank">
+												<img :src="file.thumbSquare">
+											</a>
+										</figure>
+									</div>
+									<div v-if="album.fileCount > 5"
+										class="thumb more no-background">
+										<router-link :to="`/dashboard/albums/${album.uuid}`">{{ album.fileCount - 5 }}+ more</router-link>
+									</div>
+								</template>
+								<template v-else>
+									<span class="no-files">Nothing to show here</span>
+								</template>
 							</div>
+							-->
 						</div>
 					</div>
 				</div>
diff --git a/src/site/pages/faq.vue b/src/site/pages/faq.vue
index bd93086..bb84a7d 100644
--- a/src/site/pages/faq.vue
+++ b/src/site/pages/faq.vue
@@ -48,6 +48,7 @@ export default {
 	}
 };
 </script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	article.message { background-color: #ffffff; }
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index 0617098..088d1ba 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -17,7 +17,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="container">
+		<div class="container uploader">
 			<Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
 			<div v-else>
 				This site has disabled public uploads. You need an account.
@@ -79,4 +79,8 @@ export default {
 			}
 		}
 	}
+
+	.uploader {
+		margin-top: 2rem;
+	}
 </style>
diff --git a/src/site/pages/login.vue b/src/site/pages/login.vue
index 7a98aa4..514cbc5 100644
--- a/src/site/pages/login.vue
+++ b/src/site/pages/login.vue
@@ -1,38 +1,36 @@
 <template>
-	<section class="hero is-fullheight is-login">
-		<div class="hero-body">
-			<div class="container">
-				<h1 class="title">
-					Dashboard Access
-				</h1>
-				<h2 class="subtitle mb5">
-					Login to access your files and folders
-				</h2>
-				<div class="columns">
-					<div class="column is-4 is-offset-4">
-						<b-field>
-							<b-input v-model="username"
-								type="text"
-								placeholder="Username"
-								@keyup.enter.native="login" />
-						</b-field>
-						<b-field>
-							<b-input v-model="password"
-								type="password"
-								placeholder="Password"
-								password-reveal
-								@keyup.enter.native="login" />
-						</b-field>
+	<section class="section is-fullheight is-login">
+		<div class="container">
+			<h1 class="title">
+				Dashboard Access
+			</h1>
+			<h2 class="subtitle mb5">
+				Login to access your files and folders
+			</h2>
+			<div class="columns">
+				<div class="column is-4 is-offset-4">
+					<b-field>
+						<b-input v-model="username"
+							type="text"
+							placeholder="Username"
+							@keyup.enter.native="login" />
+					</b-field>
+					<b-field>
+						<b-input v-model="password"
+							type="password"
+							placeholder="Password"
+							password-reveal
+							@keyup.enter.native="login" />
+					</b-field>
 
-						<p class="control has-addons is-pulled-right">
-							<router-link v-if="config.userAccounts"
-								to="/register"
-								class="is-text">Don't have an account?</router-link>
-							<span v-else>Registration is closed at the moment</span>
-							<button class="button is-primary big ml1"
-								@click="login">login</button>
-						</p>
-					</div>
+					<p class="control has-addons is-pulled-right">
+						<router-link v-if="config.userAccounts"
+							to="/register"
+							class="is-text">Don't have an account?</router-link>
+						<span v-else>Registration is closed at the moment</span>
+						<button class="button is-primary big ml1"
+							@click="login">login</button>
+					</p>
 				</div>
 			</div>
 		</div>
diff --git a/src/site/pages/register.vue b/src/site/pages/register.vue
index 2f155c0..c102abd 100644
--- a/src/site/pages/register.vue
+++ b/src/site/pages/register.vue
@@ -1,42 +1,40 @@
 <template>
-	<section class="hero is-fullheight is-register">
-		<div class="hero-body">
-			<div class="container">
-				<h1 class="title">
-					Dashboard Access
-				</h1>
-				<h2 class="subtitle mb5">
-					Register for a new account
-				</h2>
-				<div class="columns">
-					<div class="column is-4 is-offset-4">
-						<b-field>
-							<b-input v-model="username"
-								type="text"
-								placeholder="Username" />
-						</b-field>
-						<b-field>
-							<b-input v-model="password"
-								type="password"
-								placeholder="Password"
-								password-reveal />
-						</b-field>
-						<b-field>
-							<b-input v-model="rePassword"
-								type="password"
-								placeholder="Re-type Password"
-								password-reveal
-								@keyup.enter.native="register" />
-						</b-field>
+	<section class="section is-fullheight is-register">
+		<div class="container">
+			<h1 class="title">
+				Dashboard Access
+			</h1>
+			<h2 class="subtitle mb5">
+				Register for a new account
+			</h2>
+			<div class="columns">
+				<div class="column is-4 is-offset-4">
+					<b-field>
+						<b-input v-model="username"
+							type="text"
+							placeholder="Username" />
+					</b-field>
+					<b-field>
+						<b-input v-model="password"
+							type="password"
+							placeholder="Password"
+							password-reveal />
+					</b-field>
+					<b-field>
+						<b-input v-model="rePassword"
+							type="password"
+							placeholder="Re-type Password"
+							password-reveal
+							@keyup.enter.native="register" />
+					</b-field>
 
-						<p class="control has-addons is-pulled-right">
-							<router-link to="/login"
-								class="is-text">Already have an account?</router-link>
-							<button class="button is-primary big ml1"
-								:disabled="isLoading"
-								@click="register">Register</button>
-						</p>
-					</div>
+					<p class="control has-addons is-pulled-right">
+						<router-link to="/login"
+							class="is-text">Already have an account?</router-link>
+						<button class="button is-primary big ml1"
+							:disabled="isLoading"
+							@click="register">Register</button>
+					</p>
 				</div>
 			</div>
 		</div>