From 936d41c2f199e766d07d2e34a750b1fbad09135a Mon Sep 17 00:00:00 2001 From: Anatolii Grynchuk Date: Sat, 2 May 2026 02:51:58 +0300 Subject: [PATCH] feat: improved admin UI styles and layout - Max-width 860px on editor card - Two-column row for ServiceName/Key/Language fields - Gradient card header, proper shadow, grey footer - Footer buttons right-aligned - Smaller uppercase table headers, better typography - Overhauled admin.css with CSS variables and cleaner rules Ref: IT-628 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../Views/AdminTemplates/Edit.cshtml | 40 ++--- .../Views/Shared/_EditorLayout.cshtml | 23 ++- .../wwwroot/css/admin.css | 140 ++++++++++-------- 3 files changed, 107 insertions(+), 96 deletions(-) diff --git a/HrynCo.NotificationService.Web/Views/AdminTemplates/Edit.cshtml b/HrynCo.NotificationService.Web/Views/AdminTemplates/Edit.cshtml index 5344878..dc24870 100644 --- a/HrynCo.NotificationService.Web/Views/AdminTemplates/Edit.cshtml +++ b/HrynCo.NotificationService.Web/Views/AdminTemplates/Edit.cshtml @@ -21,42 +21,42 @@ } -
- - - +
+
+ + + +
+
+ + + +
+
+ + + +
-
- - - -
- -
- - - -
- -
+
-
+
-
+
-
+
diff --git a/HrynCo.NotificationService.Web/Views/Shared/_EditorLayout.cshtml b/HrynCo.NotificationService.Web/Views/Shared/_EditorLayout.cshtml index 442cf97..788af8d 100644 --- a/HrynCo.NotificationService.Web/Views/Shared/_EditorLayout.cshtml +++ b/HrynCo.NotificationService.Web/Views/Shared/_EditorLayout.cshtml @@ -1,17 +1,16 @@ @{ Layout = "~/Views/Shared/_Layout.cshtml"; } -
-
-
- - @ViewData["EditorTitle"] -
-
-
- @RenderBody() -
-
- @RenderSection("FormActions", required: false) +
+
+
+ @ViewData["EditorTitle"] +
+
+ @RenderBody() +
+
+ @RenderSection("FormActions", required: false) +
diff --git a/HrynCo.NotificationService.Web/wwwroot/css/admin.css b/HrynCo.NotificationService.Web/wwwroot/css/admin.css index f54a79b..46cf428 100644 --- a/HrynCo.NotificationService.Web/wwwroot/css/admin.css +++ b/HrynCo.NotificationService.Web/wwwroot/css/admin.css @@ -4,34 +4,37 @@ :root { --sidebar-bg: #1a1d23; - --sidebar-width: 220px; --sidebar-active: #0d6efd; - --sidebar-muted: #6c757d; - --navbar-border: rgba(255, 255, 255, 0.08); + --sidebar-muted: #8a929e; + --content-bg: #f0f2f5; + --card-shadow: 0 2px 8px rgba(0,0,0,.10), 0 0 1px rgba(0,0,0,.08); } /* ── Body ─────────────────────────────────────────────── */ body { - background-color: #f0f2f5; + background-color: var(--content-bg); + font-size: .9rem; } /* ── Navbar ───────────────────────────────────────────── */ .admin-navbar { - border-bottom: 1px solid var(--navbar-border); - box-shadow: 0 1px 4px rgba(0, 0, 0, .35); + border-bottom: 1px solid rgba(255,255,255,.07); + box-shadow: 0 2px 6px rgba(0,0,0,.4); + height: 52px; } .admin-navbar .navbar-brand { - font-size: 1rem; + font-size: .95rem; + font-weight: 700; letter-spacing: .02em; } /* ── Sidebar ──────────────────────────────────────────── */ .sidebar { - min-height: calc(100vh - 56px); + min-height: calc(100vh - 52px); background-color: var(--sidebar-bg); - padding-top: 1.25rem; - border-right: 1px solid rgba(255, 255, 255, 0.05); + border-right: 1px solid rgba(255,255,255,.05); + padding: 1.25rem 0 1rem; } .sidebar-section-label { @@ -40,45 +43,39 @@ body { letter-spacing: .12em; text-transform: uppercase; color: var(--sidebar-muted); - padding: .5rem 1rem .25rem; - margin-bottom: .1rem; + padding: .25rem 1.25rem .5rem; } .sidebar .nav-link { color: #adb5bd; - border-radius: .375rem; - margin-bottom: .2rem; - padding: .5rem .75rem; - font-size: .875rem; + border-radius: 0 .375rem .375rem 0; + margin: .1rem .75rem .1rem 0; + padding: .5rem 1rem; + font-size: .85rem; display: flex; align-items: center; - gap: .5rem; + gap: .6rem; border-left: 3px solid transparent; - transition: background-color .15s ease, color .15s ease, border-color .15s ease; + transition: background .15s, color .15s, border-color .15s; } .sidebar .nav-link:hover { color: #fff; - background-color: rgba(255, 255, 255, 0.07); - border-left-color: rgba(255, 255, 255, 0.2); + background-color: rgba(255,255,255,.06); + border-left-color: rgba(255,255,255,.2); } .sidebar .nav-link.active { color: #fff; - background-color: rgba(13, 110, 253, 0.18); + background-color: rgba(13,110,253,.2); border-left-color: var(--sidebar-active); font-weight: 600; } -.sidebar .nav-link .bi { - font-size: 1rem; - flex-shrink: 0; -} +.sidebar .nav-link .bi { font-size: .95rem; flex-shrink: 0; } /* ── Main content ─────────────────────────────────────── */ -.main-content { - padding: 1.5rem 2rem; -} +.main-content { padding: 1.75rem 2rem; } /* ── Page header ──────────────────────────────────────── */ .page-header { @@ -87,76 +84,79 @@ body { align-items: center; padding-bottom: .875rem; margin-bottom: 1.5rem; - border-bottom: 2px solid #dee2e6; + border-bottom: 1px solid #dee2e6; } .page-header h2 { margin: 0; - font-size: 1.4rem; + font-size: 1.25rem; font-weight: 700; color: #212529; display: flex; align-items: center; - gap: .5rem; + gap: .45rem; } -/* ── Table ────────────────────────────────────────────── */ +/* ── Table card ───────────────────────────────────────── */ .table-card { + border: none; border-radius: .5rem; + box-shadow: var(--card-shadow); overflow: hidden; - box-shadow: 0 1px 3px rgba(0, 0, 0, .08); } -.table tbody tr td { - vertical-align: middle; -} +.table { font-size: .875rem; } +.table tbody tr td { vertical-align: middle; } +.table thead th { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } /* ── Empty state ──────────────────────────────────────── */ .empty-state { text-align: center; - padding: 3rem 2rem; + padding: 3.5rem 2rem; color: var(--sidebar-muted); } +.empty-state .bi { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: .75rem; } +.empty-state p { font-size: .9rem; margin-bottom: 0; } -.empty-state .bi { - font-size: 3rem; - opacity: .4; - display: block; - margin-bottom: 1rem; -} - -.empty-state p { - font-size: .95rem; - margin-bottom: 0; +/* ── Editor wrapper — constrains width ───────────────── */ +.editor-wrapper { + max-width: 860px; } /* ── Editor card ──────────────────────────────────────── */ -.editor-card-header { +.editor-card { + border: none; + border-radius: .5rem; + box-shadow: var(--card-shadow); +} + +.editor-card-header-bar { + background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); + color: #fff; + font-size: .9rem; + font-weight: 600; + padding: .75rem 1.25rem; + border-bottom: none; display: flex; align-items: center; - gap: .5rem; + border-radius: .5rem .5rem 0 0 !important; } -.editor-card-header .bi { - font-size: 1.1rem; - opacity: .85; -} +.editor-card-body { padding: 1.5rem 1.5rem 1rem; } -/* ── Form fields ──────────────────────────────────────── */ -.form-control[readonly] { +.editor-card-footer { background-color: #f8f9fa; - border-color: #dee2e6; - color: #6c757d; - cursor: not-allowed; + border-top: 1px solid #e9ecef; + padding: .875rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: .5rem; + border-radius: 0 0 .5rem .5rem !important; } -textarea.form-control { - resize: vertical; -} - -/* ── Section divider inside editor card ──────────────── */ +/* ── Form-section divider ─────────────────────────────── */ .form-section-title { - font-size: .7rem; + font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; @@ -165,3 +165,15 @@ textarea.form-control { margin-bottom: 1rem; border-bottom: 1px solid #dee2e6; } + +/* ── Form fields ──────────────────────────────────────── */ +.form-label { font-size: .82rem; margin-bottom: .3rem; } + +.form-control[readonly] { + background-color: #f4f5f7; + border-color: #e2e5e9; + color: #6c757d; + cursor: not-allowed; +} + +textarea.form-control { resize: vertical; }