Minor fixes

pull/37/head
Varun Patil 2022-08-15 18:03:47 +00:00
parent bd590a5601
commit a4434ffb37
1 changed files with 29 additions and 7 deletions

View File

@ -1,5 +1,7 @@
<template> <template>
<div class="container" ref="container"> <div class="container" ref="container"
:class="{ 'icon-loading': loading }">
<RecycleScroller <RecycleScroller
ref="scroller" ref="scroller"
class="scroller" class="scroller"
@ -10,16 +12,21 @@
:emit-update="true" :emit-update="true"
@update="scrollChange" @update="scrollChange"
> >
<h1 v-if="item.head" class="head"> <h1 v-if="item.head" class="head-row">
{{ item.name }} {{ item.name }}
</h1> </h1>
<div v-else <div v-else
class="photo" class="photo-row"
v-bind:style="{ height: rowHeight + 'px' }"> v-bind:style="{ height: rowHeight + 'px' }">
<img v-for="img of item.photos" <img v-for="img of item.photos"
:src="img.src" :key="img.file_id" :src="img.src" :key="img.file_id"
v-bind:style="{ width: rowHeight + 'px', height: rowHeight + 'px' }"/> @load = "img.l = Math.random()"
v-bind:style="{
width: rowHeight + 'px',
height: rowHeight + 'px',
}"/>
</div> </div>
</RecycleScroller> </RecycleScroller>
@ -45,6 +52,8 @@
export default { export default {
data() { data() {
return { return {
/** Loading days response */
loading: true,
/** Main list of rows */ /** Main list of rows */
list: [], list: [],
/** Counter of rows */ /** Counter of rows */
@ -111,6 +120,16 @@ export default {
return; return;
} }
// Reset image state
for (let i = startIndex; i < endIndex; i++) {
if ((i < this.currentStart || i > this.currentEnd) && this.list[i].photos) {
this.list[i].photos.forEach(photo => {
photo.l = 0;
});
}
}
// Make sure we don't do this too often
this.currentStart = startIndex; this.currentStart = startIndex;
this.currentEnd = endIndex; this.currentEnd = endIndex;
setTimeout(() => { setTimeout(() => {
@ -200,6 +219,7 @@ export default {
// Fix view height variable // Fix view height variable
this.handleViewSizeChange(); this.handleViewSizeChange();
this.loading = false;
}, },
/** Fetch image data for one dayId */ /** Fetch image data for one dayId */
@ -308,12 +328,14 @@ export default {
width: calc(100% + 20px); width: calc(100% + 20px);
} }
.photo img { .photo-row img {
object-fit: cover; background-clip: content-box;
background-color: #eee;
padding: 2px; padding: 2px;
object-fit: cover;
border-radius: 3%; border-radius: 3%;
} }
.head { .head-row {
height: 60px; height: 60px;
padding-top: 25px; padding-top: 25px;
font-size: 20px; font-size: 20px;