- Corretto campo "Comune di Residenza".
- Aggiornato Completamento Profilo: Comune di Residenza. - Registrazione
This commit is contained in:
Surya Paolo
@@ -119,9 +119,9 @@ $mobile-footer-height: 80px;
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 6px 8px;
|
||||
padding: 12px 8px;
|
||||
border-radius: 0;
|
||||
margin: 8px;
|
||||
margin: 4px;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
@@ -840,4 +840,229 @@ $mobile-footer-height: 80px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// DIALOG NOINVITO (Stile Moderno)
|
||||
// ========================================
|
||||
.noinvito-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $shadow-lg;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.noinvito-header {
|
||||
background: linear-gradient(135deg, $primary-color, $primary-dark);
|
||||
color: white;
|
||||
padding: 16px 20px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.text-h6 {
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.q-btn {
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noinvito-content {
|
||||
padding: 24px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border-radius: $border-radius-sm;
|
||||
margin-bottom: 20px;
|
||||
transition: all $transition-speed ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 16px;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// Effetto luce scorrevole
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.q-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-info {
|
||||
background: linear-gradient(135deg, rgba($primary-color, 0.08) 0%, rgba($primary-color, 0.04) 100%);
|
||||
border: 2px solid rgba($primary-color, 0.2);
|
||||
border-left: 4px solid $primary-color;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, rgba($primary-color, 0.12) 0%, rgba($primary-color, 0.06) 100%);
|
||||
border-color: rgba($primary-color, 0.3);
|
||||
box-shadow: 0 4px 16px rgba($primary-color, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-info {
|
||||
background: linear-gradient(135deg, rgba($accent-color, 0.08) 0%, rgba($accent-color, 0.04) 100%);
|
||||
border: 2px solid rgba($accent-color, 0.2);
|
||||
border-left: 4px solid $accent-color;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, rgba($accent-color, 0.12) 0%, rgba($accent-color, 0.06) 100%);
|
||||
border-color: rgba($accent-color, 0.3);
|
||||
box-shadow: 0 4px 16px rgba($accent-color, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.invitation-types {
|
||||
margin: 12px 0 0 0;
|
||||
padding-left: 20px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding-left: 16px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.6;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $primary-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.noinvito-actions {
|
||||
padding: 20px 24px 24px;
|
||||
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
border-radius: $border-radius-sm;
|
||||
font-weight: 500;
|
||||
padding: 12px 24px;
|
||||
transition: all $transition-speed cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 10px 20px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
// Effetto ripple
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s ease, height 0.6s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-md;
|
||||
|
||||
&::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
// Bottone primario (Telegram)
|
||||
&.q-btn--unelevated {
|
||||
background: linear-gradient(135deg, $primary-color, $primary-dark);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, darken($primary-color, 5%), $primary-color);
|
||||
box-shadow: 0 4px 16px rgba($primary-color, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
// Bottone outline (Email)
|
||||
&.q-btn--outline {
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, rgba($primary-color, 0.05), rgba($primary-color, 0.02));
|
||||
}
|
||||
}
|
||||
|
||||
.q-icon {
|
||||
transition: transform $transition-speed ease;
|
||||
}
|
||||
|
||||
&:hover .q-icon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.q-mb-sm {
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
}
|
||||
@@ -131,6 +131,7 @@ export default defineComponent({
|
||||
const inputSurname = ref(<any>null);
|
||||
const inputPassword = ref(<any>null);
|
||||
const inputPassword2 = ref(<any>null);
|
||||
const noinvito = ref(false);
|
||||
|
||||
const submitBtn = ref(<any>null); // AGGIUNGI QUESTA RIGA
|
||||
|
||||
@@ -559,6 +560,7 @@ export default defineComponent({
|
||||
shared_consts,
|
||||
isMobile,
|
||||
submitBtn,
|
||||
noinvito,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="signup-container">
|
||||
<!-- Banner utente già loggato -->
|
||||
<div
|
||||
v-if="tools.isLogged() && tools.getUsername() && !collettivo"
|
||||
v-if="tools.isLogged() && tools.getUsername() && !collettivo && !visureg"
|
||||
class="already-logged"
|
||||
>
|
||||
<q-card class="success-card">
|
||||
@@ -207,6 +207,19 @@
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div class="invitante-non-presente">
|
||||
<q-btn
|
||||
v-if="!signup.aportador_solidario"
|
||||
dense
|
||||
outline
|
||||
color="primary"
|
||||
label="Non hai l'invito?"
|
||||
icon="description"
|
||||
@click="noinvito = true"
|
||||
class="policy-btn"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
ref="inputEmail"
|
||||
tabindex="2"
|
||||
@@ -644,6 +657,94 @@
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<q-dialog
|
||||
v-model="noinvito"
|
||||
maximized
|
||||
>
|
||||
<q-card class="noinvito-card">
|
||||
<q-card-section class="row items-center q-pb-none noinvito-header">
|
||||
<q-icon
|
||||
name="info"
|
||||
size="32px"
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<div class="text-h6">Come entrare in RISO</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="noinvito-content">
|
||||
<!-- Spiegazione principale -->
|
||||
<div class="info-box primary-info">
|
||||
<q-icon
|
||||
name="how_to_reg"
|
||||
size="24px"
|
||||
color="primary"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-weight-medium q-mb-sm">Per accedere a RISO hai bisogno di un invito</p>
|
||||
<p class="text-body2">
|
||||
L'invito può essere di due tipi:
|
||||
</p>
|
||||
<ul class="invitation-types">
|
||||
<li>
|
||||
<strong>Username dell'invitante:</strong> inserisci lo username di chi ti ha parlato di RISO
|
||||
</li>
|
||||
<li>
|
||||
<strong>Link di registrazione:</strong> usa il link personale che ti è stato inviato via email o messaggio
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Box informativo secondario -->
|
||||
<div class="info-box secondary-info">
|
||||
<q-icon
|
||||
name="groups"
|
||||
size="24px"
|
||||
color="secondary"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-weight-medium q-mb-sm">Non conosci nessuno di RISO?</p>
|
||||
<p class="text-body2">
|
||||
Nessun problema! Puoi unirti alla comunità attraverso i nostri gruppi territoriali su Telegram
|
||||
oppure contattarci direttamente via email. Saremo felici di darti il benvenuto! 🌱
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<!-- Footer con bottoni azione -->
|
||||
<q-card-actions class="noinvito-actions">
|
||||
<q-btn
|
||||
unelevated
|
||||
color="primary"
|
||||
icon="telegram"
|
||||
label="Gruppi Telegram Territoriali"
|
||||
:href="tools.getLinkGruppiTerritorialiTelegram() ? tools.getLinkGruppiTerritorialiTelegram() : ''"
|
||||
target="_blank"
|
||||
class="action-btn full-width q-mb-sm"
|
||||
no-caps
|
||||
/>
|
||||
<q-btn
|
||||
outline
|
||||
color="primary"
|
||||
icon="email"
|
||||
label="Contattaci via Email"
|
||||
:href="'mailto:' + (tools.getEmailSupport() || '')"
|
||||
class="action-btn full-width"
|
||||
no-caps
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user