Small design improvements

src/App.vue

@@ -7,7 +7,7 @@
 			<div class="box" v-if="user.authenticated">
 				<div class="container">
 					<div class="columns">
-						<div class="column is-3">
+						<div class="column is-2">
 							<aside class="menu">
 								<p class="menu-label" v-if="loading">Loading...</p>
 								<template v-for="n in namespaces">
@@ -16,14 +16,13 @@
 									</p>
 									<ul class="menu-list" :key="n.id + 'child'">
 										<li v-for="l in n.lists" :key="l.id">
-											<a>{{l.title}}</a>
+											<router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}</router-link>
 										</li>
 									</ul>
 								</template>
 							</aside>
 						</div>
-						<div class="column is-9">
-							<button class="button is-success" v-on:click="loadNamespaces()">Load Namespaces</button>
+						<div class="column is-10">
 							<router-view/>
 						</div>
 					</div>
@@ -38,6 +37,7 @@
 </template>
 
 <script>
+	// <button class="button is-success" v-on:click="loadNamespaces()">Load Namespaces</button>
     import auth from './auth'
     import {HTTP} from './http-common'
 	import message from './message'
@@ -99,8 +99,79 @@
 </script>
 
 <style>
+	*, *:focus, *:active{
+		outline: none;
+	}
+
 	body {
 		background: #f5f5f5;
 		min-height: 100vh;
 	}
+
+	/* spinner */
+	.fullscreen-loader-wrapper {
+		position: fixed;
+		background: rgba(250,250,250,0.8);
+		z-index: 5;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+
+		position: absolute;
+		width: 78%;
+		height: 100%;
+		margin: -1em auto;
+	}
+
+	.full-loader-wrapper{
+		background: rgba(250,250,250,0.8);
+
+		position: absolute;
+		width: 78%;
+		height: 100%;
+		margin: -1em auto;
+	}
+
+	.half-circle-spinner, .half-circle-spinner * {
+		box-sizing: border-box;
+	}
+
+	.half-circle-spinner {
+		width: 60px;
+		height: 60px;
+		border-radius: 100%;
+		position: relative;
+		left: calc(50% - 30px);
+		top: calc(50% - 30px);
+	}
+
+	.half-circle-spinner .circle {
+		content: "";
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		border-radius: 100%;
+		border: calc(60px / 10) solid transparent;
+	}
+
+	.half-circle-spinner .circle.circle-1 {
+		border-top-color: #4CAF50;
+		animation: half-circle-spinner-animation 1s infinite;
+	}
+
+	.half-circle-spinner .circle.circle-2 {
+		border-bottom-color: #4CAF50;
+		animation: half-circle-spinner-animation 1s infinite alternate;
+	}
+
+	@keyframes half-circle-spinner-animation {
+		0% {
+			transform: rotate(0deg);
+
+		}
+		100%{
+			transform: rotate(360deg);
+		}
+	}
 </style>

src/components/user/Register.vue

@@ -71,9 +71,6 @@
             submit() {
                 this.loading = true
 
-				// eslint-disable-next-line
-				console.log(this.credentials)
-
                 this.error = ''
 
 				if (this.credentials.password2 !== this.credentials.password) {