Skip to content

Commit 01678f8

Browse files
LanesGoodLanesGood
committed
Style time slider buttons, add feather svg icons
1 parent fef5a90 commit 01678f8

File tree

2 files changed

+146
-52
lines changed

2 files changed

+146
-52
lines changed

‎packages/web/src/app/time-navigator.tsx

Lines changed: 86 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -50,41 +50,97 @@ function TimeNavigator({
5050
<section class="carto__slider--wrapper">
5151
<div class="carto__slider--heading">
5252
<h4>Change Timeline</h4>
53+
<p>
54+
{!isLoading && currentTimestamp ? (
55+
new Date(currentTimestamp).toUTCString()
56+
) : (
57+
<LoadingSkeleton />
58+
)}
59+
</p>
5360
</div>
54-
<div class="carto__slider">
55-
<div class="carto__slider--tools">
56-
<p>
57-
{!isLoading && currentTimestamp ? (
58-
new Date(currentTimestamp).toUTCString()
59-
) : (
60-
<LoadingSkeleton />
61-
)}
62-
</p>
63-
<TimeChangeButton
64-
dispatchAppState={dispatchAppState}
65-
nextTimestamp={subDays(currentTimestamp, 1)}
61+
<div class="carto__slider--tools">
62+
<TimeChangeButton
63+
dispatchAppState={dispatchAppState}
64+
nextTimestamp={subDays(currentTimestamp, 1)}
65+
>
66+
<svg
67+
xmlns="http://www.w3.org/2000/svg"
68+
width="24"
69+
height="24"
70+
viewBox="0 0 24 24"
71+
fill="none"
72+
stroke="currentColor"
73+
stroke-width="1"
74+
stroke-linecap="round"
75+
stroke-linejoin="round"
76+
class="feather feather-chevrons-left"
6677
>
67-
← Day
68-
</TimeChangeButton>
69-
<TimeChangeButton
70-
dispatchAppState={dispatchAppState}
71-
nextTimestamp={subHours(currentTimestamp, 1)}
78+
<polyline points="11 17 6 12 11 7" />
79+
<polyline points="18 17 13 12 18 7" />
80+
</svg>
81+
Day
82+
</TimeChangeButton>
83+
<TimeChangeButton
84+
dispatchAppState={dispatchAppState}
85+
nextTimestamp={subHours(currentTimestamp, 1)}
86+
>
87+
<svg
88+
xmlns="http://www.w3.org/2000/svg"
89+
width="24"
90+
height="24"
91+
viewBox="0 0 24 24"
92+
fill="none"
93+
stroke="currentColor"
94+
stroke-width="2"
95+
stroke-linecap="round"
96+
stroke-linejoin="round"
97+
class="feather feather-chevron-left"
7298
>
73-
← Hour
74-
</TimeChangeButton>
75-
<TimeChangeButton
76-
dispatchAppState={dispatchAppState}
77-
nextTimestamp={addHours(currentTimestamp, 1)}
99+
<polyline points="15 18 9 12 15 6" />
100+
</svg>{" "}
101+
Hour
102+
</TimeChangeButton>
103+
<TimeChangeButton
104+
dispatchAppState={dispatchAppState}
105+
nextTimestamp={addHours(currentTimestamp, 1)}
106+
>
107+
Hour{" "}
108+
<svg
109+
xmlns="http://www.w3.org/2000/svg"
110+
width="24"
111+
height="24"
112+
viewBox="0 0 24 24"
113+
fill="none"
114+
stroke="currentColor"
115+
stroke-width="2"
116+
stroke-linecap="round"
117+
stroke-linejoin="round"
118+
class="feather feather-chevron-right"
78119
>
79-
Hour →
80-
</TimeChangeButton>
81-
<TimeChangeButton
82-
dispatchAppState={dispatchAppState}
83-
nextTimestamp={addDays(currentTimestamp, 1)}
120+
<polyline points="9 18 15 12 9 6" />
121+
</svg>
122+
</TimeChangeButton>
123+
<TimeChangeButton
124+
dispatchAppState={dispatchAppState}
125+
nextTimestamp={addDays(currentTimestamp, 1)}
126+
>
127+
Day{" "}
128+
<svg
129+
xmlns="http://www.w3.org/2000/svg"
130+
width="24"
131+
height="24"
132+
viewBox="0 0 24 24"
133+
fill="none"
134+
stroke="currentColor"
135+
stroke-width="2"
136+
stroke-linecap="round"
137+
stroke-linejoin="round"
138+
class="feather feather-chevrons-right"
84139
>
85-
Day →
86-
</TimeChangeButton>
87-
</div>
140+
<polyline points="13 17 18 12 13 7" />
141+
<polyline points="6 17 11 12 6 7" />
142+
</svg>
143+
</TimeChangeButton>
88144
</div>
89145
</section>
90146
);

‎packages/web/src/index.css

Lines changed: 60 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,21 @@ body {
4949
color: var(--base);
5050
background: var(--bg-dark);
5151
}
52+
button {
53+
border: none;
54+
outline: none;
55+
padding: 0.5rem 0.75rem;
56+
margin: 0;
57+
text-decoration: none;
58+
background: var(--base);
59+
color: var(--base-light);
60+
font-family: var(--font-family);
61+
font-size: 1rem;
62+
cursor: pointer;
63+
text-align: center;
64+
-webkit-appearance: none;
65+
-moz-appearance: none;
66+
}
5267
.layout {
5368
display: grid;
5469
grid-template-columns: 1fr;
@@ -84,10 +99,11 @@ body {
8499
color: var(--base-light);
85100
}
86101
.carto__slider--wrapper {
87-
display: flex;
88-
flex-flow: column nowrap;
102+
display: grid;
103+
gap: 0.5rem;
104+
grid-template-columns: 1fr;
105+
grid-template-rows: auto 1fr;
89106
padding: 1rem;
90-
padding-bottom: 2rem;
91107
}
92108
#map {
93109
min-height: 480px;
@@ -122,7 +138,6 @@ body {
122138
0px 0px 12rem 0px rgba(0, 0, 0, 0.8) inset;
123139
border-radius: 0.5rem;
124140
position: relative;
125-
top: -1rem;
126141
height: calc(100% + 1rem);
127142
z-index: 100;
128143
}
@@ -242,21 +257,21 @@ li.bar-chart__bar {
242257
white-space: pre;
243258
}
244259

245-
.carto__slider {
246-
height: 1rem;
247-
flex: 1;
248-
display: flex;
249-
flex-flow: row wrap;
250-
align-items: center;
251-
}
252260
.carto__slider--heading h4 {
253261
text-transform: uppercase;
254262
}
263+
.carto__slider--heading p {
264+
font-size: 0.875rem;
265+
line-height: 1rem;
266+
}
255267
.carto__slider--tools {
256-
padding-right: 1rem;
268+
display: flex;
269+
gap: 1rem;
270+
justify-content: center;
271+
align-items: center;
257272
}
258-
.carto__slider--tools p {
259-
font-size: 0.875rem;
273+
.carto__slider--loading {
274+
opacity: 0.8;
260275
}
261276

262277
.loading {
@@ -311,9 +326,13 @@ li.bar-chart__bar {
311326
height: calc(100vh - 3.5rem);
312327
}
313328
.carto__slider--wrapper {
314-
display: flex;
315-
flex-flow: column nowrap;
316-
padding-bottom: 1rem;
329+
display: grid;
330+
gap: 0.5rem;
331+
grid-template-columns: 10rem 1fr;
332+
grid-template-rows: 1fr;
333+
}
334+
.carto__slider--heading {
335+
height: 4rem;
317336
}
318337
.carto #map {
319338
flex: 8;
@@ -329,11 +348,30 @@ li.bar-chart__bar {
329348
}
330349

331350
/* Timeline Slider */
332-
.carto--slider {
333-
width: 100%;
334-
max-width: 100%;
335-
height: 1rem;
336-
flex: 2;
351+
.carto__slider--button {
352+
border-radius: 0.25rem;
353+
border: 2px solid var(--base);
354+
background-image: linear-gradient(125deg, var(--base) 0%, var(--bg-dark) 51%, var(--base) 100%);
355+
cursor: pointer;
356+
display: flex;
357+
align-items: center;
358+
justify-content: center;
359+
transition: all 0.24s ease-out;
360+
flex: 1;
361+
font-size: 0.75rem;
362+
letter-spacing: 0.5px;
363+
text-transform: uppercase;
364+
font-weight: 600;
365+
box-shadow: 0 2px 6px 0 rgba(68,63,63,0.16);
366+
background-size: 250% auto;
367+
}
368+
.carto__slider--button svg {
369+
height: 16px;
370+
width: 16px;
371+
}
372+
.carto__slider--button:hover {
373+
background-position: right center;
374+
color: #fff;
337375
}
338376

339377
.slider--thumb {

0 commit comments

Comments
 (0)