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> <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> <span class="loading_placeholder__text">{{ props.text }}</span>
<div class="lds-ring"> <div class="lds-ring">
<div></div> <div></div>

4
src/components/TheContent.vue
View File

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

5
src/components/TheMainSearch.vue
View File

@ -631,11 +631,8 @@ export default {
} }
}, },
handleMainSearch(result) { handleMainSearch(result) {
this.$root.$emit('updateSearchLoadingState', false)
// Hiding loading placeholder // Hiding loading placeholder
// document.getElementById('content').style.display = '' this.$root.$emit('updateSearchLoadingState', false)
// document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
let resetObj = { data: [], next: 0, total: 0, loaded: 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 { .loading_placeholder {
// display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;