- aggiornata la grafica della Home di RISO
- Profilo Completition - Email Verificata - Invita un Amico (invio di email)
This commit is contained in:
Surya Paolo
@@ -1,33 +1,43 @@
|
||||
.myflex{
|
||||
// Aggiungi questi stili al tuo file SCSS esistente
|
||||
|
||||
.categories-icons-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.text_user_city{
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 0.85rem;
|
||||
color: grey;
|
||||
.category-icon-avatar {
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.actualdate{
|
||||
|
||||
}
|
||||
|
||||
|
||||
.cardrec{
|
||||
@media (min-width: 500px) {
|
||||
margin: 1px;
|
||||
padding: 4px;
|
||||
// Stili per il dialog delle categorie
|
||||
.categories-dialog {
|
||||
.dialog-header {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
}
|
||||
.dialog-content {
|
||||
padding: 20px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.text_title{
|
||||
color: blue;
|
||||
}
|
||||
.text_title_dark{
|
||||
color: white;
|
||||
}
|
||||
.categories-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.category-chip {
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@@ -40,6 +40,8 @@ export default defineComponent({
|
||||
|
||||
const visupage = ref(false)
|
||||
|
||||
const showCategoriesDialog = ref(false)
|
||||
|
||||
watch(() => props.prop_myrec, (newval, oldval) => {
|
||||
|
||||
mounted()
|
||||
@@ -92,6 +94,7 @@ export default defineComponent({
|
||||
cmdExt,
|
||||
visupage,
|
||||
showBadge,
|
||||
showCategoriesDialog,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="q-py-xs centermydiv cardrec"
|
||||
class="card-container q-py-xs centermydiv"
|
||||
:style="
|
||||
`max-width: ` +
|
||||
(tools.getwidth($q) - 20) +
|
||||
@@ -8,145 +8,256 @@
|
||||
($q.screen.lt.sm ? `min-width: ` + (tools.getwidth($q) - 20) + `px;` : ``)
|
||||
"
|
||||
>
|
||||
<q-item
|
||||
<q-card
|
||||
v-if="myrec"
|
||||
clickable
|
||||
v-ripple
|
||||
:class="
|
||||
`shadow-2 q-btn--rounded ` +
|
||||
($q.dark.isActive ? `bg-black` : `bg-teal-1`)
|
||||
"
|
||||
class="modern-card"
|
||||
:class="$q.dark.isActive ? `dark-card` : `light-card`"
|
||||
>
|
||||
<q-item-section
|
||||
v-if="
|
||||
shared_consts.TABLES_VISU_IMG.includes(table) &&
|
||||
myrec.photos &&
|
||||
myrec.photos.length > 0
|
||||
"
|
||||
avatar
|
||||
@click="cmdExt(costanti.CMD_OPEN_PAGE, myrec)"
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
class="card-content"
|
||||
>
|
||||
<q-avatar size="60px">
|
||||
<q-img
|
||||
:src="
|
||||
tools.getFullFileName(
|
||||
myrec.photos,
|
||||
table,
|
||||
myrec.username,
|
||||
myrec.groupname
|
||||
)
|
||||
<!-- Avatar at top -->
|
||||
<div class="avatar-container">
|
||||
<div
|
||||
v-if="
|
||||
shared_consts.TABLES_VISU_IMG.includes(table) &&
|
||||
myrec.photos &&
|
||||
myrec.photos.length > 0
|
||||
"
|
||||
:alt="myrec.descr"
|
||||
img-class="imgprofile"
|
||||
height="60px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section v-else avatar>
|
||||
<q-avatar size="60px">
|
||||
<q-img
|
||||
:src="getImgUser(myrec)"
|
||||
:alt="myrec.username"
|
||||
img-class="imgprofile"
|
||||
height="60px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
@click.stop="cmdExt(costanti.CMD_OPEN_PAGE, myrec)"
|
||||
class="avatar-wrapper"
|
||||
>
|
||||
<q-avatar
|
||||
size="70px"
|
||||
class="modern-avatar"
|
||||
>
|
||||
<q-img
|
||||
:src="
|
||||
tools.getFullFileName(
|
||||
myrec.photos,
|
||||
table,
|
||||
myrec.username,
|
||||
myrec.groupname
|
||||
)
|
||||
"
|
||||
:alt="myrec.descr"
|
||||
img-class="imgprofile"
|
||||
height="70px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="avatar-wrapper"
|
||||
>
|
||||
<q-avatar
|
||||
size="70px"
|
||||
class="modern-avatar"
|
||||
>
|
||||
<q-img
|
||||
:src="getImgUser(myrec)"
|
||||
:alt="myrec.username"
|
||||
img-class="imgprofile"
|
||||
height="70px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-item-section @click="cmdExt(costanti.CMD_OPEN_PAGE, null, myrec)">
|
||||
<q-item-label class="row no-wrap" style="overflow-x: auto; white-space: nowrap;">
|
||||
<!-- Content Section - Full Width -->
|
||||
<div
|
||||
@click="cmdExt(costanti.CMD_OPEN_PAGE, null, myrec)"
|
||||
class="content-full-width"
|
||||
style="flex: 1; min-width: 0;"
|
||||
>
|
||||
<!-- Title -->
|
||||
<div
|
||||
v-if="myrec.title"
|
||||
class="title-text q-mb-xs"
|
||||
:class="$q.dark.isActive ? `text-white` : `text-grey-9`"
|
||||
>
|
||||
<span class="text-weight-bold">{{ myrec.title }}</span>
|
||||
</div>
|
||||
|
||||
<q-chip
|
||||
v-for="(rec, ind) of myrec.recCatGrp"
|
||||
:key="ind"
|
||||
<!-- Categories Icons -->
|
||||
<div
|
||||
v-if="myrec.recCatGrp && myrec.recCatGrp.length > 0"
|
||||
class="categories-section q-mb-sm"
|
||||
>
|
||||
<div class="categories-icons-container">
|
||||
<q-avatar
|
||||
v-for="(rec, ind) of myrec.recCatGrp"
|
||||
:key="ind"
|
||||
size="32px"
|
||||
:style="`background-color: ${rec.color}; cursor: pointer;`"
|
||||
class="category-icon-avatar"
|
||||
@click.stop="showCategoriesDialog = true"
|
||||
>
|
||||
<q-icon
|
||||
:name="rec.icon"
|
||||
size="18px"
|
||||
color="white"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div
|
||||
v-if="myrec.descr"
|
||||
class="description-text q-mb-sm"
|
||||
>
|
||||
{{ myrec.descr }}
|
||||
</div>
|
||||
|
||||
<!-- Footer with Icons and Cities -->
|
||||
<div class="footer-section">
|
||||
<div class="footer-content">
|
||||
<div class="visibility-icons">
|
||||
<q-chip
|
||||
v-if="
|
||||
myrec.visibility &&
|
||||
myrec.visibility.includes(shared_consts.Visibility_Group.PRIVATE)
|
||||
"
|
||||
dense
|
||||
size="sm"
|
||||
class="visibility-chip"
|
||||
>
|
||||
<q-icon
|
||||
name="fas fa-lock"
|
||||
size="12px"
|
||||
/>
|
||||
</q-chip>
|
||||
<q-chip
|
||||
v-if="
|
||||
myrec.visibility &&
|
||||
myrec.visibility.includes(shared_consts.Visibility_Group.HIDDEN)
|
||||
"
|
||||
dense
|
||||
size="sm"
|
||||
class="visibility-chip"
|
||||
>
|
||||
<q-icon
|
||||
name="fas fa-eye-slash"
|
||||
size="12px"
|
||||
/>
|
||||
</q-chip>
|
||||
</div>
|
||||
<div class="cities-text">
|
||||
<q-icon
|
||||
name="fas fa-map-marker-alt"
|
||||
size="12px"
|
||||
class="q-mr-xs"
|
||||
/>
|
||||
<span
|
||||
v-for="(rec, ind) of myrec.mycities"
|
||||
:key="ind"
|
||||
>
|
||||
<span v-if="ind > 0">, </span>{{ rec.comune }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Menu -->
|
||||
<div
|
||||
v-if="tools.canModifyThisRec(myrec, table)"
|
||||
class="action-section q-ml-auto"
|
||||
style="flex: 0 0 auto;"
|
||||
>
|
||||
<q-btn
|
||||
rounded
|
||||
flat
|
||||
dense
|
||||
class="text-center shadow-5 glossy chipmodif text-white"
|
||||
:style="`background-color: ${rec.color};`"
|
||||
icon="fas fa-ellipsis-v"
|
||||
class="action-button q-ml-auto"
|
||||
@click.stop
|
||||
>
|
||||
<q-icon :name="rec.icon" left />
|
||||
{{ rec.descr }}</q-chip
|
||||
>
|
||||
|
||||
<!--<span class="dateevent" v-if="myrec.dateTimeStart">dal <span class="datainizio">{{tools.getstrVeryShortDate(myrec.dateStart) }}</span> al <span class="datafine">{{ tools.getstrVeryShortDate(myrec.dateEnd) }}</span>
|
||||
</span>-->
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
v-if="myrec.title"
|
||||
lines="1"
|
||||
:class="$q.dark.isActive ? `text_title_dark` : `text_title`"
|
||||
>
|
||||
<span class="text-weight-bold">{{ myrec.title }}</span>
|
||||
</q-item-label>
|
||||
<q-item-label lines="3" v-if="myrec.descr"
|
||||
>{{ myrec.descr }}<br />
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
lines="1"
|
||||
style="text-align: right"
|
||||
class="text_user_city"
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
myrec.visibility &&
|
||||
myrec.visibility.includes(shared_consts.Visibility_Group.PRIVATE)
|
||||
"
|
||||
class="q-mr-xs"
|
||||
>
|
||||
<q-icon name="fas fa-lock"></q-icon
|
||||
></span>
|
||||
<span
|
||||
v-if="
|
||||
myrec.visibility &&
|
||||
myrec.visibility.includes(shared_consts.Visibility_Group.HIDDEN)
|
||||
"
|
||||
class="q-mr-xs"
|
||||
>
|
||||
<q-icon name="fas fa-eye-slash"></q-icon
|
||||
></span>
|
||||
<span v-for="(rec, ind) of myrec.mycities" :key="ind"
|
||||
><span v-if="ind > 0">, </span>{{ rec.comune }}</span
|
||||
>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side v-if="tools.canModifyThisRec(myrec, table)">
|
||||
<q-item-label>
|
||||
<q-btn rounded dense icon="fas fa-pencil-alt">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-list style="min-width: 180px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
|
||||
>
|
||||
<q-item-section side>
|
||||
<q-icon name="fas fa-pencil-alt" />
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
name="fas fa-pencil-alt"
|
||||
color="primary"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('reg.edit') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-separator />
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
|
||||
>
|
||||
<q-item-section side>
|
||||
<q-icon name="fas fa-trash-alt" />
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
name="fas fa-trash-alt"
|
||||
color="negative"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('reg.elimina') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator inset="item" />
|
||||
</div>
|
||||
</q-item>
|
||||
</q-card>
|
||||
|
||||
<!-- Categories Dialog -->
|
||||
<q-dialog v-model="showCategoriesDialog">
|
||||
<q-card
|
||||
class="categories-dialog"
|
||||
:style="{ minWidth: $q.screen.lt.sm ? '90vw' : '400px' }"
|
||||
>
|
||||
<q-card-section class="dialog-header">
|
||||
<div class="text-h6">Categorie</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="dialog-content">
|
||||
<div class="categories-grid">
|
||||
<q-chip
|
||||
v-for="(rec, ind) of myrec.recCatGrp"
|
||||
:key="ind"
|
||||
class="category-chip shadow-3"
|
||||
:style="`background-color: ${rec.color}; color: white;`"
|
||||
>
|
||||
<q-icon
|
||||
:name="rec.icon"
|
||||
left
|
||||
size="18px"
|
||||
/>
|
||||
{{ rec.descr }}
|
||||
</q-chip>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
flat
|
||||
label="Chiudi"
|
||||
color="primary"
|
||||
v-close-popup
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CMyRecGrpCard.ts">
|
||||
</script>
|
||||
<script lang="ts" src="./CMyRecGrpCard.ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CMyRecGrpCard.scss';
|
||||
|
||||
Reference in New Issue
Block a user