- aggiornamenti guida RIS, FAQ
- Editor HTML aggiunto CSS e Script - Statistiche - CRISBalanceBar - Inizio Sync... (ma disattivato)
This commit is contained in:
Surya Paolo
@@ -30,7 +30,7 @@ export default defineComponent({
|
||||
props: {},
|
||||
components: {
|
||||
CTitleBanner, CElemStat,
|
||||
CCardState, CCardStat, CLineChart, CMyFieldRec, CTimeAgo
|
||||
CLineChart, CMyFieldRec, CTimeAgo
|
||||
},
|
||||
setup(props, { attrs, slots, emit }) {
|
||||
const { t } = useI18n()
|
||||
|
||||
@@ -1,336 +1,230 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="status-reg-modern">
|
||||
<div v-if="visustat">
|
||||
<CTitleBanner class="q-pa-xs" :title="$t('pages.status')" bgcolor="bg-primary" clcolor="text-white" mystyle=""
|
||||
myclass="sfondo_gradiente_blu myshad" :canopen="true">
|
||||
<div class="flex flex-center flex-wrap">
|
||||
<CElemStat myclass="fixed-size" :title="$t('statusreg.reg')" icon="fas fa-users"
|
||||
:value_today="datastat.num_reg_today" :mytextval="datastat.activeusers + ' su ' + tools.numtostr(datastat.num_reg)
|
||||
" classColor="text-red" colBack="green">
|
||||
</CElemStat>
|
||||
<CElemStat v-if="true" myclass="fixed-size" :title="$t('statusreg.online_today')" icon="fas fa-wifi"
|
||||
:mytextval="tools.numtostr(datastat.online_today)" classColor="text-orange" colBack="yellow">
|
||||
</CElemStat>
|
||||
<CElemStat myclass="fixed-size" v-if="datastat.num_annunci > 0" :title="$t('statusreg.num_annunci')"
|
||||
icon="fas fa-tshirt" :value_today="0" :mytextval="tools.numtostr(datastat.num_annunci)"
|
||||
classColor="text-green" colBack="orange">
|
||||
</CElemStat>
|
||||
<CElemStat myclass="fixed-size" v-if="datastat.num_circuiti_attivi > 0"
|
||||
:title="$t('statusreg.num_circuiti_attivi')" icon="fas fa-map-marker-alt" :value_today="0" :mytextval="datastat.num_circuiti_attivi + ' su ' + datastat.num_circuiti
|
||||
" classColor="text-blue" colBack="red">
|
||||
</CElemStat>
|
||||
<CElemStat myclass="fixed-size" v-if="datastat.num_transaz_tot > 0" :title="$t('statusreg.numtransazioni')"
|
||||
icon="fas fa-sync-alt" :value_today="0" :mytextval="tools.numtostr(datastat.num_transaz_tot)"
|
||||
classColor="text-indigo" colBack="green">
|
||||
</CElemStat>
|
||||
<CElemStat myclass="fixed-size" v-if="datastat.tot_RIS_transati > 0" :title="$t('statusreg.totristransati')"
|
||||
icon="img: /images/1ris_rosso_100.png" :value_today="0"
|
||||
:mytextval="tools.numtostr(datastat.tot_RIS_transati) + ' RIS'" classColor="text-blueviolet"
|
||||
colBack="green">
|
||||
</CElemStat>
|
||||
<CTitleBanner class="title-banner" :title="t('pages.status')" bgcolor="bg-primary"
|
||||
clcolor="text-white" mystyle="" myclass="sfondo_gradiente_blu myshad" :canopen="true">
|
||||
|
||||
<!--<CCardState :mytext="$t('statusreg.autorizzare')" :myval="datastat.num_autorizzare"
|
||||
mycolor="yellow" :myperc="(datastat.num_autorizzare / datastat.num_teleg_attivo) * 100"></CCardState>
|
||||
-->
|
||||
<div class="stats-wrapper">
|
||||
<CElemStat myclass="stat-card" :title="t('statusreg.reg')" icon="fas fa-users"
|
||||
:value_today="datastat.num_reg_today"
|
||||
:mytextval="datastat.activeusers + ' su ' + tools.numtostr(datastat.num_reg)"
|
||||
classColor="text-red" colBack="green" />
|
||||
|
||||
<div class="q-pa-xs" v-if="datastat.num_part_accepted > 1">
|
||||
<CCardStat :mytext="$t('stat.accepted')" :myval="datastat.num_part_accepted"></CCardStat>
|
||||
</div>
|
||||
<CElemStat myclass="stat-card" :title="t('statusreg.online_today')" icon="fas fa-wifi"
|
||||
:mytextval="tools.numtostr(datastat.online_today)"
|
||||
classColor="text-orange" colBack="yellow" />
|
||||
|
||||
<q-list bordered v-if="tools.isLogged()">
|
||||
<q-expansion-item group="somegroup" icon="fas fa-user-plus" :label="$t('statusreg.newreg')" default-opened
|
||||
header-class="text-primary">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<TransitionGroup name="fade" appear enter-active-class="animazione fadeIn"
|
||||
leave-active-class="animazione fadeOut">
|
||||
<q-item v-for="(user, index) in lastsreg" :key="index" class="animated chip_shadow q-ma-sm"
|
||||
v-ripple clickable @click="gotoPage(`/my/${user.username}`)">
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="48px">
|
||||
<img :src="userStore.getImgByProfile(user)" />
|
||||
<q-badge v-if="tools.isUserOnline(user)" align="top" floating color="green">online</q-badge>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section class="">
|
||||
<q-item-label>
|
||||
<span v-html="tools.getNameToShow(user, null, {
|
||||
showprov: true,
|
||||
html: true,
|
||||
})
|
||||
"></span>
|
||||
</q-item-label>
|
||||
<q-item-label caption>
|
||||
<span v-html="tools.getUserNameOnlyIfToShow(user, null, {
|
||||
showprov: false,
|
||||
html: true,
|
||||
})"></span>
|
||||
</q-item-label>
|
||||
<q-item-label class="iscritto_da">
|
||||
{{ t("statusreg.invite_by") }}:
|
||||
<span class="iscritto_da_name">{{
|
||||
tools.getNameToShow(user.user_aportador)
|
||||
}}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label style="color: white">{{
|
||||
tools.getstrshortDate(user.date_reg)
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</TransitionGroup>
|
||||
<CElemStat myclass="stat-card" v-if="datastat.num_annunci > 0"
|
||||
:title="t('statusreg.num_annunci')" icon="fas fa-tshirt" :value_today="0"
|
||||
:mytextval="tools.numtostr(datastat.num_annunci)"
|
||||
classColor="text-green" colBack="orange" />
|
||||
|
||||
<CElemStat myclass="stat-card" v-if="datastat.num_circuiti_attivi > 0"
|
||||
:title="t('statusreg.num_circuiti_attivi')" icon="fas fa-map-marker-alt"
|
||||
:value_today="0" :mytextval="datastat.num_circuiti_attivi + ' su ' + datastat.num_circuiti"
|
||||
classColor="text-blue" colBack="red" />
|
||||
|
||||
<CElemStat myclass="stat-card" v-if="datastat.num_transaz_tot > 0"
|
||||
:title="t('statusreg.numtransazioni')" icon="fas fa-sync-alt" :value_today="0"
|
||||
:mytextval="tools.numtostr(datastat.num_transaz_tot)"
|
||||
classColor="text-indigo" colBack="green" />
|
||||
|
||||
<CElemStat myclass="stat-card" v-if="datastat.tot_RIS_transati > 0"
|
||||
:title="t('statusreg.totristransati')" icon="img: /images/1ris_rosso_100.png"
|
||||
:value_today="0" :mytextval="tools.numtostr(datastat.tot_RIS_transati) + ' RIS'"
|
||||
classColor="text-blueviolet" colBack="green" />
|
||||
</div>
|
||||
|
||||
<q-list bordered class="expansion-list">
|
||||
<q-expansion-item group="somegroup" icon="fas fa-user-plus" :label="t('statusreg.newreg')"
|
||||
default-opened header-class="text-primary expansion-header">
|
||||
<q-card class="expansion-card">
|
||||
<q-card-section class="card-content">
|
||||
<q-item v-for="(user, index) in lastsreg" :key="index"
|
||||
class="user-item" clickable v-ripple @click="gotoPage(`/my/${user.username}`)">
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="44px">
|
||||
<img :src="userStore.getImgByProfile(user)" />
|
||||
<q-badge v-if="tools.isUserOnline(user)" align="top" floating color="green">online</q-badge>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="user-name">
|
||||
<span v-html="tools.getNameToShow(user, null, { showprov: true, html: true })"></span>
|
||||
</q-item-label>
|
||||
<q-item-label caption class="username-caption">
|
||||
<span v-html="tools.getUserNameOnlyIfToShow(user, null, { showprov: false, html: true })"></span>
|
||||
</q-item-label>
|
||||
<q-item-label class="iscritto_da">
|
||||
{{ t("statusreg.invite_by") }}:
|
||||
<span class="iscritto_da_name">{{ tools.getNameToShow(user.user_aportador) }}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-item-label class="date-label">{{ tools.getstrshortDate(user.date_reg) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-expansion-item group="somegroup" icon="fas fa-medal"
|
||||
:label="t('statusreg.lastsharedlink')" header-class="text-purple expansion-header">
|
||||
<q-card class="expansion-card">
|
||||
<q-card-section class="card-content">
|
||||
<div class="info-section">
|
||||
<div class="info-title">Unisciti a {{tools.sitename()}}</div>
|
||||
<div class="info-text">
|
||||
Se ancora non sei registrato a {{tools.sitename()}}, scegli un invitante che conosci.
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-expansion-item expand-separator group="somegroup" icon="fas fa-medal"
|
||||
:label="$t('statusreg.lastsharedlink')" header-class="text-purple">
|
||||
<div>
|
||||
<div class="text-center text-bold text-h6">Unisciti a {{tools.sitename()}}</div>
|
||||
<div class="text-center">
|
||||
Se ancora non sei registrato a {{tools.sitename()}}, scegli un invitante che
|
||||
conosci. Questa persona dovrà ammetterti per permetterti di
|
||||
accedere alle funzionalità.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-item v-for="(user, index) in lastssharedlink" :key="index" class="animated chip_shadow q-ma-sm"
|
||||
clickable v-ripple @click="gotoPage(`/registrati/${user.user_aportador.username}`)">
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="48px">
|
||||
<img :src="userStore.getImgByProfile(user.user_aportador)" />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section class="">
|
||||
<q-item-label>
|
||||
<span v-html="tools.getNameToShow(user.user_aportador, null, {
|
||||
showprov: true,
|
||||
html: true,
|
||||
})
|
||||
"></span>
|
||||
</q-item-label>
|
||||
<q-item-label caption>
|
||||
<span v-html="tools.getUserNameOnlyIfToShow(user.user_aportador, null, {
|
||||
showprov: false,
|
||||
html: true,
|
||||
})">
|
||||
</span></q-item-label>
|
||||
<q-item-label class="iscritto_da">
|
||||
{{ t("statusreg.has_invited") }}:
|
||||
<span class="iscritto_da_name">{{
|
||||
tools.getNameToShow(user)
|
||||
}}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side><span class="text-h6 q-mr-sm"></span></q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
<q-item v-for="(user, index) in lastssharedlink" :key="index"
|
||||
class="user-item" clickable v-ripple
|
||||
@click="gotoPage(`/registrati/${user.user_aportador.username}`)">
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="44px">
|
||||
<img :src="userStore.getImgByProfile(user.user_aportador)" />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="user-name">
|
||||
<span v-html="tools.getNameToShow(user.user_aportador, null, { showprov: true, html: true })"></span>
|
||||
</q-item-label>
|
||||
<q-item-label caption class="username-caption">
|
||||
<span v-html="tools.getUserNameOnlyIfToShow(user.user_aportador, null, { showprov: false, html: true })"></span>
|
||||
</q-item-label>
|
||||
<q-item-label class="iscritto_da">
|
||||
{{ t("statusreg.has_invited") }}:
|
||||
<span class="iscritto_da_name">{{ tools.getNameToShow(user) }}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item group="somegroup" icon="fas fa-wifi" :label="$t('statusreg.onlineusers', { today: datastat.online_today })
|
||||
" header-class="text-teal">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<q-list bordered>
|
||||
<TransitionGroup name="fade" appear enter-active-class="animazione fadeIn"
|
||||
leave-active-class="animazione fadeOut">
|
||||
<q-item v-for="(user, index) in lastsonline" :key="index" class="animated chip_shadow q-ma-sm"
|
||||
clickable v-ripple @click="gotoPage(`/my/${user.username}`)">
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="48px">
|
||||
<img :src="userStore.getImgByProfile(user)" />
|
||||
<q-badge v-if="tools.isUserOnline(user)" align="top" floating
|
||||
color="green">online</q-badge>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section class="">
|
||||
<q-item-label>
|
||||
<span v-html="tools.getNameToShow(user, null, {
|
||||
showprov: true,
|
||||
html: true,
|
||||
})
|
||||
"></span>
|
||||
</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
tools.getUserNameOnlyIfToShow(user, null, {
|
||||
showprov: false,
|
||||
html: true,
|
||||
})
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<div :class="`text-h6 q-mr-sm text-bold ` + $q.dark.isActive
|
||||
? `text-white`
|
||||
: `text-black`
|
||||
">
|
||||
<CTimeAgo :datetime="user.lasttimeonline" />
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</TransitionGroup>
|
||||
</q-list>
|
||||
<q-separator />
|
||||
|
||||
<q-expansion-item group="somegroup" icon="fas fa-wifi"
|
||||
:label="t('statusreg.onlineusers', { today: datastat.online_today })"
|
||||
header-class="text-teal expansion-header">
|
||||
<q-card class="expansion-card">
|
||||
<q-card-section class="card-content">
|
||||
<q-item v-for="(user, index) in lastsonline" :key="index"
|
||||
class="user-item" clickable v-ripple @click="gotoPage(`/my/${user.username}`)">
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="44px">
|
||||
<img :src="userStore.getImgByProfile(user)" />
|
||||
<q-badge v-if="tools.isUserOnline(user)" align="top" floating color="green">online</q-badge>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="user-name">
|
||||
<span v-html="tools.getNameToShow(user, null, { showprov: true, html: true })"></span>
|
||||
</q-item-label>
|
||||
<q-item-label caption class="username-caption">
|
||||
<span v-html="tools.getUserNameOnlyIfToShow(user, null, { showprov: false, html: true })"></span>
|
||||
</q-item-label>
|
||||
<q-item-label caption class="access-time">
|
||||
{{ tools.getstrDateTimeLong(user.lastaccess) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-expansion-item group="somegroup" icon="fas fa-gift"
|
||||
:label="t('statusreg.diffusori')" header-class="text-green expansion-header">
|
||||
<q-card class="expansion-card">
|
||||
<q-card-section class="card-content">
|
||||
<div class="info-section">
|
||||
<div class="info-title">Aiuta {{tools.sitename()}} a crescere</div>
|
||||
<div class="info-text">
|
||||
Condividi il tuo link d'invito, alimentando nuovi ingressi alla RETE Solidale.
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<q-item v-for="(user, index) in diffusorilist" :key="index"
|
||||
class="user-item ranking-item" clickable v-ripple @click="gotoPage(`/my/${user.username}`)">
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="44px">
|
||||
<img :src="userStore.getImgByProfile(user)" />
|
||||
<q-badge v-if="tools.isUserOnline(user)" align="top" floating color="green">online</q-badge>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label overline>
|
||||
<div class="index_diffusore">{{ index + 1 }}°</div>
|
||||
</q-item-label>
|
||||
<q-item-label class="user-name">
|
||||
<span v-html="tools.getNameToShow(user, null, { showprov: true, html: true })"></span>
|
||||
</q-item-label>
|
||||
<q-item-label caption class="username-caption">
|
||||
{{ tools.getUserNameOnlyIfToShow(user, null, { showprov: false, html: true }) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<div class="ranking-count">{{ user.count }}</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item v-if="false" expand-separator group="somegroup" icon="fas fa-medal"
|
||||
:label="$t('statusreg.diffusori')" header-class="text-purple">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<div class="text-center text-bold text-h6">
|
||||
Aiuta {{tools.sitename()}} a crescere
|
||||
</div>
|
||||
<div class="text-center">
|
||||
Condividi il tuo link d'invito, alimentando nuovi ingressi
|
||||
alla RETE Solidale di {{tools.sitename()}}.
|
||||
</div>
|
||||
<q-list bordered>
|
||||
<TransitionGroup name="fade" appear enter-active-class="animazione fadeIn"
|
||||
leave-active-class="animazione fadeOut">
|
||||
<q-item v-for="(user, index) in diffusorilist" :key="index" class="animated chip_shadow q-ma-sm"
|
||||
clickable v-ripple @click="gotoPage(`/my/${user.username}`)">
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="48px">
|
||||
<img :src="userStore.getImgByProfile(user)" />
|
||||
<q-badge v-if="tools.isUserOnline(user)" align="top" floating
|
||||
color="green">online</q-badge>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section class="">
|
||||
<q-item-label overline>
|
||||
<div class="index_diffusore">
|
||||
{{ index + 1 }}°
|
||||
</div>
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
<span v-html="tools.getNameToShow(user, null, {
|
||||
showprov: true,
|
||||
html: true,
|
||||
})
|
||||
"></span>
|
||||
</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
tools.getUserNameOnlyIfToShow(user, null, {
|
||||
showprov: false,
|
||||
html: true,
|
||||
})
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<div :class="`text-h6 q-mx-sm q-px-sm text-bold ` +
|
||||
($q.dark.isActive ? `text-white` : `text-black`)
|
||||
">
|
||||
{{ user.count }}
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</TransitionGroup>
|
||||
</q-list>
|
||||
<q-separator />
|
||||
|
||||
<q-expansion-item group="somegroup" icon="fas fa-handshake"
|
||||
:label="t('handshake.last_strettedimano')"
|
||||
header-class="bg-teal text-white expansion-header" expand-icon-class="text-white">
|
||||
<q-card class="expansion-card bg-teal-1">
|
||||
<q-card-section class="card-content">
|
||||
<div class="info-section">
|
||||
<div class="info-title">Strette di Mano</div>
|
||||
<div class="info-text">
|
||||
Più persone conoscerai di persona e maggiore aumenterà la Rete di fiducia.
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<q-item v-for="(user, index) in strettelist" :key="index"
|
||||
class="user-item handshake-item" clickable v-ripple>
|
||||
<q-item-section avatar @click="gotoPage(`/my/${user.username}`)">
|
||||
<q-avatar round size="44px">
|
||||
<img :src="userStore.getImgByProfile(user)" />
|
||||
<q-badge v-if="tools.isUserOnline(user)" align="top" floating color="green">online</q-badge>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="clDateStrette">
|
||||
{{ tools.getstrDateTimeLong(user.profile.handshake.date) }}
|
||||
</q-item-label>
|
||||
<q-item-label class="user-name">
|
||||
<span v-html="tools.getNameToShow(user, null, { showprov: true, html: true })"></span>
|
||||
</q-item-label>
|
||||
<q-item-label class="handshake-friend">
|
||||
<span v-html="tools.getNameToShow(user.userfriend, null, { showprov: true, html: true })"></span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side @click="gotoPage(`/my/${user.userfriend.username}`)">
|
||||
<q-avatar round size="44px">
|
||||
<img :src="userStore.getImgByProfile(user.userfriend)" />
|
||||
<q-badge v-if="tools.isUserOnline(user.userfriend)" align="top" floating color="green">online</q-badge>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
|
||||
<q-expansion-item group="somegroup" icon="fas fa-handshake" :label="$t('handshake.last_strettedimano')"
|
||||
header-class="bg-teal text-white" expand-icon-class="text-white">
|
||||
<q-card class="bg-teal-2">
|
||||
<q-card-section>
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<div class="text-center text-bold text-h6">
|
||||
Strette di Mano
|
||||
</div>
|
||||
<div class="text-center">
|
||||
Più persone conoscerai di persona e maggiore aumenterà la
|
||||
Rete di fiducia.
|
||||
</div>
|
||||
<q-list bordered>
|
||||
<TransitionGroup name="fade" appear enter-active-class="animazione fadeIn"
|
||||
leave-active-class="animazione fadeOut">
|
||||
<q-item v-for="(user, index) in strettelist" :key="index" class="animated chip_shadow q-ma-sm"
|
||||
clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="48px" @click="gotoPage(`/my/${user.username}`)">
|
||||
<img :src="userStore.getImgByProfile(user)" />
|
||||
<q-badge v-if="tools.isUserOnline(user)" align="top" floating
|
||||
color="green">online</q-badge>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section class="">
|
||||
<q-item-label class="clDateStrette">
|
||||
{{
|
||||
tools.getstrDateTimeLong(
|
||||
user.profile.handshake.date
|
||||
)
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
<span v-html="tools.getNameToShow(user, null, {
|
||||
showprov: true,
|
||||
html: true,
|
||||
})
|
||||
"></span>
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label style="text-align: right">
|
||||
<span v-html="tools.getNameToShow(user.userfriend, null, {
|
||||
showprov: true,
|
||||
html: true,
|
||||
})
|
||||
"></span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-avatar round size="48px" @click="
|
||||
gotoPage(`/my/${user.userfriend.username}`)
|
||||
">
|
||||
<img :src="userStore.getImgByProfile(user.userfriend)
|
||||
" />
|
||||
<q-badge v-if="tools.isUserOnline(user.userfriend)" align="top" floating
|
||||
color="green">online</q-badge>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</TransitionGroup>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
|
||||
<!--<CGeoChart :mydata="datastat.arr_nations">
|
||||
|
||||
</CGeoChart>-->
|
||||
|
||||
<div class="row q-pa-sm text-center justify-center">
|
||||
<!--
|
||||
<div class="clBorderZoom">
|
||||
<CListNationality :mydata="datastat.arr_nations">
|
||||
|
||||
</CListNationality>
|
||||
</div>-->
|
||||
<div class="clBorderTutor">
|
||||
<CLineChart :mydata="datastat.reg_daily" :title="$t('stat.reg_daily')" color="blue" bordercolor="blue"
|
||||
:sum="true" :showMedia="true">
|
||||
</CLineChart>
|
||||
|
||||
<!--<CLineChart :mydata="datastat.reg_daily" :title="$t('stat.reg_total')"
|
||||
:offset="datastat.numreg_untilday" :sum="true"
|
||||
:mycolors="['#0b0', '#666']">
|
||||
|
||||
</CLineChart>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<CLineChart :mydata="datastat.reg_daily" :title="t('stat.reg_daily')"
|
||||
color="blue" bordercolor="blue" :sum="true" :showMedia="true" />
|
||||
</div>
|
||||
</CTitleBanner>
|
||||
</div>
|
||||
@@ -341,5 +235,5 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "./CStatusReg.scss";
|
||||
@import "./CStatusReg_Modern.scss";
|
||||
</style>
|
||||
|
||||
243
src/components/CStatusReg/CStatusReg_Modern.scss
Normal file
243
src/components/CStatusReg/CStatusReg_Modern.scss
Normal file
@@ -0,0 +1,243 @@
|
||||
.status-reg-modern {
|
||||
padding: 4px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.title-banner {
|
||||
padding: 4px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Stats wrapper
|
||||
.stats-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
min-width: 140px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expansion list
|
||||
.expansion-list {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin: 8px 0;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.expansion-header {
|
||||
padding: 8px 12px;
|
||||
font-weight: 600;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expansion card
|
||||
.expansion-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
.card-content {
|
||||
padding: 8px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Info section
|
||||
.info-section {
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// User items
|
||||
.user-item {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 6px;
|
||||
padding: 8px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
margin-bottom: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(102, 126, 234, 0.15);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.username-caption {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.date-label {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.access-time {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ranking items
|
||||
.ranking-item {
|
||||
.index_diffusore {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-count {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handshake items
|
||||
.handshake-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.clDateStrette {
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
font-size: 11px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.handshake-friend {
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Original styles preserved
|
||||
.iscritto_da {
|
||||
font-style: italic;
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.iscritto_da_name {
|
||||
color: #667eea !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// Chart wrapper
|
||||
.chart-wrapper {
|
||||
margin-top: 12px;
|
||||
padding: 8px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user