- risolto problema spazi vuoti in cima alla app
- risolto problema sulle card di telegram, immagini non alte uguali e non si vedono bene...
This commit is contained in:
Surya Paolo
65
src/components/CCardCarouselComp/CCardCarouselComp.scss
Normal file
65
src/components/CCardCarouselComp/CCardCarouselComp.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
|
||||
.elemEdit {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
z-index: 100;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.card-group-scrollable {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.card-group-scrollable::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.card-group-scrollable::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card-group-scrollable::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.flex-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.3s ease;
|
||||
margin: 0 0.25rem !important;
|
||||
}
|
||||
|
||||
.titolo_card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.titolo_card:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.img-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.q-card-section-small {
|
||||
padding: px !important; // o il valore che preferisci
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.clEdit {
|
||||
border: 2px dashed #ff9800;
|
||||
background: rgba(255, 152, 0, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
148
src/components/CCardCarouselComp/CCardCarouselComp.ts
Normal file
148
src/components/CCardCarouselComp/CCardCarouselComp.ts
Normal file
@@ -0,0 +1,148 @@
|
||||
import { ref, computed, defineComponent, onMounted } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
import { tools } from '@tools';
|
||||
import { IMyCard, IMyPage, IOperators } from '@src/model';
|
||||
|
||||
import objectId from '@src/js/objectId';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ElementComponent',
|
||||
props: {
|
||||
myel: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
editOn: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
cardColumnClass: {
|
||||
type: String,
|
||||
default: 'col-12 col-sm-6 col-md-4',
|
||||
},
|
||||
cardWidth: {
|
||||
type: String,
|
||||
default: '300px',
|
||||
},
|
||||
cardHeight: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
cardImg: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const $q = useQuasar();
|
||||
const carousel = ref(null);
|
||||
const cardScroller = ref(<any>null);
|
||||
const slide = ref(0);
|
||||
const animarecard = ref(0);
|
||||
|
||||
// Computed per l'altezza del contenitore immagine (70% dell'altezza card)
|
||||
const imageContainerHeight = computed(() => {
|
||||
const heightValue = parseInt(props.cardHeight.replace('px', ''));
|
||||
return `${heightValue * 0.7}px`;
|
||||
});
|
||||
const currentCardsPerSlide = computed(() => {
|
||||
return props.myel.num2 ? props.myel.num2 : 2; // cardsPerSlide
|
||||
});
|
||||
|
||||
// Costanti per i tipi di elemento
|
||||
const ELEMTYPE = {
|
||||
CARD: 'card',
|
||||
MARGINI: 'margini',
|
||||
};
|
||||
|
||||
const cardGroups = computed(() => {
|
||||
const cards = props.myel.listcards || [];
|
||||
const groups = [];
|
||||
|
||||
for (let i = 0; i < cards.length; i += currentCardsPerSlide.value) {
|
||||
groups.push(cards.slice(i, i + currentCardsPerSlide.value));
|
||||
}
|
||||
|
||||
if (!groups.length) {
|
||||
groups.push([
|
||||
{
|
||||
_id: objectId(),
|
||||
imagefile: '',
|
||||
alt: '',
|
||||
description: '',
|
||||
vers_img: 0,
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
return groups;
|
||||
});
|
||||
|
||||
// Metodi
|
||||
const canScrollLeft = ref(false);
|
||||
const canScrollRight = ref(false);
|
||||
|
||||
// Funzione per aggiornare lo stato degli scroll
|
||||
function updateScrollButtons() {
|
||||
const scroller = Array.isArray(cardScroller.value)
|
||||
? cardScroller.value[slide.value]
|
||||
: cardScroller.value;
|
||||
|
||||
if (scroller) {
|
||||
canScrollLeft.value = scroller.scrollLeft > 5; // 5px di tolleranza
|
||||
canScrollRight.value = scroller.scrollLeft < (scroller.scrollWidth - scroller.clientWidth - 5);
|
||||
}
|
||||
}
|
||||
// Modifica scrollCards per aggiornare i bottoni dopo lo scroll
|
||||
function scrollCards(delta: number) {
|
||||
const scroller = Array.isArray(cardScroller.value)
|
||||
? cardScroller.value[slide.value]
|
||||
: cardScroller.value;
|
||||
|
||||
if (scroller) {
|
||||
scroller.scrollBy({
|
||||
left: delta,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
// Aggiorna i bottoni dopo un piccolo delay per lo smooth scroll
|
||||
setTimeout(updateScrollButtons, 300);
|
||||
}
|
||||
}
|
||||
const clickOnElem = () => {
|
||||
// Logica per il click sull'elemento
|
||||
console.log('Element clicked', props.myel);
|
||||
};
|
||||
|
||||
const getClass = () => {
|
||||
// Restituisce classi aggiuntive basate sulla configurazione
|
||||
return props.myel.extraClass || '';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
updateScrollButtons();
|
||||
});
|
||||
|
||||
return {
|
||||
carousel,
|
||||
cardScroller,
|
||||
slide,
|
||||
animarecard,
|
||||
ELEMTYPE,
|
||||
cardGroups,
|
||||
scrollCards,
|
||||
clickOnElem,
|
||||
getClass,
|
||||
tools,
|
||||
imageContainerHeight,
|
||||
canScrollLeft,
|
||||
canScrollRight,
|
||||
updateScrollButtons,
|
||||
};
|
||||
},
|
||||
});
|
||||
158
src/components/CCardCarouselComp/CCardCarouselComp.vue
Normal file
158
src/components/CCardCarouselComp/CCardCarouselComp.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Card Carousel -->
|
||||
<div class="card-carousel-container">
|
||||
<div
|
||||
v-if="editOn"
|
||||
class="elemEdit"
|
||||
>
|
||||
Card
|
||||
</div>
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
:autoplay="animarecard"
|
||||
v-model="slide"
|
||||
navigation
|
||||
control-text-color="white"
|
||||
ref="carousel"
|
||||
transition-next="slide-left"
|
||||
transition-prev="slide-right"
|
||||
:height="tools.getNumberByPixel(cardHeight) + 20 + 'px'"
|
||||
width="100%"
|
||||
control-type="flat"
|
||||
class="shadow-2 rounded-borders"
|
||||
:style="`background-color: ${myel.color || '#ffffff'} !important`"
|
||||
@mouseenter="animarecard = 0"
|
||||
@mouseleave="animarecard = 1000"
|
||||
>
|
||||
<template v-slot:control>
|
||||
<q-carousel-control
|
||||
position="top-left"
|
||||
:offset="[10, -10]"
|
||||
class="q-gutter-xs"
|
||||
style="opacity: 0.7"
|
||||
>
|
||||
<q-btn
|
||||
v-if="canScrollLeft"
|
||||
push
|
||||
round
|
||||
:color="$q.dark.isActive ? 'black' : 'white'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'black'"
|
||||
icon="keyboard_arrow_left"
|
||||
@click="scrollCards(-300)"
|
||||
@scroll="updateScrollButtons"
|
||||
/>
|
||||
</q-carousel-control>
|
||||
<q-carousel-control
|
||||
position="top-right"
|
||||
class="q-gutter-xs"
|
||||
:offset="[10, -10]"
|
||||
style="opacity: 0.7"
|
||||
>
|
||||
<q-btn
|
||||
v-if="canScrollRight"
|
||||
push
|
||||
round
|
||||
:color="$q.dark.isActive ? 'black' : 'white'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'black'"
|
||||
icon="keyboard_arrow_right"
|
||||
@click="scrollCards(300)"
|
||||
@scroll="updateScrollButtons"
|
||||
/>
|
||||
</q-carousel-control>
|
||||
</template>
|
||||
|
||||
<!-- Slides con gruppi di card -->
|
||||
<q-carousel-slide
|
||||
v-for="(group, groupIndex) in cardGroups"
|
||||
:key="groupIndex"
|
||||
:name="groupIndex"
|
||||
>
|
||||
<div
|
||||
ref="cardScroller"
|
||||
@scroll="updateScrollButtons"
|
||||
:style="{
|
||||
'max-height': tools.getNumberByPixel(cardHeight) + 20 + 'px',
|
||||
'max-width': $q.screen.width + 'px',
|
||||
'overflow-x': 'auto',
|
||||
'overflow-y': 'hidden',
|
||||
'padding-bottom': '10px',
|
||||
}"
|
||||
>
|
||||
<div class="row no-wrap items-center">
|
||||
<div
|
||||
v-for="(rec, cardIndex) in group"
|
||||
:key="cardIndex"
|
||||
:class="cardColumnClass"
|
||||
class="flex flex-center"
|
||||
>
|
||||
<q-card
|
||||
:class="
|
||||
'flex-card bordered ' +
|
||||
(myel.class3 || '') +
|
||||
(rec.link ? ' titolo_card' : '')
|
||||
"
|
||||
:style="`
|
||||
${rec.style || ''};
|
||||
height: ${tools.getNumberByPixel(cardHeight) - 0 + 'px'};
|
||||
width: ${rec.width || cardWidth};
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`"
|
||||
@click="rec.link ? tools.openUrl(rec.link) : undefined"
|
||||
>
|
||||
<div
|
||||
class="img-container"
|
||||
:style="`
|
||||
height: ${cardImg};
|
||||
min-height: ${cardImg};
|
||||
max-height: ${cardImg};
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
`"
|
||||
>
|
||||
<q-img
|
||||
:class="
|
||||
(tools.getClassAnim(myel.anim2) || '') + ' ' + (myel.class4 || '')
|
||||
"
|
||||
:src="tools.getImgFileByElem(myel, rec, path)"
|
||||
fit="contain"
|
||||
:style="`height: ${cardImg};`"
|
||||
/>
|
||||
</div>
|
||||
<q-card-section class="q-card-section-small">
|
||||
<div
|
||||
:class="rec.size || 'text-subtitle1'"
|
||||
:style="`color: ${rec.color || 'inherit'}`"
|
||||
>
|
||||
{{ tools.getText(rec.alt) }}
|
||||
</div>
|
||||
<div
|
||||
:class="'q-mt-xs q-mb-xs ' + (tools.getClassAnim(myel.anim) || '')"
|
||||
v-html="rec.content"
|
||||
/>
|
||||
<div
|
||||
v-if="rec.description"
|
||||
class="text-caption"
|
||||
:style="`color: ${rec.colorsub || 'grey'}`"
|
||||
>
|
||||
{{ rec.description }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CCardCarouselComp.ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CCardCarouselComp.scss';
|
||||
</style>
|
||||
1
src/components/CCardCarouselComp/index.ts
Executable file
1
src/components/CCardCarouselComp/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export {default as CCardCarouselComp} from './CCardCarouselComp.vue'
|
||||
Reference in New Issue
Block a user