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) {
|
||||
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) {
|
||||
userStore.setBookmark($q, t, myrec.value._id, props.table, myrec.value);
|
||||
userStore.setBookmark($q, t, myrec.value._id, props.table);
|
||||
}
|
||||
|
||||
if (!set) {
|
||||
|
||||
Reference in New Issue
Block a user