MelissaPerfil: scroll mobile + ancoras nos badges + email placeholder + 50/50 desktop
1. Mobile scroll fix: .mpr-main ganha min-height: 0 (faltava pra permitir shrink dentro do flex column do .mpr-body em mobile, sem isso o overflow-y: auto nao engatava). 2. Badges e dicas viraram <button> com @click que rola pra sessao correspondente do form (Identidade / Avatar / Bio / Contato / Redes). Em mobile o drawer fecha antes do scroll (exceto Avatar, que vive na propria sidebar). Cada card .mpr-w ganhou id pra ancora (mpr-sec-*). 3. Email readonly recebe placeholder=" " (espaco) — sem ele o FloatLabel variant=on ficava em cima do email enquanto o user nao tinha foco, pq :placeholder-shown nao aplica. 4. Desktop (>=1024px): .mpr-main vira grid 2 colunas (50/50). Os 4 cards (Identidade, Contato, Bio, Redes) ficam lado a lado em pares. Internal .mpr-grid colapsa pra 1 col nesse modo, e .mpr-field--half passa a span 1/-1 — evita ficar cramped em metade da largura. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
@@ -15,7 +15,7 @@
|
||||
* Logica de load/save espelhada do ProfilePage.vue (mesmas tabelas
|
||||
* profiles + user_settings + auth.user_metadata, mesmo bucket avatars).
|
||||
*/
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useConfirm } from 'primevue/useconfirm';
|
||||
import { useRouter } from 'vue-router';
|
||||
@@ -402,6 +402,34 @@ async function saveAll() {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Ancoras: badge/dica leva pra sessao do form ────────────
|
||||
const SECTION_BY_FIELD = {
|
||||
full_name: 'identidade',
|
||||
nickname: 'identidade',
|
||||
work_description: 'identidade',
|
||||
name: 'identidade',
|
||||
nick: 'identidade',
|
||||
work: 'identidade',
|
||||
avatar: 'avatar',
|
||||
photo: 'avatar',
|
||||
bio: 'bio',
|
||||
phone: 'contato',
|
||||
social: 'redes'
|
||||
};
|
||||
|
||||
function scrollToSection(field) {
|
||||
const sec = SECTION_BY_FIELD[field];
|
||||
if (!sec) return;
|
||||
// Avatar fica na sidebar; em mobile mantem o drawer aberto (e nao scrolla
|
||||
// o main, pq a sessao nao existe no main).
|
||||
const isAvatar = sec === 'avatar';
|
||||
if (isMobile.value && !isAvatar) drawerOpen.value = false;
|
||||
nextTick(() => {
|
||||
const target = document.getElementById('mpr-sec-' + sec);
|
||||
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
});
|
||||
}
|
||||
|
||||
// ── Sair da conta ──────────────────────────────────────────
|
||||
function confirmSignOut() {
|
||||
confirm.require({
|
||||
@@ -557,34 +585,38 @@ onBeforeUnmount(() => {
|
||||
<!-- Badges -->
|
||||
<div class="mpr-badges-head">Conquistas</div>
|
||||
<div class="mpr-badges">
|
||||
<div
|
||||
<button
|
||||
v-for="badge in badges"
|
||||
:key="badge.key"
|
||||
type="button"
|
||||
class="mpr-badge"
|
||||
:class="badge.earned ? 'is-earned' : 'is-locked'"
|
||||
v-tooltip.top="badge.earned ? badge.label : 'Bloqueado — ' + badge.label"
|
||||
@click="scrollToSection(badge.key)"
|
||||
>
|
||||
<span class="mpr-badge__icon">{{ badge.icon }}</span>
|
||||
<span class="mpr-badge__label">{{ badge.label }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dicas (campos faltando) -->
|
||||
<div v-if="progressSuggestions.length" class="mpr-tips">
|
||||
<div class="mpr-tips__head">O que falta</div>
|
||||
<span
|
||||
<button
|
||||
v-for="(tip, i) in progressSuggestions"
|
||||
:key="i"
|
||||
type="button"
|
||||
class="mpr-tip"
|
||||
@click="scrollToSection(tip.key)"
|
||||
>
|
||||
<i :class="tip.icon" />
|
||||
{{ tip.text }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Avatar -->
|
||||
<div class="mpr-w mpr-w--side">
|
||||
<div id="mpr-sec-avatar" class="mpr-w mpr-w--side">
|
||||
<div class="mpr-w__head">
|
||||
<span class="mpr-w__title">
|
||||
<i class="pi pi-image" /> Avatar
|
||||
@@ -642,7 +674,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<template v-else>
|
||||
<!-- ── Identidade ── -->
|
||||
<div class="mpr-w">
|
||||
<div id="mpr-sec-identidade" class="mpr-w">
|
||||
<div class="mpr-w__head">
|
||||
<span class="mpr-w__title">
|
||||
<i class="pi pi-id-card" /> Identidade
|
||||
@@ -712,7 +744,7 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<!-- ── Contato ── -->
|
||||
<div class="mpr-w">
|
||||
<div id="mpr-sec-contato" class="mpr-w">
|
||||
<div class="mpr-w__head">
|
||||
<span class="mpr-w__title">
|
||||
<i class="pi pi-phone" /> Contato
|
||||
@@ -740,6 +772,7 @@ onBeforeUnmount(() => {
|
||||
id="mpr_email"
|
||||
:value="userEmail"
|
||||
readonly
|
||||
placeholder=" "
|
||||
class="w-full"
|
||||
/>
|
||||
<label for="mpr_email">E-mail (login)</label>
|
||||
@@ -750,7 +783,7 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<!-- ── Bio ── -->
|
||||
<div class="mpr-w">
|
||||
<div id="mpr-sec-bio" class="mpr-w">
|
||||
<div class="mpr-w__head">
|
||||
<span class="mpr-w__title">
|
||||
<i class="pi pi-pencil" /> Bio
|
||||
@@ -770,7 +803,7 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<!-- ── Sites e Redes ── -->
|
||||
<div class="mpr-w">
|
||||
<div id="mpr-sec-redes" class="mpr-w">
|
||||
<div class="mpr-w__head">
|
||||
<span class="mpr-w__title">
|
||||
<i class="pi pi-share-alt" /> Sites e Redes
|
||||
@@ -1043,6 +1076,7 @@ onBeforeUnmount(() => {
|
||||
.mpr-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 16px;
|
||||
@@ -1058,6 +1092,23 @@ onBeforeUnmount(() => {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Desktop (>=1024px): cards em 2 colunas (50/50). Internal grid
|
||||
colapsa pra 1 col pra nao ficar cramped. */
|
||||
@media (min-width: 1024px) {
|
||||
.mpr-main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
align-content: start;
|
||||
}
|
||||
.mpr-main .mpr-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.mpr-main .mpr-field--half {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════ Card-base (mpr-w) ═══════ */
|
||||
.mpr-w {
|
||||
background: var(--m-bg-medium);
|
||||
@@ -1183,7 +1234,11 @@ onBeforeUnmount(() => {
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--m-border);
|
||||
font-size: 0.7rem;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: transform 120ms ease, background-color 120ms ease;
|
||||
}
|
||||
.mpr-badge:hover { transform: translateY(-1px); }
|
||||
.mpr-badge.is-earned {
|
||||
background: color-mix(in srgb, var(--p-primary-color) 14%, transparent);
|
||||
border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
|
||||
@@ -1222,6 +1277,15 @@ onBeforeUnmount(() => {
|
||||
border: 1px solid var(--m-border);
|
||||
color: var(--m-text-muted);
|
||||
font-size: 0.72rem;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
.mpr-tip:hover {
|
||||
background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
|
||||
border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
|
||||
color: var(--p-primary-color);
|
||||
}
|
||||
.mpr-tip > i { font-size: 0.7rem; color: var(--p-primary-color); }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user