feat: layout mobile, abas múltiplas e categorias em árvore
- Responsivo ≤760px: sidebar vira gaveta com backdrop, painel de versões em tela cheia, toolbar/menu rolam sem rótulos, alvos de toque, dvh + safe-area, fonte do editor ≥16px (anti-zoom iOS) - Abas: várias notas abertas com estado sujo por aba, ✕ com confirmação, clique do meio, Alt+W / Alt+←/→ / Alt+1..9; abas e rascunhos sobrevivem à sessão via localStorage - Categorias: modelo vira árvore (categories.json) com notas em múltiplas categorias; explorador no sidebar com expandir/renomear/mover/excluir (sem ciclos, GC de vínculos) e seletor multi-marca no editor; filtro por pasta recursivo por padrão; migração automática do campo único legado - API: POST/PUT/DELETE /api/categories; notas aceitam categories: [ids] - Testes: store (árvore, ciclo, migração, GC) e api (CRUD de categorias)
This commit is contained in:
lgcosta committed
1 parent
9bc5de4c56
commit
7e89207b70
10 files changed
+1737
-489
No files matched your search
+216
-16
@@ -62,7 +62,7 @@ body {
|
||||
.muted { color: var(--muted); font-size: 12px; }
|
||||
code { font-family: var(--mono); font-size: 0.92em; }
|
||||
|
||||
#app { display: flex; flex-direction: column; height: 100vh; }
|
||||
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
|
||||
|
||||
/* ------------------------------------------------------------------ menus */
|
||||
#menubar {
|
||||
@@ -209,7 +209,7 @@ body.sidebar-off #sidebar { display: none; }
|
||||
color: var(--muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
#sidebar input[type="search"], #sidebar select {
|
||||
#sidebar input[type="search"] {
|
||||
width: 100%;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
@@ -270,16 +270,7 @@ body.sidebar-off #sidebar { display: none; }
|
||||
background: var(--panel-2);
|
||||
color: var(--fg);
|
||||
}
|
||||
#note-title:focus, .meta-cat:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
.meta-cat {
|
||||
flex: 0 0 220px;
|
||||
font-size: 13px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 3px;
|
||||
padding: 4px 8px;
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
}
|
||||
#note-title:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
|
||||
#editor-host { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }
|
||||
|
||||
@@ -545,10 +536,212 @@ body.no-gutter #gutter { display: none; }
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
/* responsivo simples -----------------------------------------------------*/
|
||||
@media (max-width: 940px) {
|
||||
#sidebar { position: absolute; left: 0; top: 68px; bottom: 26px; z-index: 30; box-shadow: 4px 0 14px rgba(0,0,0,.12); }
|
||||
#versions-panel { position: absolute; right: 0; top: 68px; bottom: 26px; z-index: 30; box-shadow: -4px 0 14px rgba(0,0,0,.12); }
|
||||
/* ------------------------------------------------------------- abas */
|
||||
#tabbar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: var(--panel-2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex: none;
|
||||
min-height: 32px;
|
||||
}
|
||||
#tabs { display: flex; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
|
||||
#tabs::-webkit-scrollbar { display: none; }
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: 0;
|
||||
border-right: 1px solid var(--border-soft);
|
||||
background: var(--panel-2);
|
||||
font: inherit;
|
||||
font-size: 12.5px;
|
||||
color: var(--muted);
|
||||
padding: 6px 8px 6px 12px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
max-width: 240px;
|
||||
}
|
||||
.tab.active {
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
font-weight: 600;
|
||||
box-shadow: inset 0 2px 0 var(--accent);
|
||||
}
|
||||
.tab.dirty .tab-label::after { content: ' ●'; color: var(--warn); }
|
||||
.tab-label { overflow: hidden; text-overflow: ellipsis; }
|
||||
.tab-close {
|
||||
flex: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.tab-close:hover { background: var(--danger); color: #fff; }
|
||||
.tab-new { margin: 3px 4px; }
|
||||
|
||||
/* ------------------------------------------------- árvore de categorias */
|
||||
#cat-tree { max-height: 240px; overflow-y: auto; }
|
||||
.tree-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: var(--fg);
|
||||
}
|
||||
.tree-row:hover { background: #e9e6e2; }
|
||||
.tree-row.active { background: #cfe2fa; box-shadow: inset 3px 0 0 var(--accent); }
|
||||
.tree-caret {
|
||||
border: 0;
|
||||
background: none;
|
||||
width: 14px;
|
||||
padding: 0;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
}
|
||||
.tree-icon { flex: none; }
|
||||
.tree-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.tree-count {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 8px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.tree-menu {
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
visibility: hidden;
|
||||
}
|
||||
.tree-row:hover .tree-menu, .tree-row.active .tree-menu { visibility: visible; }
|
||||
.tree-menu:hover { background: #dcd7d2; color: var(--fg); }
|
||||
|
||||
/* ------------------------------------------------- popover de categorias */
|
||||
#note-meta { position: relative; }
|
||||
#btn-cats {
|
||||
flex: none;
|
||||
max-width: 240px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cat-picker {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 8px;
|
||||
z-index: 45;
|
||||
width: min(300px, 90vw);
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0 0 5px 5px;
|
||||
box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
|
||||
padding: 6px;
|
||||
}
|
||||
.picker-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.picker-row:hover { background: var(--panel-2); }
|
||||
.picker-empty { padding: 8px; font-size: 12px; }
|
||||
|
||||
/* ------------------------------------------------- menu de contexto */
|
||||
.ctx-menu {
|
||||
position: fixed;
|
||||
z-index: 70;
|
||||
min-width: 180px;
|
||||
margin: 0;
|
||||
padding: 4px 0;
|
||||
list-style: none;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
|
||||
}
|
||||
.ctx-menu li { padding: 7px 14px; font-size: 13px; cursor: pointer; }
|
||||
.ctx-menu li:hover { background: var(--accent); color: #fff; }
|
||||
.ctx-danger { color: var(--danger); }
|
||||
.ctx-danger:hover { color: #fff; }
|
||||
|
||||
/* ------------------------------------------------- backdrop */
|
||||
#backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .4); }
|
||||
|
||||
.btn, .menu-btn, .tab, .tag-chip, .tree-row, .seg { touch-action: manipulation; }
|
||||
|
||||
/* ------------------------------------------------- responsivo (celular) */
|
||||
@media (max-width: 760px) {
|
||||
#menubar { padding: 0 2px; overflow-x: auto; scrollbar-width: none; }
|
||||
#menubar::-webkit-scrollbar { display: none; }
|
||||
.menu-btn { padding: 0 9px; }
|
||||
.menu-dropdown li { padding: 9px 14px; }
|
||||
|
||||
#toolbar { overflow-x: auto; scrollbar-width: none; padding: 0 6px; }
|
||||
#toolbar::-webkit-scrollbar { display: none; }
|
||||
.tb-label, .tb-caption { display: none; }
|
||||
.btn-icon { padding: 6px 9px; min-height: 32px; }
|
||||
.segmented .seg { padding: 7px 12px; }
|
||||
|
||||
/* sidebar vira gaveta */
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: min(320px, 86vw);
|
||||
z-index: 60;
|
||||
transform: translateX(-105%);
|
||||
transition: transform .18s ease;
|
||||
box-shadow: 6px 0 20px rgba(0, 0, 0, .25);
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
body.sidebar-off #sidebar { display: flex; } /* F9 é atalho de desktop */
|
||||
body.sidebar-open #sidebar { transform: none; }
|
||||
|
||||
/* painel de versões ocupa a tela toda */
|
||||
#versions-panel {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: auto;
|
||||
z-index: 60;
|
||||
box-shadow: none;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
#statusbar {
|
||||
height: 32px;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
font-size: 11.5px;
|
||||
}
|
||||
#st-stats, #st-format { display: none; }
|
||||
.st-item { padding: 0 8px; }
|
||||
|
||||
#note-meta { flex-wrap: wrap; }
|
||||
#note-title { flex: 1 1 100%; }
|
||||
|
||||
.tab { padding: 9px 10px; }
|
||||
|
||||
/* 16px evita zoom automático do iOS ao focar o textarea */
|
||||
#editor, #hl, .ln { font-size: max(var(--editor-size), 16px); }
|
||||
}
|
||||
@media (min-width: 761px) {
|
||||
body.sidebar-open #sidebar { display: flex; } /* classe mobile não vaza no desktop */
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------- temas / esquemas */
|
||||
@@ -702,3 +895,10 @@ html[data-theme="solar-escuro"] #revisions-list li:hover { background: #0c4450;
|
||||
color: var(--fg);
|
||||
}
|
||||
.dialog .num { width: 74px; flex: none; }
|
||||
|
||||
/* diálogos no celular (depois das regras base de .dialog) */
|
||||
@media (max-width: 760px) {
|
||||
.dialog .row { font-size: 15px; }
|
||||
.dialog input { font-size: 16px; }
|
||||
.tree-menu { visibility: visible; } /* toque não tem hover */
|
||||
}
|
||||
Reference in new issue
Block a user