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
+10 -10
View File
@@ -21,42 +21,42 @@
</div>
}
<div class="mb-4">
<div class="row g-3 mb-3">
<div class="col-md-5">
<label asp-for="ServiceName" class="form-label fw-semibold">Service Name</label>
<input asp-for="ServiceName" class="form-control" readonly="@(!Model.IsNew)" />
<span asp-validation-for="ServiceName" class="text-danger small"></span>
</div>
<div class="mb-4">
<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="mb-4">
<label asp-for="LanguageCode" class="form-label fw-semibold">Language Code</label>
<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 class="mb-4">
<div class="mb-3">
<label asp-for="Subject" class="form-label fw-semibold">Subject</label>
<input asp-for="Subject" class="form-control" />
<span asp-validation-for="Subject" class="text-danger small"></span>
</div>
<div class="mb-4">
<div class="mb-3">
<label asp-for="HtmlBody" class="form-label fw-semibold">HTML Body</label>
<textarea asp-for="HtmlBody" class="form-control font-monospace" rows="10"></textarea>
<span asp-validation-for="HtmlBody" class="text-danger small"></span>
</div>
<div class="mb-4">
<div class="mb-3">
<label asp-for="TextBody" class="form-label fw-semibold">Text Body</label>
<textarea asp-for="TextBody" class="form-control font-monospace" rows="5"></textarea>
</div>
<div class="mb-4">
<div class="mb-3">
<label asp-for="VariablesJson" class="form-label fw-semibold">Variables (JSON)</label>
<textarea asp-for="VariablesJson" class="form-control font-monospace" rows="4"
placeholder='[{"name":"UserName","required":true}]'></textarea>
HrynCo.NotificationService.Web/Views/Shared/_EditorLayout.cshtml
+7 -8
View File
@@ -1,17 +1,16 @@
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="card shadow-sm">
<div class="card-header bg-primary text-white">
<h5 class="mb-0 editor-card-header">
<i class="bi bi-pencil-square"></i>
@ViewData["EditorTitle"]
</h5>
<div class="editor-wrapper">
<div class="card editor-card">
<div class="card-header editor-card-header-bar">
<i class="bi bi-pencil-square me-2"></i>@ViewData["EditorTitle"]
</div>
<div class="card-body">
<div class="card-body editor-card-body">
@RenderBody()
</div>
<div class="card-footer d-flex gap-2">
<div class="card-footer editor-card-footer">
@RenderSection("FormActions", required: false)
</div>
</div>
</div>
HrynCo.NotificationService.Web/wwwroot/css/admin.css
+76 -64
View File
@@ -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; }