hiveiq-src/hiveops-aria
4
0
Fork 0
Code Issues 7 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style: align all aria pages to canonical TemplatePage layout
CD - Develop / build-and-deploy (push) Failing after 11m51s
Details

Browse Source 
- page-right/content-frame/active-filters now match TemplatePage exactly
- active-filters gets the blue tinted background box (#f0f4ff, border #d0d9f0)
- content-frame uses padding+gap instead of margin-top
- page-right gets padding:0.65rem + gap:0.5rem
- ThreatEvents restructured with content-frame wrapper and toolbar-count
- IocManagement .count renamed to .toolbar-count

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Johannes
2026-06-16 21:30:31 -04:00
parent b151bf112c
commit 4dc3636f70
4 changed files with 90 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/DevicePosture.svelte
+8 -4
View File
@@ -489,6 +489,8 @@
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
padding: 0.65rem;
gap: 0.5rem;
} }
.content-frame { .content-frame {
@@ -499,8 +501,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
margin-top: 8px;
background: white; background: white;
padding: 1rem;
gap: 0.75rem;
} }
/* Filter sidebar — canonical from template */ /* Filter sidebar — canonical from template */
@@ -543,7 +546,8 @@
/* Active filter chips */ /* Active filter chips */
.active-filters { .active-filters {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
margin-bottom: 8px; padding: 0.5rem 0.75rem; flex-shrink: 0; margin-bottom: 1rem; padding: 0.6rem 1rem;
background: #f0f4ff; border: 1px solid #d0d9f0; border-radius: 8px; flex-shrink: 0;
} }
.active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; } .active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; }
.filter-tag { .filter-tag {
@@ -563,10 +567,10 @@
/* Toolbar */ /* Toolbar */
.page-main { .page-main {
flex: 1; overflow-y: auto; padding: 16px 24px 24px; flex: 1; overflow-y: auto;
min-width: 0; display: flex; flex-direction: column; min-width: 0; display: flex; flex-direction: column;
} }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-shrink: 0; } .toolbar { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.toolbar-count { font-size: var(--font-size-body-sm); color: #6b7280; } .toolbar-count { font-size: var(--font-size-body-sm); color: #6b7280; }
.header-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .header-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.btn-manual-refresh { .btn-manual-refresh {
frontend/src/components/IocManagement.svelte
+10 -7
View File
@@ -223,7 +223,7 @@
<div class="page-main"> <div class="page-main">
<div class="toolbar"> <div class="toolbar">
<span class="count">{filteredIocs.length} IOC{filteredIocs.length !== 1 ? 's' : ''}</span> <span class="toolbar-count">{filteredIocs.length} IOC{filteredIocs.length !== 1 ? 's' : ''}</span>
<div class="toolbar-right"> <div class="toolbar-right">
<button class="btn btn-primary btn-sm" on:click={openAdd}>+ Add IOC</button> <button class="btn btn-primary btn-sm" on:click={openAdd}>+ Add IOC</button>
</div> </div>
@@ -371,14 +371,16 @@
.page-right { .page-right {
flex: 1; display: flex; flex-direction: column; flex: 1; display: flex; flex-direction: column;
overflow: hidden; min-height: 0; overflow: hidden; min-height: 0;
padding: 0.65rem; gap: 0.5rem;
} }
.content-frame { .content-frame {
flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; flex: 1; border: 1px solid #e5e7eb; border-radius: 8px;
overflow: hidden; display: flex; flex-direction: column; overflow: hidden; display: flex; flex-direction: column;
min-height: 0; margin-top: 8px; background: white; min-height: 0; background: white;
padding: 1rem; gap: 0.75rem;
} }
.page-main { .page-main {
flex: 1; overflow-y: auto; padding: 16px 24px 24px; flex: 1; overflow-y: auto;
min-width: 0; display: flex; flex-direction: column; min-width: 0; display: flex; flex-direction: column;
} }
@@ -435,7 +437,8 @@
/* Active filter chips */ /* Active filter chips */
.active-filters { .active-filters {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
margin-bottom: 0; padding: 0.5rem 0.75rem; flex-shrink: 0; margin-bottom: 1rem; padding: 0.6rem 1rem;
background: #f0f4ff; border: 1px solid #d0d9f0; border-radius: 8px; flex-shrink: 0;
} }
.active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; } .active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; }
.filter-tag { .filter-tag {
@@ -454,9 +457,9 @@
.filter-tag-remove:hover { background: #f44336; color: white; } .filter-tag-remove:hover { background: #f44336; color: white; }
/* Toolbar */ /* Toolbar */
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-shrink: 0; } .toolbar { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.toolbar-right { display: flex; gap: 0.5rem; } .toolbar-right { display: flex; gap: 0.5rem; }
.count { color: #6b7280; font-size: var(--font-size-body-sm); } .toolbar-count { color: #6b7280; font-size: var(--font-size-body-sm); }
/* Table */ /* Table */
.table-card { .table-card {
@@ -552,7 +555,7 @@
:global(.dark-mode) .filter-tag { background: #1f2937; border-color: #374151; border-left-color: #3b82f6; color: #e5e5e5; } :global(.dark-mode) .filter-tag { background: #1f2937; border-color: #374151; border-left-color: #3b82f6; color: #e5e5e5; }
:global(.dark-mode) .filter-tag-remove { background: #374151; color: #e5e7eb; } :global(.dark-mode) .filter-tag-remove { background: #374151; color: #e5e7eb; }
:global(.dark-mode) .count { color: #9ca3af; } :global(.dark-mode) .toolbar-count { color: #9ca3af; }
:global(.dark-mode) .table-card { background: #1f2937; } :global(.dark-mode) .table-card { background: #1f2937; }
:global(.dark-mode) thead { background: #111827; } :global(.dark-mode) thead { background: #111827; }
:global(.dark-mode) th { background: #111827; color: #9ca3af; border-bottom-color: #374151; } :global(.dark-mode) th { background: #111827; color: #9ca3af; border-bottom-color: #374151; }
frontend/src/components/PrecursorAlerts.svelte
+8 -4
View File
@@ -467,6 +467,8 @@
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
padding: 0.65rem;
gap: 0.5rem;
} }
.content-frame { .content-frame {
@@ -477,8 +479,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
margin-top: 8px;
background: white; background: white;
padding: 1rem;
gap: 0.75rem;
} }
/* Filter sidebar — canonical from template */ /* Filter sidebar — canonical from template */
@@ -523,7 +526,8 @@
/* Active filter chips */ /* Active filter chips */
.active-filters { .active-filters {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
margin-bottom: 8px; padding: 0.5rem 0.75rem; flex-shrink: 0; margin-bottom: 1rem; padding: 0.6rem 1rem;
background: #f0f4ff; border: 1px solid #d0d9f0; border-radius: 8px; flex-shrink: 0;
} }
.active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; } .active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; }
.filter-tag { .filter-tag {
@@ -543,10 +547,10 @@
/* Toolbar */ /* Toolbar */
.page-main { .page-main {
flex: 1; overflow-y: auto; padding: 16px 24px 24px; flex: 1; overflow-y: auto;
min-width: 0; display: flex; flex-direction: column; min-width: 0; display: flex; flex-direction: column;
} }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-shrink: 0; } .toolbar { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.toolbar-count { font-size: var(--font-size-body-sm); color: #6b7280; } .toolbar-count { font-size: var(--font-size-body-sm); color: #6b7280; }
.header-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .header-controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
frontend/src/components/ThreatEvents.svelte
+20 -8
View File
@@ -121,7 +121,7 @@
onDestroy(() => clearInterval(tickInterval)); onDestroy(() => clearInterval(tickInterval));
</script> </script>
<div class="page-wrap"> <div class="page-wrapper">
<div class="header"> <div class="header">
<div class="header-text"> <div class="header-text">
<h1>Threat Events</h1> <h1>Threat Events</h1>
@@ -203,19 +203,19 @@
</div> </div>
<!-- Content --> <!-- Content -->
<div class="page-main"> <div class="page-right">
{#if hasActiveFilters} {#if hasActiveFilters}
<div class="active-filters"> <div class="active-filters">
<span class="active-filters-label">Filters:</span> <span class="active-filters-label">Filters:</span>
{#if severityFilter} {#if severityFilter}
<span class="filter-tag" style="border-color:{SEV_COLOR[severityFilter]}"> <span class="filter-tag" style="border-left-color:{SEV_COLOR[severityFilter]}">
<span class="filter-tag-dot" style="background:{SEV_COLOR[severityFilter]}"></span> <span class="filter-tag-dot" style="background:{SEV_COLOR[severityFilter]}"></span>
Severity: {severityFilter} Severity: {severityFilter}
<button class="filter-tag-remove" on:click={() => { severityFilter = ''; page = 0; load(); }}>&times;</button> <button class="filter-tag-remove" on:click={() => { severityFilter = ''; page = 0; load(); }}>&times;</button>
</span> </span>
{/if} {/if}
{#if deviceSearch} {#if deviceSearch}
<span class="filter-tag" style="border-color:#6b7280"> <span class="filter-tag" style="border-left-color:#6b7280">
<span class="filter-tag-dot" style="background:#6b7280"></span> <span class="filter-tag-dot" style="background:#6b7280"></span>
Device: {deviceSearch} Device: {deviceSearch}
<button class="filter-tag-remove" on:click={() => { deviceSearch = ''; deviceSearchInput = ''; page = 0; load(); }}>&times;</button> <button class="filter-tag-remove" on:click={() => { deviceSearch = ''; deviceSearchInput = ''; page = 0; load(); }}>&times;</button>
@@ -224,6 +224,11 @@
</div> </div>
{/if} {/if}
<div class="content-frame">
<div class="toolbar">
<span class="toolbar-count">{totalElements} event{totalElements !== 1 ? 's' : ''}</span>
<div class="toolbar-right"></div>
</div>
<div class="table-card"> <div class="table-card">
<Pagination {page} {totalPages} {totalElements} {size} <Pagination {page} {totalPages} {totalElements} {size}
on:pageChange={e => { page = e.detail.page; load(); }} on:pageChange={e => { page = e.detail.page; load(); }}
@@ -275,9 +280,10 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<style> <style>
.page-wrap { .page-wrapper {
display: flex; flex-direction: column; display: flex; flex-direction: column;
height: 100%; overflow: hidden; height: 100%; overflow: hidden;
padding: 24px 24px 0; padding: 24px 24px 0;
@@ -304,7 +310,7 @@
:global(.pulsing) { animation: countdown-pulse 0.8s ease-in-out infinite; } :global(.pulsing) { animation: countdown-pulse 0.8s ease-in-out infinite; }
.page-body { .page-body {
display: flex; flex: 1; overflow: hidden; min-height: 0; display: flex; flex: 1; overflow: hidden; min-height: 0; margin: 0 0 16px;
} }
/* Filter sidebar */ /* Filter sidebar */
@@ -344,7 +350,7 @@
.sidebar-clear-all-btn:hover { background: #fecaca; } .sidebar-clear-all-btn:hover { background: #fecaca; }
/* Active filters */ /* Active filters */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 8px; padding: 0.5rem 0.75rem; flex-shrink: 0; } .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding: 0.6rem 1rem; background: #f0f4ff; border: 1px solid #d0d9f0; border-radius: 8px; flex-shrink: 0; }
.active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; } .active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; }
.filter-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; background: white; border: 1px solid #ddd; border-left-width: 3px; border-radius: 4px; font-size: var(--font-size-tiny); font-weight: 500; color: #333; } .filter-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; background: white; border: 1px solid #ddd; border-left-width: 3px; border-radius: 4px; font-size: var(--font-size-tiny); font-weight: 500; color: #333; }
.filter-tag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .filter-tag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
@@ -352,7 +358,11 @@
.filter-tag-remove:hover { background: #f44336; color: white; } .filter-tag-remove:hover { background: #f44336; color: white; }
/* Content */ /* Content */
.page-main { flex: 1; overflow-y: auto; padding: 16px 24px 24px; min-width: 0; display: flex; flex-direction: column; } .page-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; padding: 0.65rem; gap: 0.5rem; }
.content-frame { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; background: white; padding: 1rem; gap: 0.75rem; }
.toolbar { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.toolbar-count { font-size: var(--font-size-body-sm); color: #6b7280; }
.toolbar-right { display: flex; gap: 0.5rem; }
.table-card { .table-card {
background: white; background: white;
@@ -437,6 +447,8 @@
:global(.dark-mode) .date-cell { color: #9ca3af; } :global(.dark-mode) .date-cell { color: #9ca3af; }
:global(.dark-mode) .table-loading, :global(.dark-mode) .table-empty { color: #9ca3af; } :global(.dark-mode) .table-loading, :global(.dark-mode) .table-empty { color: #9ca3af; }
:global(.dark-mode) .ioc-type-badge { background: #1e3a5f; color: #93c5fd; } :global(.dark-mode) .ioc-type-badge { background: #1e3a5f; color: #93c5fd; }
:global(.dark-mode) .content-frame { border-color: #374151; background: #1f2937; }
:global(.dark-mode) .toolbar-count { color: #9ca3af; }
:global(.dark-mode) .active-filters { background: #111827; border-color: #374151; } :global(.dark-mode) .active-filters { background: #111827; border-color: #374151; }
:global(.dark-mode) .active-filters-label { color: #9ca3af; } :global(.dark-mode) .active-filters-label { color: #9ca3af; }
:global(.dark-mode) .filter-tag { background: #1f2937; border-color: #374151; color: #e5e5e5; } :global(.dark-mode) .filter-tag { background: #1f2937; border-color: #374151; color: #e5e5e5; }