amiirkhl/tabdeal-job-queue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): smooth chart and sidebar transitions

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-21 09:10:00 +03:30
parent 01edd74e63
commit a2bd063c9c
1 changed files with 58 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/styles.css
View File

@@ -175,6 +175,7 @@ label {
grid-template-columns: 248px minmax(0, 1fr); grid-template-columns: 248px minmax(0, 1fr);
grid-template-rows: 72px minmax(0, 1fr); grid-template-rows: 72px minmax(0, 1fr);
min-height: 100vh; min-height: 100vh;
transition: grid-template-columns 260ms cubic-bezier(0.22, 1, 0.36, 1);
} }
.app-shell.sidebar-collapsed { .app-shell.sidebar-collapsed {
@@ -255,6 +256,10 @@ label {
padding: 16px; padding: 16px;
position: sticky; position: sticky;
top: 72px; top: 72px;
transition:
background-color 220ms ease,
border-color 220ms ease,
padding 260ms cubic-bezier(0.22, 1, 0.36, 1);
} }
.sidebar-header { .sidebar-header {
@@ -268,6 +273,17 @@ label {
text-transform: uppercase; text-transform: uppercase;
} }
.sidebar-header span {
max-width: 120px;
opacity: 1;
overflow: hidden;
transition:
max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 160ms ease,
transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
white-space: nowrap;
}
.sidebar nav { .sidebar nav {
display: grid; display: grid;
gap: 8px; gap: 8px;
@@ -283,10 +299,26 @@ label {
gap: 10px; gap: 10px;
min-height: 42px; min-height: 42px;
padding: 10px 12px; padding: 10px 12px;
transition:
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease,
gap 240ms cubic-bezier(0.22, 1, 0.36, 1),
justify-content 240ms cubic-bezier(0.22, 1, 0.36, 1),
padding 240ms cubic-bezier(0.22, 1, 0.36, 1);
} }
.nav-item span { .nav-item span {
max-width: 140px;
min-width: 0; min-width: 0;
opacity: 1;
overflow: hidden;
text-overflow: ellipsis;
transition:
max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 160ms ease,
transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
white-space: nowrap;
} }
.nav-item.active { .nav-item.active {
@@ -301,10 +333,13 @@ label {
.sidebar-collapsed .sidebar-header span, .sidebar-collapsed .sidebar-header span,
.sidebar-collapsed .nav-item span { .sidebar-collapsed .nav-item span {
display: none; max-width: 0;
opacity: 0;
transform: translateX(-4px);
} }
.sidebar-collapsed .nav-item { .sidebar-collapsed .nav-item {
gap: 0;
justify-content: center; justify-content: center;
padding: 10px; padding: 10px;
} }
@@ -313,6 +348,14 @@ label {
margin: 0 auto; margin: 0 auto;
} }
.collapse-button {
transition:
background-color 180ms ease,
border-color 180ms ease,
margin 240ms cubic-bezier(0.22, 1, 0.36, 1),
transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.content { .content {
min-width: 0; min-width: 0;
padding: 20px; padding: 20px;
@@ -707,6 +750,10 @@ label {
.metric-track i { .metric-track i {
background: var(--accent); background: var(--accent);
display: block; display: block;
transition:
height 520ms cubic-bezier(0.22, 1, 0.36, 1),
width 520ms cubic-bezier(0.22, 1, 0.36, 1),
background-color 180ms ease;
} }
.histogram-column i { .histogram-column i {
@@ -777,6 +824,9 @@ label {
border-radius: 999px; border-radius: 999px;
display: block; display: block;
min-width: 6px; min-width: 6px;
transition:
width 520ms cubic-bezier(0.22, 1, 0.36, 1),
background-color 180ms ease;
} }
.status-stack i.queued, .status-stack i.queued,
@@ -797,6 +847,13 @@ label {
border-radius: 5px; border-radius: 5px;
display: block; display: block;
height: 32px; height: 32px;
transition:
background-color 240ms ease,
transform 220ms ease;
}
.job-tick:hover {
transform: translateY(-2px);
} }
.job-tick.running { .job-tick.running {