mirror/Cleanuparr
1
0
Fork 0
mirror of https://github.com/Cleanuparr/Cleanuparr.git synced 2026-05-09 07:13:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add sticky headers for pages with tables (#573)

Browse Source
This commit is contained in:
Flaminel
2026-04-20 15:37:45 +03:00
committed by GitHub
parent f14e345b52
commit b1ef63ef43
8 changed files with 25 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
code/frontend/src/app/features/events/events.component.scss
View File

@@ -5,8 +5,7 @@
> .toolbar {
animation: slide-up var(--duration-normal) var(--ease-default) both;
animation-delay: 0ms;
position: relative;
z-index: 1;
@include sticky-page-header;
}
> .event-count {
animation: slide-up var(--duration-normal) var(--ease-default) both;
@@ -41,10 +40,6 @@
}
// Events list
.events-list {
max-height: 70vh;
overflow-y: auto;
}
.event-row {
border-bottom: 1px solid var(--divider);

5
code/frontend/src/app/features/logs-component/logs.component.scss
View File

@@ -5,8 +5,7 @@
> .toolbar {
animation: slide-up var(--duration-normal) var(--ease-default) both;
animation-delay: 0ms;
position: relative;
z-index: 1;
@include sticky-page-header;
}
> .log-count {
animation: slide-up var(--duration-normal) var(--ease-default) both;
@@ -38,8 +37,6 @@
// Log console
.log-console {
max-height: 70vh;
overflow-y: auto;
font-family: var(--font-mono);
font-size: var(--font-size-xs);
}

4
code/frontend/src/app/features/seeker-stats/quality-tab/quality-tab.component.scss
View File

@@ -62,10 +62,6 @@
}
// Scores list
.scores-list {
max-height: 70vh;
overflow-y: auto;
}
.score-row {
border-bottom: 1px solid var(--divider);

4
code/frontend/src/app/features/seeker-stats/searches-tab/searches-tab.component.scss
View File

@@ -216,10 +216,6 @@
}
// List rows
.list {
max-height: 70vh;
overflow-y: auto;
}
.list-row {
border-bottom: 1px solid var(--divider);

4
code/frontend/src/app/features/seeker-stats/seeker-stats.component.scss
View File

@@ -1,7 +1,11 @@
@use 'data-toolbar' as *;
.page-content {
> app-tabs {
animation: slide-up var(--duration-normal) var(--ease-default) both;
animation-delay: 0ms;
display: block;
@include sticky-page-header;
}
> .tab-content {

4
code/frontend/src/app/features/seeker-stats/upgrades-tab/upgrades-tab.component.scss
View File

@@ -53,10 +53,6 @@
}
// Upgrades list
.upgrades-list {
max-height: 70vh;
overflow-y: auto;
}
.upgrade-row {
border-bottom: 1px solid var(--divider);

7
code/frontend/src/app/features/strikes/strikes.component.scss
View File

@@ -5,8 +5,7 @@
> .toolbar {
animation: slide-up var(--duration-normal) var(--ease-default) both;
animation-delay: 0ms;
position: relative;
z-index: 1;
@include sticky-page-header;
}
> .strike-count {
animation: slide-up var(--duration-normal) var(--ease-default) both;
@@ -41,10 +40,6 @@
}
// Strikes list
.strikes-list {
max-height: 70vh;
overflow-y: auto;
}
.strike-row {
border-bottom: 1px solid var(--divider);

18
code/frontend/src/styles/_data-toolbar.scss
View File

@@ -4,6 +4,24 @@
// Usage: @use 'data-toolbar' as *;
// =============================================================================
// Pins a page header bar to the top of the shell scroll container
@mixin sticky-page-header {
position: sticky;
top: calc(-1 * var(--content-padding, var(--space-6)));
z-index: var(--z-sticky);
background: var(--surface-overlay);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
padding-top: var(--content-padding, var(--space-6));
padding-bottom: var(--space-3);
padding-left: var(--content-padding, var(--space-6));
padding-right: var(--content-padding, var(--space-6));
margin-top: calc(-1 * var(--content-padding, var(--space-6)));
margin-left: calc(-1 * var(--content-padding, var(--space-6)));
margin-right: calc(-1 * var(--content-padding, var(--space-6)));
box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.35);
}
@mixin data-toolbar {
display: flex;
align-items: center;