earthjasonlin/mailova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): redesign dashboard as global overview with stats, progress bar, recent activity

Browse Source
This commit is contained in:
Zichao Lin
2026-07-05 22:32:16 +08:00
parent a57cba22d5
commit a4714db073
3 changed files with 179 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/static/style.css
View File

@@ -142,6 +142,43 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab:hover { color: var(--primary); }
/* Dashboard */
.dash-stats { display: flex; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.dash-stat-card { display: flex; align-items: center; gap: .75rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; flex: 1; min-width: 140px; }
.dash-stat-icon { font-size: 1.5rem; }
.dash-stat-body { display: flex; flex-direction: column; }
.dash-stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.dash-stat-label { font-size: .75rem; color: var(--text-muted); }
.dash-sent { color: var(--sent); }
.dash-delivered { color: var(--delivered); }
.dash-received { color: var(--received); }
.dash-progress { margin-bottom: 2rem; }
.progress-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border); }
.progress-seg { height: 100%; }
.progress-sent { background: var(--sent); }
.progress-delivered { background: var(--delivered); }
.progress-received { background: var(--received); }
.progress-legend { display: flex; gap: 1.25rem; margin-top: .5rem; font-size: .8rem; color: var(--text-muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .25rem; vertical-align: middle; }
.dot-sent { background: var(--sent); }
.dot-delivered { background: var(--delivered); }
.dot-received { background: var(--received); }
.dash-sections { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; }
.dash-section h2 { font-size: 1rem; margin-bottom: .75rem; }
.recent-list { display: flex; flex-direction: column; gap: .4rem; }
.recent-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); text-decoration: none; color: var(--text); transition: box-shadow .15s; }
.recent-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); text-decoration: none; }
.recent-img { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.recent-img img { width: 100%; height: 100%; object-fit: cover; }
.recent-info { display: flex; align-items: center; gap: .5rem; }
.recent-meta { margin-left: auto; display: flex; gap: .5rem; font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.dash-profiles { display: flex; flex-direction: column; gap: .3rem; }
.dash-profile-link { display: flex; align-items: center; justify-content: space-between; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); text-decoration: none; color: var(--text); transition: box-shadow .15s; }
.dash-profile-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); text-decoration: none; }
.dash-profile-name { font-weight: 500; }
.dash-profile-arrow { color: var(--text-muted); }
.dash-profile-more { color: var(--primary); border-style: dashed; }
/* Profile cards */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.profile-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; transition: box-shadow .15s; }