evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed loading placeholder style and search component showing on loading

Browse Source
This commit is contained in:
Roberto Tonino 2020-09-15 22:51:50 +02:00
parent cd8b03681a
commit 36dbb78879
6 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/style.css
View File

File diff suppressed because one or more lines are too long

2
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
src/components/BaseLoadingPlaceholder.vue
View File

@ -1,5 +1,5 @@
<template functional>
<div :id="props.id" class="loading_placeholder" v-show="!props.hidden">
<div :id="props.id" class="loading_placeholder" :class="{ 'loading_placeholder--hidden': props.hidden }">
<span class="loading_placeholder__text">{{ props.text }}</span>
<div class="lds-ring">
<div></div>

4
src/components/TheContent.vue
View File

@ -3,7 +3,8 @@
<section id="content">
<div id="container">
<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="!loading" />
<router-view></router-view>
<router-view v-show="!loading"></router-view>
</div>
</section>
</template>
@ -54,7 +55,6 @@ export default {
}),
mounted() {
this.$root.$on('updateSearchLoadingState', loading => {
console.log({ loading })
this.loading = loading
})
}

5
src/components/TheMainSearch.vue
View File

@ -631,11 +631,8 @@ export default {
}
},
handleMainSearch(result) {
this.$root.$emit('updateSearchLoadingState', false)
// Hiding loading placeholder
// document.getElementById('content').style.display = ''
// document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
this.$root.$emit('updateSearchLoadingState', false)
let resetObj = { data: [], next: 0, total: 0, loaded: false }

2
src/styles/scss/globals/_globals.scss
View File

@ -241,7 +241,7 @@ a {
}
.loading_placeholder {
// display: flex;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;