surya/salvato.newfreeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Card

Browse Source
This commit is contained in:
Surya Paolo
2024-10-23 01:41:24 +02:00
parent 1491484095
commit 76b51f5b91
13 changed files with 255 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
_ALL_SITES/riso.app/db/lang/ws_it.js
View File

@@ -127,6 +127,7 @@ const msg_website_it = {
keywords: 'Parole Chiave',
desctiption: 'Descrizione',
heightimg: 'Altezza Immagine',
heightcarousel: 'Altezza Carosello',
},
msg: {
myAppName: 'Riso',

2
src/common/shared_vuejs.ts
View File

@@ -1671,7 +1671,7 @@ export const shared_consts = {
},
{
value: 400,
label: 'Griglia Tabelle',
label: 'Visualizzatore Tabelle',
},
],

5
src/components/CGridOriz/CGridOriz.ts
View File

@@ -51,6 +51,11 @@ export default defineComponent({
required: false,
default: true,
},
heightcarousel: {
type: Number,
required: false,
default: 0,
},
},
components: {
CMyFieldDb, CGridTableRec, CTitlePage,

1
src/components/CGridOriz/CGridOriz.vue
View File

@@ -33,6 +33,7 @@
labelBtnAddExtra=""
:extraparams="tools.extraparams(table, { myrecfiltertoggle })"
:prop_showMap="showMap"
:heightcarousel="heightcarousel"
@clickButtBar="clickButtBar"
>
</CGridTableRec>

1
src/components/CGridTableRec/CGridTableRec.scss
View File

@@ -78,6 +78,5 @@
}
.carousel-scroll-container {
height: 300px; /* Imposta un'altezza per permettere lo scorrimento */
overflow-y: auto; /* Permette lo scrolling verticale */
}

8
src/components/CGridTableRec/CGridTableRec.ts
View File

@@ -243,6 +243,10 @@ export default defineComponent({
required: false,
default: 0,
},
heightcarousel: {
required: false,
default: 0,
},
prop_pagination: {
type: Object as PropType<IPagination>,
required: false,
@@ -1687,7 +1691,7 @@ export default defineComponent({
}
const checkScrollPosition = () => {
console.log('checkScrollPosition')
// console.log('checkScrollPosition')
const container = carouselTabRef.value
if (!container ) return
@@ -2412,7 +2416,7 @@ export default defineComponent({
}
function onLoadScroll(index: number, done: any) {
console.log('onLoadScroll', index)
// console.log('onLoadScroll', index)
if (index > 1) {
// console.log('onLoadScroll', index, 'RECLOAD', numRecLoaded.value, 'ROWS: ', pagination.value.rowsNumber, 'PAGE: ', pagination.value.page)

77
src/components/CGridTableRec/CGridTableRec.vue
View File

@@ -379,13 +379,11 @@
</div>
<div v-if="!showMap">
page: {{ pagination.page }} numRecLoaded: {{ numRecLoaded }} rows:
{{ pagination.rowsNumber }}
<div
v-if="myvertical === costanti.VISUTABLE_GRID_ORIZ"
id="carousel-scroll-target"
class="carousel-scroll-container"
:style="heightcarousel ? `height: ${heightcarousel}` : ''"
>
<q-carousel
swipeable
@@ -393,23 +391,21 @@
:autoplay="autoplay"
v-model="slideGridOriz"
navigation
navigation-icon="radio_button_unchecked"
control-color="blue-4"
control-text-color="white"
ref="carousel"
transition-next="slide-left"
transition-prev="slide-right"
height="500px"
:height="heightcarousel"
width="100%"
control-type="push"
class="bg-grey-2 shadow-2 rounded-borders"
control-type="flat"
class="bg-primary shadow-2 rounded-borders"
@mouseenter="autoplay = false"
@mouseleave="autoplay = true"
@transition="handleTransition"
>
<template v-slot:control>
<q-carousel-control
position="top-left"
position="left"
:offset="[-10, -10]"
class="q-gutter-xs"
style="opacity: 0.7"
@@ -460,6 +456,7 @@
:initial-index="0"
@load="loadMore"
:offset="350"
style="display: none"
>
</q-infinite-scroll>
</div>
@@ -475,7 +472,7 @@
@load="onLoadScroll"
:offset="350"
debounce="300"
scroll-target="#carousel-scroll-target"
scroll-target=".carousel-scroll-container"
>
<div v-if="showHeaderCol">
<div
@@ -491,66 +488,10 @@
</div>
</div>
<div v-if="myvertical === costanti.VISUTABLE_GRID_ORIZ">
<q-btn
label="pag"
@click="
pagination.page++;
onUpdateData(
0,
{
pagination,
},
false
);
"
></q-btn>
<div v-if="false">
<div class="card-carousel-container">
<div class="card-carousel" ref="carouselTabRef">
<q-card
v-for="(rec, indexrow) in serverData"
:key="indexrow"
:class="`my-card-elem center_img bordered ` + ' titolo_card'"
:style="`height: auto; !important; width: 350px !important;`"
>
<CMyRecCard
:table="tablesel"
:prop_myrec="rec"
@cmdext="cmdExt"
:editOn="editOn"
:margin_right="margin_right"
>
</CMyRecCard>
</q-card>
</div>
<div
class="swipe-indicator left"
v-if="!isAtStart"
@click="scroll(-1)"
:style="heightcarousel ? `height: ${heightcarousel}` : ''"
:class="{ 'carousel-scroll-container': !!heightcarousel }"
>
<q-icon name="chevron_left" size="2rem" color="white" />
</div>
<div
class="swipe-indicator right"
v-if="!isAtEnd"
@click="scroll(1)"
>
<q-icon name="chevron_right" size="2rem" color="white" />
</div>
<div class="scroll-indicator">
<div
v-for="(_, index) in serverData"
:key="index"
:class="['dot', { active: index === activeIndex }]"
></div>
</div>
</div>
</div>
</div>
<div v-else>
<div v-for="(row, indexrow) in serverData" :key="indexrow">
<div
v-if="

30
src/components/CMyEditElem/CMyEditElem.vue
View File

@@ -187,6 +187,21 @@
@new-value="updateSizeHeight"
style="width: 150px"
/>
<q-select
label="Altezza Carosello:"
v-if="(myel.type === shared_consts.ELEMTYPE.CARD) || (myel.type === shared_consts.ELEMTYPE.GRID_ORIZ)"
v-model="myel.heightcarousel"
emit-value
map-options
:options="generateSizeOptions()"
use-input
use-chips
@input="saveElem"
filled
dense
@new-value="updateSizeHeight"
style="width: 150px"
/>
</div>
</q-expansion-item>
@@ -338,6 +353,21 @@
v-else-if="myel.type === shared_consts.ELEMTYPE.CARD"
:class="myel.span ? '' : ''"
>
<q-select
v-model="myel.num2"
:options="[
{ label: '1', value: 1 },
{ label: '2', value: 2 },
{ label: '3', value: 3 },
{ label: '4', value: 4 },
]"
label="Cards per Slide"
emit-value
map-options
style="min-width: 120px"
@input="saveElem"
>
</q-select>
<q-expansion-item
dense
dense-toggle

27
src/components/CMyElem/CMyElem.ts
View File

@@ -125,6 +125,24 @@ export default defineComponent({
const isAppRunning = computed(() => globalStore.isAppRunning)
const currentCardsPerSlide = computed(() => {
if ($q.screen.lt.sm) return 1
if ($q.screen.lt.md) return 2
return myel.value.num2 ? myel.value.num2 : 2! // cardsPerSlide
})
// Raggruppa le card in base al numero di card per slide
const cardGroups = computed(() => {
const cards = myel.value.listcards || []
const groups = []
for (let i = 0; i < cards.length; i += currentCardsPerSlide.value) {
groups.push(cards.slice(i, i + currentCardsPerSlide.value))
}
return groups
})
const coordaddr = ref(<ICoordGPS>{ address: '', coordinates: [0, 0] })
const carouselRef = ref(<any>null)
@@ -259,6 +277,12 @@ export default defineComponent({
}
// Classe per le colonne delle card
function cardColumnClass() {
const width = 12 / currentCardsPerSlide.value
return `col-xs-12 col-sm-6 col-md-${width}`
}
onMounted(mounted)
return {
@@ -296,6 +320,9 @@ export default defineComponent({
isAtEnd,
activeIndex,
carouselRef,
cardColumnClass,
cardGroups,
currentCardsPerSlide,
}
},

96
src/components/CMyElem/CMyElem.vue
View File

@@ -33,23 +33,75 @@
v-if="myel.type === shared_consts.ELEMTYPE.CARD"
class="card-carousel-container"
>
<div
:class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@click="clickOnElem"
class="card-carousel"
ref="carouselRef"
<q-carousel
swipeable
animated
v-model="slide"
navigation
control-text-color="white"
ref="carousel"
transition-next="slide-left"
transition-prev="slide-right"
:height="myel.heightcarousel"
width="100%"
control-type="flat"
class="bg-primary shadow-2 rounded-borders"
@mouseenter="animare = false"
@mouseleave="animare = true"
@transition="handleTransition"
>
<template v-slot:control>
<q-carousel-control
position="top-left"
:offset="[-10, -10]"
class="q-gutter-xs"
style="opacity: 0.7"
>
<q-btn
push
round
:color="$q.dark.isActive ? `black` : `white`"
:text-color="$q.dark.isActive ? `white` : `black`"
icon="keyboard_arrow_left"
@click="$refs.carousel.previous()"
></q-btn>
</q-carousel-control>
<q-carousel-control
position="top-right"
class="q-gutter-xs"
:offset="[-10, -10]"
style="opacity: 0.7"
>
<q-btn
push
round
:color="$q.dark.isActive ? `black` : `white`"
:text-color="$q.dark.isActive ? `white` : `black`"
icon="keyboard_arrow_right"
@click="$refs.carousel.next()"
></q-btn>
</q-carousel-control>
</template>
<!-- Iteriamo sui gruppi di card invece che sulle singole card -->
<q-carousel-slide
v-for="(group, groupIndex) in cardGroups"
:key="groupIndex"
:name="groupIndex"
>
<div class="row no-wrap justify-start items-center q-px-md full-width">
<template v-for="(rec, cardIndex) in group" :key="cardIndex">
<div :class="cardColumnClass">
<q-card
v-for="(rec, ind) in myel.listcards"
:key="ind"
:class="
`my-card-elem center_img bordered ` +
`flex-card bordered ` +
myel.class3 +
(rec.link ? ' titolo_card' : '')
"
:style="
rec.style +
`; height: ${myel.heightimg || `300px`} !important; width: ${
`; height: ${
myel.heightimg || `300px`
} !important; width: ${
myel.widthimg || `300px`
} !important;`
"
@@ -62,7 +114,9 @@
}px; overflow: hidden;`"
>
<q-img
:class="tools.getClassAnim(myel.anim2) + ` ` + myel.class4"
:class="
tools.getClassAnim(myel.anim2) + ` ` + myel.class4
"
:src="tools.getImgFileByElem(myel, rec)"
/>
</div>
@@ -71,7 +125,9 @@
{{ tools.getText(rec.alt) }}
</div>
<div
:class="`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)"
:class="
`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)
"
v-html="rec.content"
></div>
<div
@@ -84,19 +140,10 @@
</q-card-section>
</q-card>
</div>
<div class="swipe-indicator left" v-if="!isAtStart">
<q-icon name="chevron_left" size="2rem" color="white" />
</div>
<div class="swipe-indicator right" v-if="!isAtEnd">
<q-icon name="chevron_right" size="2rem" color="white" />
</div>
<div class="scroll-indicator">
<div
v-for="(_, index) in myel.listcards"
:key="index"
:class="['dot', { active: index === activeIndex }]"
></div>
</template>
</div>
</q-carousel-slide>
</q-carousel>
</div>
<div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
@@ -489,13 +536,14 @@
<CSendRISTo></CSendRISTo>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
<div v-if="editOn" class="elemEdit">Griglia Orizzontale</div>
<div v-if="editOn" class="elemEdit">Visualizzatore Tabelle</div>
<CGridOriz
:table="myel.container"
:tipovisu="myel.number"
:prop_search="myel.parambool"
:finder="myel.parambool2"
:showMap="myel.parambool3"
:heightcarousel="myel.heightcarousel"
></CGridOriz>
</div>
<div v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG">

62
src/css/app.scss
View File

@@ -1135,6 +1135,10 @@ h3 {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
margin: 1px;
object-position: 50% 5% !important;
object-fit: contain !important;
@media (max-width: 600px) {
/* Versione Mobile */
}
}
.imgprofile_small {
@@ -2226,6 +2230,62 @@ $coloreprincipale: lightblue;
transition: transform 0.3s ease;
}
.cards-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.card-item {
display: flex;
flex-direction: column;
max-width: 200px; /* Massima larghezza per la card */
margin: 0 10px; /* Spazio tra le card */
text-align: center;
}
.flex-container {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
gap: 1rem;
height: 100%;
padding: 1rem;
}
.flex-card {
display: flex;
flex-direction: column;
flex: 0 0 auto;
margin: 0 0.5rem;
position: relative;
transition: all 0.3s ease;
}
/* Aggiungi questi stili per gestire lo scroll orizzontale se necessario */
.q-carousel__slide {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.row.no-wrap {
flex-wrap: nowrap !important;
gap: 1rem;
}
.card-width-200 {
width: 100%;
max-width: 200px;
}
.card-width-250 {
width: 100%;
max-width: 250px;
}
.my-card-elem:hover {
transform: scale(1.05);
}
@@ -2237,7 +2297,7 @@ $coloreprincipale: lightblue;
.img-container .q-img {
height: 100%;
object-fit: cover;
object-fit: contain;
}
.swipe-indicator {

1
src/model/GlobalStore.ts
View File

@@ -149,6 +149,7 @@ export interface IMyElem {
width?: number
height?: number
heightimg?: string
heightcarousel?: string
widthimg?: string
link?: string
onlyif_logged?: boolean

1
src/store/Modules/fieldsTable.ts
View File

@@ -173,6 +173,7 @@ export const colmyelems = [
AddCol({ name: 'listcards', label_trans: 'myelems.listcards', fieldtype: costanti.FieldType.listimages }),
AddCol({ name: 'height', label_trans: 'myelems.height', fieldtype: costanti.FieldType.number }),
AddCol({ name: 'heightimg', label_trans: 'myelems.heightimg', fieldtype: costanti.FieldType.string }),
AddCol({ name: 'heightcarousel', label_trans: 'myelems.heightcarousel', fieldtype: costanti.FieldType.string }),
AddCol({ name: 'widthimg', label_trans: 'pages.widthimg', fieldtype: costanti.FieldType.string }),
AddCol({ name: 'link', label_trans: 'pages.link', fieldtype: costanti.FieldType.string }),
AddCol({ name: 'width', label_trans: 'myelems.width', fieldtype: costanti.FieldType.number }),