soroushdes/hamkadr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Admin] Redesign Settings as sidebar tabs + style password/toggle fields
CI/CD / CI · dotnet build (push) Successful in 35s
Details
CI/CD / Deploy · hamkadr (push) Successful in 59s
Details

Browse Source 
Split the long settings page into 7 sidebar tabs (publish+AI, sources, channels, SMS, push, map, demo) with a single form so one Save persists everything; seed/clear/test are submit buttons targeting their handlers via asp-page-handler. Boolean settings now render as clean .toggle-row cards. CSS fix: the form input rule omitted input[type=password] (and url/email/search), so API-key/VAPID/token fields were unstyled — added them, plus accent-color + sizing for checkboxes/radios. Active tab persists across handler posts via sessionStorage; layout collapses to a horizontal tab strip on mobile.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-04 18:25:06 +03:30
parent 213faadf55
commit cde6b68a39
2 changed files with 254 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/JobsMedical.Web/wwwroot/css/site.css
+42 -1
View File
@@ -143,10 +143,13 @@ button, input, select, textarea, optgroup { font-family: inherit; }
.search-card label { font-size: 12px; font-weight: 700; color: var(--muted); }
/* ---------- Forms ---------- */
select, input[type="text"], input[type="tel"], input[type="number"], textarea {
select, textarea,
input[type="text"], input[type="tel"], input[type="number"], input[type="password"],
input[type="email"], input[type="url"], input[type="search"] {
width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
font-family: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 17px; height: 17px; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--primary); }
label { font-size: 13px; }
@@ -253,6 +256,44 @@ label { font-size: 13px; }
.tour-count { font-size: 12px; color: var(--muted); }
.tour-btns { display: flex; gap: 6px; }
/* ---------- Admin settings: sidebar tabs ---------- */
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.settings-tabs {
position: sticky; top: 80px; display: flex; flex-direction: column; gap: 4px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 8px;
}
.settings-tabs button {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
padding: 11px 12px; border: none; background: transparent; border-radius: 10px;
font-family: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.settings-tabs button:hover { background: var(--primary-soft); color: var(--primary-dark); }
.settings-tabs button.active { background: var(--primary); color: #fff; }
.settings-tabs .tab-ico { font-size: 16px; }
.settings-panel { display: none; }
.settings-panel.active { display: block; animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.settings-panel h3:first-child { margin-top: 0; }
/* Toggle rows — give each boolean field a clean, card-like row. */
.toggle-row {
display: flex; align-items: flex-start; gap: 10px; font-weight: 700;
padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
cursor: pointer; margin-bottom: 4px;
}
.toggle-row input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; }
.toggle-row .t-body { display: flex; flex-direction: column; gap: 3px; }
.toggle-row .t-hint { font-size: 12px; font-weight: 500; color: var(--muted); }
.settings-save { position: sticky; bottom: 0; padding-top: 12px; background: linear-gradient(transparent, var(--bg) 40%); }
@media (max-width: 760px) {
.settings-layout { grid-template-columns: 1fr; }
.settings-tabs { position: static; flex-direction: row; overflow-x: auto; }
.settings-tabs button { white-space: nowrap; }
}
/* Legal/policy pages (privacy, rules, terms) — comfortable long-form reading. */
.legal { line-height: 2; }
.legal h2 { font-size: 17px; margin: 22px 0 8px; color: var(--primary-dark); }