Zaki/Password-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add 3 new views (Card, Grouped, Detail) and view dropdown

Browse Source 
Replace view toggle buttons with dropdown menu containing all 7 views. Card view: 2-column grid with bigger cards. Grouped view: entries grouped by folder with sticky headers. Detail view: single entry at a time, large text, prev/next navigation. Arrow key navigation for detail view.
This commit is contained in:
Zaki
2026-05-09 16:51:38 +01:00
parent 757efe0908
commit d50aea6845
3 changed files with 165 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+35 -4
View File
@@ -64,10 +64,11 @@ input:focus, select:focus { border-color:var(--accent); }
/* Toolbar */
.toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.7rem; }
.view-toggle { display:flex; gap:0.2rem; background:rgba(0,0,0,0.3); padding:0.2rem; border-radius:2rem; }
.view-btn { background:none; border:none; color:var(--text2); padding:0.35rem 0.7rem; border-radius:2rem; cursor:pointer; font-size:0.75rem; transition:0.2s; }
.view-btn.active { background:var(--accent); color:#fff; }
.view-btn:hover:not(.active) { background:rgba(255,255,255,0.08); }
.view-dropdown { position:relative; }
.view-dropdown-menu { position:absolute; top:100%; right:0; margin-top:4px; min-width:155px; background:var(--bg2); border:1px solid var(--border); border-radius:0.6rem; padding:0.3rem; box-shadow:0 8px 24px rgba(0,0,0,0.3); z-index:100; display:flex; flex-direction:column; gap:2px; }
.view-opt { background:none; border:none; color:var(--text); padding:0.45rem 0.8rem; border-radius:0.4rem; cursor:pointer; font-size:0.8rem; text-align:left; transition:0.12s; white-space:nowrap; }
.view-opt:hover { background:var(--accent); color:#fff; }
.view-opt.active { background:var(--accent); color:#fff; font-weight:600; }
.toggles-row { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
.toggle-item { display:flex; align-items:center; gap:0.4rem; font-size:0.75rem; color:var(--text2); }
@@ -150,6 +151,10 @@ input:focus, select:focus { border-color:var(--accent); }
.card-user { color:var(--text2); font-size:0.75rem; margin-bottom:0.3rem; }
.card-folder { font-size:0.65rem; color:var(--accent); margin-bottom:0.3rem; background:rgba(59,130,246,0.15); display:inline-block; padding:0.1rem 0.5rem; border-radius:1rem; }
.card-password { background:var(--bg2); padding:0.3rem 0.5rem; border-radius:0.6rem; display:flex; align-items:center; justify-content:space-between; font-family:monospace; font-size:0.75rem; gap:0.2rem; }
#entriesContainer.card-view .entry-card { padding:1.2rem 3rem 1.2rem 1.2rem; }
#entriesContainer.card-view .card-site { font-size:1.05rem; }
#entriesContainer.card-view .card-password { font-size:0.9rem; }
#entriesContainer.card-view .entry-card:hover { transform:translateY(-3px); }
.entry-row { background:var(--card); border:1px solid var(--border); border-radius:0.8rem; padding:0.7rem 2.8rem 0.7rem 0.9rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.4rem; position:relative; }
.entry-compact { display:flex; align-items:center; gap:0.5rem; padding:0.35rem 2.8rem 0.35rem 0.7rem; background:var(--card); border-radius:0.5rem; border:1px solid var(--border); font-size:0.8rem; position:relative; }
.action-btns { position:absolute; top:4px; right:6px; display:flex; gap:4px; z-index:1; }
@@ -165,6 +170,32 @@ input:focus, select:focus { border-color:var(--accent); }
.entry-row.favorite { border-color:rgba(255,200,0,0.3); background:rgba(255,200,0,0.05); }
.entry-compact.favorite { border-color:rgba(255,200,0,0.3); background:rgba(255,200,0,0.05); }
.table-row-drag.favorite td { background:rgba(255,200,0,0.05); }
/* Grouped view */
#entriesContainer.grouped-view { display:flex; flex-direction:column; gap:0.15rem; }
.grouped-header { position:sticky; top:0; z-index:2; background:var(--bg); padding:0.55rem 0.8rem; border-radius:0.5rem; font-weight:600; font-size:0.9rem; color:var(--accent); display:flex; align-items:center; gap:0.5rem; border-bottom:2px solid var(--accent); margin-top:0.4rem; }
.grouped-header:first-child { margin-top:0; }
#entriesContainer.grouped-view .entry-row { border-left:3px solid transparent; transition:0.15s; padding-left:1rem; }
#entriesContainer.grouped-view .entry-row:hover { border-left-color:var(--accent); }
/* Detail view */
#entriesContainer.detail-view { display:flex; flex-direction:column; gap:1rem; }
.detail-nav { display:flex; align-items:center; justify-content:center; gap:1rem; padding:0.5rem 0; position:sticky; top:0; z-index:2; background:var(--bg); }
.detail-nav button { background:var(--bg2); border:1px solid var(--border); color:var(--text); padding:0.4rem 1rem; border-radius:0.5rem; cursor:pointer; transition:0.15s; font-size:0.85rem; }
.detail-nav button:hover { border-color:var(--accent); color:var(--accent); }
.detail-nav button:disabled { opacity:0.4; cursor:default; }
.detail-nav .detail-counter { font-size:0.8rem; color:var(--text2); min-width:80px; text-align:center; }
.detail-card { background:var(--bg2); border:1px solid var(--border); border-radius:1rem; padding:1.5rem; display:flex; flex-direction:column; gap:0.9rem; max-width:520px; margin:0 auto; width:100%; }
.detail-field { display:flex; flex-direction:column; gap:0.15rem; }
.detail-label { font-size:0.7rem; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; }
.detail-value { font-size:1.2rem; word-break:break-all; }
.detail-value.pw-display { font-family:monospace; letter-spacing:2px; font-size:1.3rem; cursor:default; }
.detail-folder { display:flex; gap:0.5rem; align-items:center; }
.detail-actions { display:flex; gap:0.5rem; margin-top:0.3rem; }
.detail-actions button { flex:1; padding:0.5rem; border-radius:0.5rem; border:1px solid var(--border); background:var(--bg); cursor:pointer; transition:0.15s; font-size:0.85rem; }
.detail-actions button:hover { border-color:var(--accent); background:var(--bg2); }
.entry-info { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; flex:1; }
.entry-site { font-weight:700; color:var(--text); }
.entry-user { color:var(--text2); }