hrynco/hrynco-notification-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improved admin UI styles and layout

Browse Source 
- 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>
This commit is contained in:
Anatolii Grynchuk
2026-05-02 02:51:58 +03:00
parent c90b07386d
commit 936d41c2f1
3 changed files with 107 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
HrynCo.NotificationService.Web/Views/AdminTemplates/Edit.cshtml
+20 -20
View File
@@ -21,42 +21,42 @@
</div> </div>
} }
<div class="mb-4"> <div class="row g-3 mb-3">
<label asp-for="ServiceName" class="form-label fw-semibold">Service Name</label> <div class="col-md-5">
<input asp-for="ServiceName" class="form-control" readonly="@(!Model.IsNew)" /> <label asp-for="ServiceName" class="form-label fw-semibold">Service Name</label>
<span asp-validation-for="ServiceName" class="text-danger small"></span> <input asp-for="ServiceName" class="form-control" readonly="@(!Model.IsNew)" />
<span asp-validation-for="ServiceName" class="text-danger small"></span>
</div>
<div class="col-md-5">
<label asp-for="Key" class="form-label fw-semibold">Key</label>
<input asp-for="Key" class="form-control" readonly="@(!Model.IsNew)" />
<span asp-validation-for="Key" class="text-danger small"></span>
</div>
<div class="col-md-2">
<label asp-for="LanguageCode" class="form-label fw-semibold">Language</label>
<input asp-for="LanguageCode" class="form-control" readonly="@(!Model.IsNew)" />
<span asp-validation-for="LanguageCode" class="text-danger small"></span>
</div>
</div> </div>
<div class="mb-4"> <div class="mb-3">
<label asp-for="Key" class="form-label fw-semibold">Key</label>
<input asp-for="Key" class="form-control" readonly="@(!Model.IsNew)" />
<span asp-validation-for="Key" class="text-danger small"></span>
</div>
<div class="mb-4">
<label asp-for="LanguageCode" class="form-label fw-semibold">Language Code</label>
<input asp-for="LanguageCode" class="form-control" readonly="@(!Model.IsNew)" />
<span asp-validation-for="LanguageCode" class="text-danger small"></span>
</div>
<div class="mb-4">
<label asp-for="Subject" class="form-label fw-semibold">Subject</label> <label asp-for="Subject" class="form-label fw-semibold">Subject</label>
<input asp-for="Subject" class="form-control" /> <input asp-for="Subject" class="form-control" />
<span asp-validation-for="Subject" class="text-danger small"></span> <span asp-validation-for="Subject" class="text-danger small"></span>
</div> </div>
<div class="mb-4"> <div class="mb-3">
<label asp-for="HtmlBody" class="form-label fw-semibold">HTML Body</label> <label asp-for="HtmlBody" class="form-label fw-semibold">HTML Body</label>
<textarea asp-for="HtmlBody" class="form-control font-monospace" rows="10"></textarea> <textarea asp-for="HtmlBody" class="form-control font-monospace" rows="10"></textarea>
<span asp-validation-for="HtmlBody" class="text-danger small"></span> <span asp-validation-for="HtmlBody" class="text-danger small"></span>
</div> </div>
<div class="mb-4"> <div class="mb-3">
<label asp-for="TextBody" class="form-label fw-semibold">Text Body</label> <label asp-for="TextBody" class="form-label fw-semibold">Text Body</label>
<textarea asp-for="TextBody" class="form-control font-monospace" rows="5"></textarea> <textarea asp-for="TextBody" class="form-control font-monospace" rows="5"></textarea>
</div> </div>
<div class="mb-4"> <div class="mb-3">
<label asp-for="VariablesJson" class="form-label fw-semibold">Variables (JSON)</label> <label asp-for="VariablesJson" class="form-label fw-semibold">Variables (JSON)</label>
<textarea asp-for="VariablesJson" class="form-control font-monospace" rows="4" <textarea asp-for="VariablesJson" class="form-control font-monospace" rows="4"
placeholder='[{"name":"UserName","required":true}]'></textarea> placeholder='[{"name":"UserName","required":true}]'></textarea>
HrynCo.NotificationService.Web/Views/Shared/_EditorLayout.cshtml
+11 -12
View File
@@ -1,17 +1,16 @@
@{ @{
Layout = "~/Views/Shared/_Layout.cshtml"; Layout = "~/Views/Shared/_Layout.cshtml";
} }
<div class="card shadow-sm"> <div class="editor-wrapper">
<div class="card-header bg-primary text-white"> <div class="card editor-card">
<h5 class="mb-0 editor-card-header"> <div class="card-header editor-card-header-bar">
<i class="bi bi-pencil-square"></i> <i class="bi bi-pencil-square me-2"></i>@ViewData["EditorTitle"]
@ViewData["EditorTitle"] </div>
</h5> <div class="card-body editor-card-body">
</div> @RenderBody()
<div class="card-body"> </div>
@RenderBody() <div class="card-footer editor-card-footer">
</div> @RenderSection("FormActions", required: false)
<div class="card-footer d-flex gap-2"> </div>
@RenderSection("FormActions", required: false)
</div> </div>
</div> </div>
HrynCo.NotificationService.Web/wwwroot/css/admin.css
+76 -64
View File
@@ -4,34 +4,37 @@
:root { :root {
--sidebar-bg: #1a1d23; --sidebar-bg: #1a1d23;
--sidebar-width: 220px;
--sidebar-active: #0d6efd; --sidebar-active: #0d6efd;
--sidebar-muted: #6c757d; --sidebar-muted: #8a929e;
--navbar-border: rgba(255, 255, 255, 0.08); --content-bg: #f0f2f5;
--card-shadow: 0 2px 8px rgba(0,0,0,.10), 0 0 1px rgba(0,0,0,.08);
} }
/* ── Body ─────────────────────────────────────────────── */ /* ── Body ─────────────────────────────────────────────── */
body { body {
background-color: #f0f2f5; background-color: var(--content-bg);
font-size: .9rem;
} }
/* ── Navbar ───────────────────────────────────────────── */ /* ── Navbar ───────────────────────────────────────────── */
.admin-navbar { .admin-navbar {
border-bottom: 1px solid var(--navbar-border); border-bottom: 1px solid rgba(255,255,255,.07);
box-shadow: 0 1px 4px rgba(0, 0, 0, .35); box-shadow: 0 2px 6px rgba(0,0,0,.4);
height: 52px;
} }
.admin-navbar .navbar-brand { .admin-navbar .navbar-brand {
font-size: 1rem; font-size: .95rem;
font-weight: 700;
letter-spacing: .02em; letter-spacing: .02em;
} }
/* ── Sidebar ──────────────────────────────────────────── */ /* ── Sidebar ──────────────────────────────────────────── */
.sidebar { .sidebar {
min-height: calc(100vh - 56px); min-height: calc(100vh - 52px);
background-color: var(--sidebar-bg); background-color: var(--sidebar-bg);
padding-top: 1.25rem; border-right: 1px solid rgba(255,255,255,.05);
border-right: 1px solid rgba(255, 255, 255, 0.05); padding: 1.25rem 0 1rem;
} }
.sidebar-section-label { .sidebar-section-label {
@@ -40,45 +43,39 @@ body {
letter-spacing: .12em; letter-spacing: .12em;
text-transform: uppercase; text-transform: uppercase;
color: var(--sidebar-muted); color: var(--sidebar-muted);
padding: .5rem 1rem .25rem; padding: .25rem 1.25rem .5rem;
margin-bottom: .1rem;
} }
.sidebar .nav-link { .sidebar .nav-link {
color: #adb5bd; color: #adb5bd;
border-radius: .375rem; border-radius: 0 .375rem .375rem 0;
margin-bottom: .2rem; margin: .1rem .75rem .1rem 0;
padding: .5rem .75rem; padding: .5rem 1rem;
font-size: .875rem; font-size: .85rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: .5rem; gap: .6rem;
border-left: 3px solid transparent; 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 { .sidebar .nav-link:hover {
color: #fff; color: #fff;
background-color: rgba(255, 255, 255, 0.07); background-color: rgba(255,255,255,.06);
border-left-color: rgba(255, 255, 255, 0.2); border-left-color: rgba(255,255,255,.2);
} }
.sidebar .nav-link.active { .sidebar .nav-link.active {
color: #fff; color: #fff;
background-color: rgba(13, 110, 253, 0.18); background-color: rgba(13,110,253,.2);
border-left-color: var(--sidebar-active); border-left-color: var(--sidebar-active);
font-weight: 600; font-weight: 600;
} }
.sidebar .nav-link .bi { .sidebar .nav-link .bi { font-size: .95rem; flex-shrink: 0; }
font-size: 1rem;
flex-shrink: 0;
}
/* ── Main content ─────────────────────────────────────── */ /* ── Main content ─────────────────────────────────────── */
.main-content { .main-content { padding: 1.75rem 2rem; }
padding: 1.5rem 2rem;
}
/* ── Page header ──────────────────────────────────────── */ /* ── Page header ──────────────────────────────────────── */
.page-header { .page-header {
@@ -87,76 +84,79 @@ body {
align-items: center; align-items: center;
padding-bottom: .875rem; padding-bottom: .875rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border-bottom: 2px solid #dee2e6; border-bottom: 1px solid #dee2e6;
} }
.page-header h2 { .page-header h2 {
margin: 0; margin: 0;
font-size: 1.4rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
color: #212529; color: #212529;
display: flex; display: flex;
align-items: center; align-items: center;
gap: .5rem; gap: .45rem;
} }
/* ── Table ────────────────────────────────────────────── */ /* ── Table card ───────────────────────────────────────── */
.table-card { .table-card {
border: none;
border-radius: .5rem; border-radius: .5rem;
box-shadow: var(--card-shadow);
overflow: hidden; overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
} }
.table tbody tr td { .table { font-size: .875rem; }
vertical-align: middle; .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 ──────────────────────────────────────── */
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 3rem 2rem; padding: 3.5rem 2rem;
color: var(--sidebar-muted); 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 { /* ── Editor wrapper — constrains width ───────────────── */
font-size: 3rem; .editor-wrapper {
opacity: .4; max-width: 860px;
display: block;
margin-bottom: 1rem;
}
.empty-state p {
font-size: .95rem;
margin-bottom: 0;
} }
/* ── Editor card ──────────────────────────────────────── */ /* ── 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; display: flex;
align-items: center; align-items: center;
gap: .5rem; border-radius: .5rem .5rem 0 0 !important;
} }
.editor-card-header .bi { .editor-card-body { padding: 1.5rem 1.5rem 1rem; }
font-size: 1.1rem;
opacity: .85;
}
/* ── Form fields ──────────────────────────────────────── */ .editor-card-footer {
.form-control[readonly] {
background-color: #f8f9fa; background-color: #f8f9fa;
border-color: #dee2e6; border-top: 1px solid #e9ecef;
color: #6c757d; padding: .875rem 1.5rem;
cursor: not-allowed; display: flex;
justify-content: flex-end;
gap: .5rem;
border-radius: 0 0 .5rem .5rem !important;
} }
textarea.form-control { /* ── Form-section divider ─────────────────────────────── */
resize: vertical;
}
/* ── Section divider inside editor card ──────────────── */
.form-section-title { .form-section-title {
font-size: .7rem; font-size: .68rem;
font-weight: 700; font-weight: 700;
letter-spacing: .1em; letter-spacing: .1em;
text-transform: uppercase; text-transform: uppercase;
@@ -165,3 +165,15 @@ textarea.form-control {
margin-bottom: 1rem; margin-bottom: 1rem;
border-bottom: 1px solid #dee2e6; 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; }