diff --git a/changes/changelog.d/468.bugfix b/changes/changelog.d/468.bugfix new file mode 100644 index 0000000000000000000000000000000000000000..c5fdfce5e5b87aba06e29572e1cd1bee86d36e87 --- /dev/null +++ b/changes/changelog.d/468.bugfix @@ -0,0 +1 @@ +Fix loading on browse page lists causing them to go down, and dimming over the top bar (#468) diff --git a/front/src/App.vue b/front/src/App.vue index 8b1ac775a18356753b01c172013190337fb5b765..e0c4070a87cc1e9cf4c6cd14c0d41e9ca7ebac59 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -250,7 +250,7 @@ html, body { left: 350px; right: 0px; top: 0px; - z-index: 1; + z-index: 2000; } background-color: white; .item { diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue index ca3ae2424b10da96de75216ced1d5ab1654ebd6c..6a1d066904129b89dea2ceb99fcc4bcf41c8c984 100644 --- a/front/src/components/audio/track/Widget.vue +++ b/front/src/components/audio/track/Widget.vue @@ -10,9 +10,6 @@ <i @click="fetchData(url)" :class="['ui', 'circular', 'medium', 'refresh', 'icon']"> </i> <div class="ui divided unstackable items"> - <div v-if="isLoading" class="ui inverted active dimmer"> - <div class="ui loader"></div> - </div> <div class="item" v-for="object in objects" :key="object.id"> <div class="ui tiny image"> <img v-if="object.track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](object.track.album.cover.medium_square_crop)"> @@ -45,6 +42,9 @@ </div> </div> </div> + <div v-if="isLoading" class="ui inverted active dimmer"> + <div class="ui loader"></div> + </div> </div> </div> </template> @@ -126,4 +126,7 @@ export default { .refresh.icon { float: right; } +.ui.divided.items > .item:last-child { + padding-bottom: 1em !important; +} </style>