NoLog.cz/gancio
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

minor with MyPicture

Browse source
This commit is contained in:
lesion 2022-05-06 23:26:09 +02:00
parent 51d34126fc
commit c1fd18d7f0
No known key found for this signature in database
GPG key ID: 352918250B012177
2 changed files with 8 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
components/MyPicture.vue
View file

@ -5,14 +5,14 @@
<img <img
v-if='media' v-if='media'
:class='{ "u-featured": true, loading }' :class='{ "u-featured": true, loading: true }'
:alt='media.name' :loading='lazy?"lazy":"eager"' :alt='media.name' :loading='lazy?"lazy":"eager"'
:src="src" :src="src"
:srcset="srcset" :srcset="srcset"
itemprop="image" itemprop="image"
:height="height" :width="width" :height="height" :width="width"
:style="{ 'object-position': thumbnailPosition }" :style="{ 'object-position': thumbnailPosition }"
@load="loaded"> onload="this.classList.remove('loading')">
<img v-else-if='!media && thumb' class='thumb' src="noimg.svg" alt=''> <img v-else-if='!media && thumb' class='thumb' src="noimg.svg" alt=''>
@ -28,9 +28,6 @@ export default {
lazy: { type: Boolean, default: false }, lazy: { type: Boolean, default: false },
showPreview: { type: Boolean, default: true } showPreview: { type: Boolean, default: true }
}, },
data () {
return { loading: true }
},
computed: { computed: {
backgroundPreview () { backgroundPreview () {
if (this.media && this.media.preview) { if (this.media && this.media.preview) {
@ -67,11 +64,6 @@ export default {
} }
return 'center center' return 'center center'
}, },
},
methods: {
loaded () {
this.loading = false
}
} }
} }
</script> </script>
@ -83,10 +75,12 @@ export default {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
background-size: cover; background-size: contain;
} }
.img img { .img img {
object-fit: contain;
max-height: 125vh;
display: flex; display: flex;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -107,7 +101,7 @@ export default {
} }
.img img.loading { .img img.loading {
opacity: 0; opacity: 0.1;
} }
</style> </style>

4
pages/event/_slug.vue
View file

@ -9,12 +9,12 @@ v-container#event.pa-0.pa-sm-2
v-card-text v-card-text
v-row v-row
v-col.col-12.col-lg-8 v-col.col-12.col-md-8
//- fake image to use u-featured in h-event microformat //- fake image to use u-featured in h-event microformat
MyPicture(v-if='hasMedia' :event='event') MyPicture(v-if='hasMedia' :event='event')
.p-description.text-body-1.pa-3.rounded(v-if='!hasMedia && event.description' itemprop='description' v-html='event.description') .p-description.text-body-1.pa-3.rounded(v-if='!hasMedia && event.description' itemprop='description' v-html='event.description')
v-col.col-12.col-lg-4 v-col.col-12.col-md-4
v-card(outlined) v-card(outlined)
v-card-text v-card-text
v-icon.float-right(v-if='event.parentId' color='success' v-text='mdiRepeat') v-icon.float-right(v-if='event.parentId' color='success' v-text='mdiRepeat')