From 6868833854deefb5dffb78e98281d2740b083482 Mon Sep 17 00:00:00 2001
From: konrad <k@knt.li>
Date: Tue, 16 Jan 2018 10:38:36 +0100
Subject: [PATCH] Improved Loading spinner

---
 frontend/src/App.vue                          | 97 ++++++++++++++++---
 frontend/src/components/AuthorOverview.vue    |  8 +-
 frontend/src/components/Authors.vue           |  9 +-
 frontend/src/components/BookOverview.vue      |  8 +-
 frontend/src/components/Books.vue             |  9 +-
 frontend/src/components/ItemOverview.vue      |  8 +-
 frontend/src/components/Items.vue             |  9 +-
 frontend/src/components/PublisherOverview.vue |  8 +-
 frontend/src/components/Publishers.vue        |  9 +-
 9 files changed, 127 insertions(+), 38 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 80ae8cf..3f90538 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,23 +1,27 @@
 <template>
   <div id="app">
     <template v-if="user.authenticated">
-      <div class="ui secondary menu">
-        <router-link to="/" class="item" v-lang.nav.home></router-link>
-        <router-link to="/books" class="item" v-lang.nav.books></router-link>
-        <router-link to="/authors" class="item" v-lang.nav.authors></router-link>
-        <router-link to="/publishers" class="item" v-lang.nav.publishers></router-link>
-        <router-link to="/items" class="item" v-lang.nav.items></router-link>
-        <div class="right menu">
-          <img v-bind:src="gravatar" class="menu-avatar"/>
-          <div class="ui item"> {{ user.infos.username }}</div>
-          <a class="ui item" @click="logout()">
-            <icon name="sign-out"></icon>
-          </a>
+      <div class="menu-wrapper">
+        <div class="ui secondary menu">
+          <router-link to="/" class="item" v-lang.nav.home></router-link>
+          <router-link to="/books" class="item" v-lang.nav.books></router-link>
+          <router-link to="/authors" class="item" v-lang.nav.authors></router-link>
+          <router-link to="/publishers" class="item" v-lang.nav.publishers></router-link>
+          <router-link to="/items" class="item" v-lang.nav.items></router-link>
+          <div class="right menu">
+            <img v-bind:src="gravatar" class="menu-avatar"/>
+            <div class="ui item"> {{ user.infos.username }}</div>
+            <a class="ui item" @click="logout()">
+              <icon name="sign-out"></icon>
+            </a>
+          </div>
         </div>
+        <div class="ui divider"></div>
       </div>
-    <div class="ui divider"></div>
     </template>
-    <router-view/>
+    <div class="content">
+      <router-view/>
+    </div>
 
     <div class="lang-switcher">
       <a @click="language = 'en'"><i class="gb flag"></i></a>
@@ -107,4 +111,69 @@ export default {
     transition: color .1s ease;
     font-weight: 400;
   }
+
+  .menu-wrapper {
+    position: absolute;
+    z-index: 6;
+    left: 0;
+    right: 0;
+    top: 1em;
+  }
+
+  .content {
+    padding-top: 70px;
+  }
+
+  /* spinner */
+  .fullscreen-loader-wrapper {
+    position: fixed;
+    background: rgba(250,250,250,0.8);
+    z-index: 5;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .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>
diff --git a/frontend/src/components/AuthorOverview.vue b/frontend/src/components/AuthorOverview.vue
index b4a597e..eeeaac7 100644
--- a/frontend/src/components/AuthorOverview.vue
+++ b/frontend/src/components/AuthorOverview.vue
@@ -2,9 +2,11 @@
   <div v-if="user.authenticated">
     <h1>{{ author.forename }} {{ author.lastname }}</h1>
 
-    <div class="ui info message" v-if="loading">
-      <icon name="refresh" spin></icon>&nbsp;&nbsp;
-      <span v-lang.general.loading></span>
+    <div class="fullscreen-loader-wrapper" v-if="loading">
+      <div class="half-circle-spinner">
+        <div class="circle circle-1"></div>
+        <div class="circle circle-2"></div>
+      </div>
     </div>
 
     <div v-if="!loading">
diff --git a/frontend/src/components/Authors.vue b/frontend/src/components/Authors.vue
index 27888f4..4ac9ba2 100644
--- a/frontend/src/components/Authors.vue
+++ b/frontend/src/components/Authors.vue
@@ -2,9 +2,11 @@
   <div v-if="user.authenticated">
     <h1 v-lang.authors.title></h1>
 
-    <div class="ui info message" v-if="loading">
-      <icon name="refresh" spin></icon>&nbsp;&nbsp;
-      <span v-lang.general.loading></span>
+    <div class="fullscreen-loader-wrapper" v-if="loading">
+      <div class="half-circle-spinner">
+        <div class="circle circle-1"></div>
+        <div class="circle circle-2"></div>
+      </div>
     </div>
 
     <div v-if="!loading">
@@ -181,6 +183,7 @@ export default {
     DeleteAuthor (obj) {
       this.showModal = true
       this.$on('delete-submit', function () {
+        this.loading = true
         // Prevent deleting already deleted authors
         if (obj) {
           HTTP.delete('authors/' + obj.id.content, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })
diff --git a/frontend/src/components/BookOverview.vue b/frontend/src/components/BookOverview.vue
index d81e240..3bba7f6 100644
--- a/frontend/src/components/BookOverview.vue
+++ b/frontend/src/components/BookOverview.vue
@@ -2,9 +2,11 @@
   <div v-if="user.authenticated">
     <h1>{{ book.title }}</h1>
 
-    <div class="ui info message" v-if="loading">
-      <icon name="refresh" spin></icon>&nbsp;&nbsp;
-      <span v-lang.general.loading></span>
+    <div class="fullscreen-loader-wrapper" v-if="loading">
+      <div class="half-circle-spinner">
+        <div class="circle circle-1"></div>
+        <div class="circle circle-2"></div>
+      </div>
     </div>
 
     <div v-if="!loading">
diff --git a/frontend/src/components/Books.vue b/frontend/src/components/Books.vue
index e50b35d..ad4c669 100644
--- a/frontend/src/components/Books.vue
+++ b/frontend/src/components/Books.vue
@@ -2,9 +2,11 @@
   <div v-if="user.authenticated">
     <h1 v-lang.books.title></h1>
 
-    <div class="ui info message" v-if="loading">
-      <icon name="refresh" spin></icon>&nbsp;&nbsp;
-      <span v-lang.general.loading></span>
+    <div class="fullscreen-loader-wrapper" v-if="loading">
+      <div class="half-circle-spinner">
+        <div class="circle circle-1"></div>
+        <div class="circle circle-2"></div>
+      </div>
     </div>
 
     <div v-if="!loading">
@@ -235,6 +237,7 @@ export default {
     deleteBook (obj) {
       this.showModal = true
       this.$on('delete-submit', function () {
+        this.loading = true
         // Prevent deleting already deleted books
         if (obj) {
           HTTP.delete('books/' + obj.id.content, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })
diff --git a/frontend/src/components/ItemOverview.vue b/frontend/src/components/ItemOverview.vue
index e6b82ae..4d612f6 100644
--- a/frontend/src/components/ItemOverview.vue
+++ b/frontend/src/components/ItemOverview.vue
@@ -2,9 +2,11 @@
   <div v-if="user.authenticated">
     <h1>{{ item.title }}</h1>
 
-    <div class="ui info message" v-if="loading">
-      <icon name="refresh" spin></icon>&nbsp;&nbsp;
-      <span v-lang.general.loading></span>
+    <div class="fullscreen-loader-wrapper" v-if="loading">
+      <div class="half-circle-spinner">
+        <div class="circle circle-1"></div>
+        <div class="circle circle-2"></div>
+      </div>
     </div>
 
     <div v-if="!loading">
diff --git a/frontend/src/components/Items.vue b/frontend/src/components/Items.vue
index 79d94b1..31b01ef 100644
--- a/frontend/src/components/Items.vue
+++ b/frontend/src/components/Items.vue
@@ -2,9 +2,11 @@
   <div v-if="user.authenticated">
     <h1 v-lang.items.title></h1>
 
-    <div class="ui info message" v-if="loading">
-      <icon name="refresh" spin></icon>&nbsp;&nbsp;
-      <span v-lang.general.loading></span>
+    <div class="fullscreen-loader-wrapper" v-if="loading">
+      <div class="half-circle-spinner">
+        <div class="circle circle-1"></div>
+        <div class="circle circle-2"></div>
+      </div>
     </div>
 
     <div v-if="!loading">
@@ -188,6 +190,7 @@ export default {
     DeleteItem (obj) {
       this.showModal = true
       this.$on('delete-submit', function () {
+        this.loading = true
         // Prevent deleting already deleted item
         if (obj) {
           HTTP.delete('items/' + obj.id.content, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })
diff --git a/frontend/src/components/PublisherOverview.vue b/frontend/src/components/PublisherOverview.vue
index c05e83a..8110f66 100644
--- a/frontend/src/components/PublisherOverview.vue
+++ b/frontend/src/components/PublisherOverview.vue
@@ -2,9 +2,11 @@
   <div v-if="user.authenticated">
     <h1>{{ publisher.name }}</h1>
 
-    <div class="ui info message" v-if="loading">
-      <icon name="refresh" spin></icon>&nbsp;&nbsp;
-      <span v-lang.general.loading></span>
+    <div class="fullscreen-loader-wrapper" v-if="loading">
+      <div class="half-circle-spinner">
+        <div class="circle circle-1"></div>
+        <div class="circle circle-2"></div>
+      </div>
     </div>
 
     <div v-if="!loading">
diff --git a/frontend/src/components/Publishers.vue b/frontend/src/components/Publishers.vue
index 501f582..edc8670 100644
--- a/frontend/src/components/Publishers.vue
+++ b/frontend/src/components/Publishers.vue
@@ -2,9 +2,11 @@
   <div v-if="user.authenticated">
     <h1 v-lang.publishers.title></h1>
 
-    <div class="ui info message" v-if="loading">
-      <icon name="refresh" spin></icon>&nbsp;&nbsp;
-      <span v-lang.general.loading></span>
+    <div class="fullscreen-loader-wrapper" v-if="loading">
+      <div class="half-circle-spinner">
+        <div class="circle circle-1"></div>
+        <div class="circle circle-2"></div>
+      </div>
     </div>
 
     <div v-if="!loading">
@@ -180,6 +182,7 @@ export default {
     DeletePublisher (obj) {
       this.showModal = true
       this.$on('delete-submit', function () {
+        this.loading = true
         // Prevent again deleting already deleted publishers
         if (obj) {
           HTTP.delete('publishers/' + obj.id.content, { headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')} })