peter/ekster-reader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Problem: it's hard to see other photos from an Entry

Browse Source 
Solution: switch image when clicked
This commit is contained in:
Peter Stuifzand 2022-04-18 19:57:47 +02:00
parent 333c91b4c6
commit c31e62734c
1 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Entry.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<div :class="classes" @click="markRead"> <div :class="classes" @click="markRead">
<div class="card-image" v-if="photo_first"> <div class="card-image" v-if="mainImage">
<figure class="image"> <figure class="image">
<img :src="photo_first"/> <img :src="mainImage"/>
</figure> </figure>
</div> </div>
@ -30,8 +30,8 @@
<div class="content" v-html="main_content"></div> <div class="content" v-html="main_content"></div>
<div class="photos"> <div class="photos">
<div class="photo" v-for="photo in photo_rest" :key="photo"> <div class="photo" v-for="photo in photo_all" :key="photo">
<img :src="photo" class="image"/> <img :src="photo" class="image" @click="replaceMainImage(photo)"/>
</div> </div>
</div> </div>
</div> </div>
@ -134,7 +134,8 @@ export default {
selectedDestinations: [], selectedDestinations: [],
categories: [], categories: [],
hasHiddenContent: true, hasHiddenContent: true,
hiddenContentVisible: false hiddenContentVisible: false,
mainImage: null,
} }
}, },
@ -218,10 +219,14 @@ export default {
this.hiddenContentVisible = !this.hiddenContentVisible this.hiddenContentVisible = !this.hiddenContentVisible
// const el = this.$refs['content-container'] // const el = this.$refs['content-container']
// el.scrollIntoView(true) // el.scrollIntoView(true)
},
replaceMainImage(newImage) {
this.mainImage = newImage
} }
}, },
mounted() { mounted() {
this.mainImage = this.photo_first
this.showFooterButtons = true this.showFooterButtons = true
const el = this.$refs['content-container'] const el = this.$refs['content-container']
this.hiddenContentVisible = false this.hiddenContentVisible = false
@ -254,7 +259,13 @@ export default {
}, },
innerRef() { innerRef() {
if (this.isLike) { if (this.isLike) {
return this.item.refs[this.item['like-of']] return this.item.refs[this.item['like-of']] || {
type: "entry",
content: {
text: 'Like of ' + this.item['like-of']
},
url: this.item['like-of'],
}
} else if (this.isRepost) { } else if (this.isRepost) {
return this.item.refs[this.item['repost-of']] return this.item.refs[this.item['repost-of']]
} else if (this.isBookmark) { } else if (this.isBookmark) {
@ -311,6 +322,12 @@ export default {
} }
return false return false
}, },
photo_all() {
if (this.currentItem.photo && this.currentItem.photo.length > 1) {
return this.currentItem.photo
}
return []
},
photo_rest() { photo_rest() {
if (this.currentItem.photo && this.currentItem.photo.length > 1) { if (this.currentItem.photo && this.currentItem.photo.length > 1) {
return this.currentItem.photo.slice(1) return this.currentItem.photo.slice(1)
@ -373,6 +390,7 @@ export default {
}, },
watch: { watch: {
item() { item() {
this.mainImage = this.photo_first
this.$nextTick(() => { this.$nextTick(() => {
const el = this.$refs['content-container'] const el = this.$refs['content-container']
if (!el) { if (!el) {