aggio2
This commit is contained in:
65
src/components/CGalleryImages/CGalleryImages.scss
Executable file
65
src/components/CGalleryImages/CGalleryImages.scss
Executable file
@@ -0,0 +1,65 @@
|
|||||||
|
$heightBtn: 100%;
|
||||||
|
$grayshadow: #555;
|
||||||
|
|
||||||
|
.text-subtitle-gallery {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
letter-spacing: .00937em;
|
||||||
|
text-shadow: .1rem .1rem .1rem $grayshadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 718px) {
|
||||||
|
// PER VERSIONE MOBILE
|
||||||
|
.text-subtitle-gallery {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.myimg {
|
||||||
|
border-radius: 10px !important;
|
||||||
|
height: 200px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myimg-modify {
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.barwidth{
|
||||||
|
width: 250px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.q-img {
|
||||||
|
&__image {
|
||||||
|
border-radius: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-card-gallery {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
min-width: 200px;
|
||||||
|
padding: 0.5rem 0.5rem;
|
||||||
|
height: 350px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-card-gallery-noModif {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
min-width: 200px;
|
||||||
|
padding: 1rem 1rem;
|
||||||
|
height: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.my-card-gallery-view {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
padding: 0.25rem 0.25rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
40
src/components/CGalleryImages/CGalleryImages.ts
Executable file
40
src/components/CGalleryImages/CGalleryImages.ts
Executable file
@@ -0,0 +1,40 @@
|
|||||||
|
import { defineComponent, ref, PropType, watch, onMounted, computed } from 'vue'
|
||||||
|
import { useI18n } from '@src/boot/i18n'
|
||||||
|
import { useUserStore } from '@store/UserStore'
|
||||||
|
import { useQuasar } from 'quasar'
|
||||||
|
import { IGallery, IImgGallery } from 'model'
|
||||||
|
import { CMyPage } from '@/components/CMyPage'
|
||||||
|
import { tools } from '@store/Modules/tools'
|
||||||
|
import { useGlobalStore } from '@store/globalStore'
|
||||||
|
import { costanti } from '@costanti'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'CGalleryImages',
|
||||||
|
props: {
|
||||||
|
imgGallery: {
|
||||||
|
type: Object as PropType<IImgGallery[] | string | undefined | null>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
directory: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: { CMyPage },
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const $q = useQuasar()
|
||||||
|
const { t } = useI18n()
|
||||||
|
const userStore = useUserStore()
|
||||||
|
const globalStore = useGlobalStore()
|
||||||
|
|
||||||
|
const slide = ref(0)
|
||||||
|
const autoplay = ref(5000)
|
||||||
|
|
||||||
|
return {
|
||||||
|
tools,
|
||||||
|
costanti,
|
||||||
|
slide,
|
||||||
|
autoplay,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
30
src/components/CGalleryImages/CGalleryImages.vue
Executable file
30
src/components/CGalleryImages/CGalleryImages.vue
Executable file
@@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<q-carousel
|
||||||
|
swipeable
|
||||||
|
animated
|
||||||
|
:autoplay="autoplay"
|
||||||
|
transition-prev="slide-right"
|
||||||
|
transition-next="slide-left"
|
||||||
|
@mouseenter="autoplay = false"
|
||||||
|
@mouseleave="autoplay = 5000"
|
||||||
|
:arrows="imgGallery.length > 1"
|
||||||
|
v-model="slide"
|
||||||
|
:thumbnails="imgGallery.length > 1"
|
||||||
|
infinite
|
||||||
|
>
|
||||||
|
<q-carousel-slide
|
||||||
|
v-for="(myimg, index) in imgGallery"
|
||||||
|
:name="index"
|
||||||
|
:key="index"
|
||||||
|
:img-src="directory + '/' + myimg.imagefile"
|
||||||
|
>
|
||||||
|
</q-carousel-slide>
|
||||||
|
</q-carousel>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" src="./CGalleryImages.ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './CGalleryImages.scss';
|
||||||
|
</style>
|
||||||
1
src/components/CGalleryImages/index.ts
Executable file
1
src/components/CGalleryImages/index.ts
Executable file
@@ -0,0 +1 @@
|
|||||||
|
export {default as CGalleryImages} from './CGalleryImages.vue'
|
||||||
@@ -138,10 +138,10 @@ export default defineComponent({
|
|||||||
|
|
||||||
function clicca(tipo: any, set: any, title: string) {
|
function clicca(tipo: any, set: any, title: string) {
|
||||||
if (set && myrec.value.username !== userStore.my.username && tipo === costanti.TIPOFAVBOOK.FAVORITE) {
|
if (set && myrec.value.username !== userStore.my.username && tipo === costanti.TIPOFAVBOOK.FAVORITE) {
|
||||||
userStore.setFavorite($q, t, myrec.value._id, props.table, myrec.value);
|
userStore.setFavorite($q, t, myrec.value._id, props.table);
|
||||||
}
|
}
|
||||||
if (set && myrec.value.username !== userStore.my.username && tipo === costanti.TIPOFAVBOOK.BOOKMARK) {
|
if (set && myrec.value.username !== userStore.my.username && tipo === costanti.TIPOFAVBOOK.BOOKMARK) {
|
||||||
userStore.setBookmark($q, t, myrec.value._id, props.table, myrec.value);
|
userStore.setBookmark($q, t, myrec.value._id, props.table);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!set) {
|
if (!set) {
|
||||||
|
|||||||
Reference in New Issue
Block a user