Skip to content

Commit 7d223d2

Browse files
author
Oussama
committed
fix: restyle globe timeline control
1 parent 4a691d9 commit 7d223d2

4 files changed

Lines changed: 167 additions & 109 deletions

File tree

‎website/src/lib/components/DecadeSlider.svelte‎

Lines changed: 10 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script>
22
import { onDestroy } from 'svelte';
33
import { DECADE_MAX, DECADE_MIN, filters, setDecadeRange, syncToHash } from '../stores/filters.js';
4+
import './decadeSlider.css';
45
56
export let timeline = [];
67
export let ariaLabel = 'Filter by decade range';
8+
export let dark = false;
79
810
const STEP = 10;
911
const LARGE_STEP = 50;
@@ -78,14 +80,17 @@
7880
});
7981
</script>
8082
81-
<div class="decade-slider" aria-label={ariaLabel}>
82-
<div class="slider-values type-mono">
83-
<span>{minDecade}</span>
84-
<span>{maxDecade}</span>
83+
<div class="decade-slider" class:dark aria-label={ariaLabel}>
84+
<div class="slider-header">
85+
<span>Decade range</span>
86+
<strong>{minDecade}-{maxDecade}</strong>
8587
</div>
8688
<div class="sparkline" aria-hidden="true">
8789
{#each decades as decade}
88-
<span style:height={`${((countByDecade.get(decade) ?? 0) / maxCount) * 100}%`}></span>
90+
<span
91+
class:selected={decade >= minDecade && decade <= maxDecade}
92+
style:height={`${((countByDecade.get(decade) ?? 0) / maxCount) * 100}%`}
93+
></span>
8994
{/each}
9095
</div>
9196
<div class="track" bind:this={track}>
@@ -130,104 +135,3 @@
130135
</button>
131136
</div>
132137
</div>
133-
134-
<style>
135-
.decade-slider {
136-
display: grid;
137-
gap: var(--space-1);
138-
width: 100%;
139-
font-family: var(--font-ui);
140-
}
141-
142-
.slider-values {
143-
display: flex;
144-
justify-content: space-between;
145-
color: var(--fg-on-light-strong);
146-
}
147-
148-
.sparkline {
149-
display: flex;
150-
align-items: end;
151-
height: 2rem;
152-
gap: 0.125rem;
153-
}
154-
155-
.sparkline span {
156-
flex: 1;
157-
min-height: 0.125rem;
158-
background: color-mix(in srgb, var(--fg-on-light-mute) 30%, transparent);
159-
}
160-
161-
.track {
162-
position: relative;
163-
height: 3rem;
164-
touch-action: none;
165-
}
166-
167-
.track-base,
168-
.track-fill {
169-
position: absolute;
170-
top: 0.75rem;
171-
height: 0.125rem;
172-
}
173-
174-
.track-base {
175-
inset-inline: 0;
176-
background: var(--rule-on-light);
177-
}
178-
179-
.track-fill {
180-
background: var(--accent-primary);
181-
}
182-
183-
.tick {
184-
position: absolute;
185-
top: 0.5rem;
186-
width: 1px;
187-
height: 0.625rem;
188-
background: var(--rule-on-light);
189-
}
190-
191-
.tick.major {
192-
height: 0.875rem;
193-
}
194-
195-
.tick span {
196-
position: absolute;
197-
top: 1rem;
198-
left: 50%;
199-
translate: -50% 0;
200-
color: var(--fg-on-light-mute);
201-
font-family: var(--font-mono);
202-
font-size: 0.6875rem;
203-
font-variant-numeric: tabular-nums;
204-
}
205-
206-
.thumb {
207-
position: absolute;
208-
top: 0.75rem;
209-
width: 1rem;
210-
height: 1rem;
211-
border: 2px solid var(--accent-primary);
212-
background: var(--bg-paper);
213-
translate: -50% -45%;
214-
cursor: grab;
215-
}
216-
217-
.thumb.active {
218-
cursor: grabbing;
219-
}
220-
221-
.thumb span {
222-
position: absolute;
223-
bottom: calc(100% + 0.25rem);
224-
left: 50%;
225-
translate: -50% 0;
226-
padding: 0 0.125rem;
227-
color: var(--fg-on-light-strong);
228-
background: var(--bg-paper);
229-
font-family: var(--font-mono);
230-
font-size: var(--type-small-size);
231-
font-variant-numeric: tabular-nums;
232-
}
233-
</style>

‎website/src/lib/components/decadeSlider.css‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
.decade-slider {
2+
--slider-strong: var(--fg-on-light-strong);
3+
--slider-muted: var(--fg-on-light-mute);
4+
--slider-track: var(--rule-on-light);
5+
--slider-spark: color-mix(in srgb, var(--fg-on-light-mute) 30%, transparent);
6+
--slider-spark-selected: color-mix(in srgb, var(--accent-primary) 72%, var(--seq-1));
7+
--slider-thumb-bg: var(--bg-paper);
8+
--slider-label-bg: var(--bg-paper);
9+
10+
display: grid;
11+
gap: var(--space-1);
12+
width: 100%;
13+
font-family: var(--font-ui);
14+
}
15+
16+
.decade-slider.dark {
17+
--slider-strong: var(--fg-on-dark-strong);
18+
--slider-muted: var(--fg-on-dark-mute);
19+
--slider-track: color-mix(in srgb, var(--fg-on-dark-mute) 30%, transparent);
20+
--slider-spark: color-mix(in srgb, var(--seq-1) 22%, transparent);
21+
--slider-spark-selected: color-mix(in srgb, var(--accent-primary) 76%, var(--seq-2));
22+
--slider-thumb-bg: var(--bg-dark);
23+
--slider-label-bg: color-mix(in srgb, var(--bg-dark) 92%, var(--accent-primary));
24+
}
25+
26+
.decade-slider .slider-header {
27+
display: flex;
28+
align-items: baseline;
29+
justify-content: space-between;
30+
gap: var(--space-2);
31+
}
32+
33+
.decade-slider .slider-header span {
34+
color: var(--slider-muted);
35+
font-size: var(--type-small-size);
36+
letter-spacing: 0.08em;
37+
text-transform: uppercase;
38+
}
39+
40+
.decade-slider .slider-header strong {
41+
color: var(--slider-strong);
42+
font-family: var(--font-mono);
43+
font-size: var(--type-small-size);
44+
font-variant-numeric: tabular-nums;
45+
}
46+
47+
.decade-slider .sparkline {
48+
position: relative;
49+
display: flex;
50+
align-items: end;
51+
height: 2.5rem;
52+
gap: 0.1875rem;
53+
padding-block: var(--space-1) 0.25rem;
54+
border-bottom: 1px solid var(--slider-track);
55+
}
56+
57+
.decade-slider .sparkline span {
58+
flex: 1;
59+
min-height: 0.125rem;
60+
background: var(--slider-spark);
61+
transition:
62+
background-color var(--duration-tooltip-in) var(--ease-out),
63+
opacity var(--duration-tooltip-in) var(--ease-out);
64+
}
65+
66+
.decade-slider .sparkline span.selected {
67+
background: var(--slider-spark-selected);
68+
}
69+
70+
.decade-slider .track {
71+
position: relative;
72+
height: 3.25rem;
73+
touch-action: none;
74+
}
75+
76+
.decade-slider .track-base,
77+
.decade-slider .track-fill {
78+
position: absolute;
79+
top: 0.875rem;
80+
height: 0.125rem;
81+
}
82+
83+
.decade-slider .track-base {
84+
inset-inline: 0;
85+
background: var(--slider-track);
86+
}
87+
88+
.decade-slider .track-fill {
89+
background: var(--accent-primary);
90+
}
91+
92+
.decade-slider .tick {
93+
position: absolute;
94+
top: 0.625rem;
95+
width: 1px;
96+
height: 0.5rem;
97+
background: var(--slider-track);
98+
}
99+
100+
.decade-slider .tick.major {
101+
height: 0.75rem;
102+
}
103+
104+
.decade-slider .tick span {
105+
position: absolute;
106+
top: 1rem;
107+
left: 50%;
108+
translate: -50% 0;
109+
color: var(--slider-muted);
110+
font-family: var(--font-mono);
111+
font-size: 0.6875rem;
112+
font-variant-numeric: tabular-nums;
113+
}
114+
115+
.decade-slider .thumb {
116+
position: absolute;
117+
top: 0.875rem;
118+
width: 0.875rem;
119+
height: 0.875rem;
120+
border: 2px solid var(--accent-primary);
121+
background: var(--slider-thumb-bg);
122+
translate: -50% -45%;
123+
cursor: grab;
124+
}
125+
126+
.decade-slider .thumb:hover,
127+
.decade-slider .thumb:focus-visible {
128+
background: var(--accent-primary);
129+
}
130+
131+
.decade-slider .thumb.active {
132+
cursor: grabbing;
133+
}
134+
135+
.decade-slider .thumb span {
136+
position: absolute;
137+
bottom: calc(100% + 0.375rem);
138+
left: 50%;
139+
translate: -50% 0;
140+
padding: 0.0625rem 0.25rem;
141+
color: var(--slider-strong);
142+
background: var(--slider-label-bg);
143+
font-family: var(--font-mono);
144+
font-size: var(--type-small-size);
145+
font-variant-numeric: tabular-nums;
146+
}
147+
148+
@media (prefers-reduced-motion: reduce) {
149+
.decade-slider .sparkline span {
150+
transition: none;
151+
}
152+
}

‎website/src/lib/scenes/Scene2Globe.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
<p class="exclusion">Excluded: 2.3% of artist credits have no mapped nationality in the cleaned corpus.</p>
9090
{#if step >= 3}
9191
<div class="slider-panel">
92-
<DecadeSlider {timeline} ariaLabel="Filter globe by decade range" />
92+
<DecadeSlider {timeline} ariaLabel="Filter globe by decade range" dark />
9393
<p class="share type-mono">Top-three share: {(topThreeShare * 100).toFixed(1)}%</p>
9494
</div>
9595
{/if}

‎website/src/lib/scenes/scene2Globe.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,10 @@
6060
.scene-globe .slider-panel {
6161
margin-top: var(--space-3);
6262
padding: var(--space-2);
63-
background: var(--bg-paper);
64-
color: var(--fg-on-light-strong);
63+
color: var(--fg-on-dark-strong);
64+
background: color-mix(in srgb, var(--bg-dark) 86%, transparent);
65+
border: 1px solid color-mix(in srgb, var(--fg-on-dark-mute) 32%, transparent);
66+
backdrop-filter: blur(8px);
6567
}
6668

6769
.globe-wrap {

0 commit comments

Comments
 (0)