Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Melissa drawers: footer colado no bottom (pattern AppMenu)

Browse Source 
Refator do mobile drawer em todas as Melissa Pages com sidebar:
scroll move pra dentro de .xx-side__scroll (flex: 1 + min-height: 0)
e o __footer vira flex-shrink: 0 last child de flex column. Espelha
o pattern do AppMenu/layout-sidebar Rail. Substitui o sticky/margin:auto
que falhava quando o conteudo era pequeno (deixava espaco vazio sob
o "Limpar filtros").

Pages: Compromissos, Conversas, Documentos, FinanceiroLancamentos,
Grupos, Medicos, Notificacoes, Pacientes, Recorrencias, Relatorios, Tags.

Pacientes (caso especial): mp-quick fixo no topo (max-height: 50%)
+ mp-side flex: 1 com scroll/footer interno.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 11:30:52 -03:00
parent 48bf2726a5
commit 02af119dc6
11 changed files with 328 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaPacientes.vue
+31 -29
View File
@@ -2910,49 +2910,41 @@ function sessaoStatusColor(s) {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--m-text);
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
}
.mp-mobile-drawer.is-open {
transform: translateX(0);
}
.mp-mobile-drawer__scroll {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: 12px 12px 24px;
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mp-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mp-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
/* Asides perdem padding/scroll/borda próprios quando teleportados.
.mp-side__scroll também perde scroll/padding (drawer já tem) e o
.mp-side__footer vira sticky no bottom do drawer pra manter o
"Limpar filtros" sempre acessível. */
/* Pattern espelha AppMenu/layout-sidebar: drawer = flex column, host
pass-through (overflow hidden), .mp-side é flex column com scroll
interno e __footer flex-shrink: 0 pinado no bottom.
.mp-quick fica fixo no topo (flex-shrink: 0). */
.mp-mobile-drawer__scroll .mp-quick {
width: 100%;
flex-shrink: 0;
height: auto;
overflow: visible;
overflow-y: auto;
overflow-x: hidden;
border-right: none;
border-left: none;
background: transparent;
padding: 0;
padding: 12px;
max-height: 50%;
}
/* .mp-side ganha flex: 1 pra ocupar altura disponível, com flex column
interno — assim o footer sticky é empurrado pro fim do drawer pelo
margin: auto, mesmo quando há pouco conteúdo. */
.mp-mobile-drawer__scroll .mp-side {
width: 100%;
flex: 1;
min-height: 0;
overflow: visible;
overflow: hidden;
border-right: none;
border-left: none;
background: transparent;
@@ -2961,20 +2953,30 @@ function sessaoStatusColor(s) {
flex-direction: column;
}
.mp-mobile-drawer__scroll .mp-side__scroll {
flex: none;
flex: 1;
min-height: 0;
overflow: visible;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mp-mobile-drawer__scroll .mp-side__scroll::-webkit-scrollbar { width: 5px; }
.mp-mobile-drawer__scroll .mp-side__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mp-mobile-drawer__scroll .mp-side__footer {
position: sticky;
bottom: 0;
margin: auto -12px -24px; /* margin-top: auto empurra o footer pro bottom + margin lateral compensa o padding do drawer */
flex-shrink: 0;
margin: 0;
padding: 12px;
background: var(--m-bg-medium);
border-top: 1px solid var(--m-border);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
z-index: 5;
}
/* Reordena dentro do drawer: Visão geral (.mp-quick) vem PRIMEIRO,