konrad
/
Library
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Improved Loading spinner

This commit is contained in:
konrad 2018-01-16 10:38:36 +01:00 committed by kolaente
parent 01d3c27d82
commit 6868833854
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
9 changed files with 127 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/App.vue
View File

@ -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>

8
frontend/src/components/AuthorOverview.vue
View File

@ -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">

9
frontend/src/components/Authors.vue
View File

@ -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')} })

8
frontend/src/components/BookOverview.vue
View File

@ -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">

9
frontend/src/components/Books.vue
View File

@ -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')} })

8
frontend/src/components/ItemOverview.vue
View File

@ -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">

9
frontend/src/components/Items.vue
View File

@ -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')} })

8
frontend/src/components/PublisherOverview.vue
View File

@ -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">

9
frontend/src/components/Publishers.vue
View File

@ -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')} })