Skip to content

Commit 1824b3f

Browse files
LanesGoodLanesGood
authored
Merge pull request #42 from developmentseed/style/time-buttons
Style time buttons
2 parents fef5a90 + a9211e9 commit 1824b3f

File tree

2 files changed

+175
-62
lines changed

2 files changed

+175
-62
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: 89 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,27 @@ 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+
}
67+
button:disabled {
68+
background: var(--bg-dark);
69+
border: none;
70+
box-shadow: none;
71+
opacity: 0.6;
72+
}
5273
.layout {
5374
display: grid;
5475
grid-template-columns: 1fr;
@@ -84,10 +105,11 @@ body {
84105
color: var(--base-light);
85106
}
86107
.carto__slider--wrapper {
87-
display: flex;
88-
flex-flow: column nowrap;
108+
display: grid;
109+
gap: 0.5rem;
110+
grid-template-columns: 1fr;
111+
grid-template-rows: auto 1fr;
89112
padding: 1rem;
90-
padding-bottom: 2rem;
91113
}
92114
#map {
93115
min-height: 480px;
@@ -122,7 +144,6 @@ body {
122144
0px 0px 12rem 0px rgba(0, 0, 0, 0.8) inset;
123145
border-radius: 0.5rem;
124146
position: relative;
125-
top: -1rem;
126147
height: calc(100% + 1rem);
127148
z-index: 100;
128149
}
@@ -143,7 +164,14 @@ body {
143164
margin-top: -1rem;
144165
color: transparent;
145166
margin-bottom: 1rem;
167+
transition: all 0.32s ease-in-out;
168+
cursor: pointer;
169+
}
170+
.panel__dragger:hover {
171+
background: var(--base-light);
172+
box-shadow: 0 6px 6px -2px var(--bg-light);
146173
}
174+
147175
.panel h2,
148176
.panel h3 {
149177
text-transform: uppercase;
@@ -242,21 +270,21 @@ li.bar-chart__bar {
242270
white-space: pre;
243271
}
244272

245-
.carto__slider {
246-
height: 1rem;
247-
flex: 1;
248-
display: flex;
249-
flex-flow: row wrap;
250-
align-items: center;
251-
}
252273
.carto__slider--heading h4 {
253274
text-transform: uppercase;
254275
}
276+
.carto__slider--heading p {
277+
font-size: 0.875rem;
278+
line-height: 1rem;
279+
}
255280
.carto__slider--tools {
256-
padding-right: 1rem;
281+
display: flex;
282+
gap: 1rem;
283+
justify-content: center;
284+
align-items: center;
257285
}
258-
.carto__slider--tools p {
259-
font-size: 0.875rem;
286+
.carto__slider--loading {
287+
opacity: 0.8;
260288
}
261289

262290
.loading {
@@ -286,15 +314,6 @@ li.bar-chart__bar {
286314
.loading:first-child:after {
287315
left:0;
288316
}
289-
.tr--button {
290-
text-align: center;
291-
font-weight: bold;
292-
cursor: pointer;
293-
border: 1px solid rgba(255, 255, 255, 0.25);
294-
}
295-
.tr--button:hover {
296-
border-color: rgba(255, 255, 255, 0.5);
297-
}
298317
@keyframes skeleton-loading {
299318
to {
300319
background-position:
@@ -311,9 +330,13 @@ li.bar-chart__bar {
311330
height: calc(100vh - 3.5rem);
312331
}
313332
.carto__slider--wrapper {
314-
display: flex;
315-
flex-flow: column nowrap;
316-
padding-bottom: 1rem;
333+
display: grid;
334+
gap: 0.5rem;
335+
grid-template-columns: 10rem 1fr;
336+
grid-template-rows: 1fr;
337+
}
338+
.carto__slider--heading {
339+
height: 4rem;
317340
}
318341
.carto #map {
319342
flex: 8;
@@ -329,13 +352,47 @@ li.bar-chart__bar {
329352
}
330353

331354
/* Timeline Slider */
332-
.carto--slider {
333-
width: 100%;
334-
max-width: 100%;
335-
height: 1rem;
336-
flex: 2;
355+
.tr--button,
356+
.carto__slider--button {
357+
border-radius: 0.25rem;
358+
border: 2px solid var(--base);
359+
background-image: linear-gradient(
360+
125deg,
361+
var(--base) 0%,
362+
var(--bg-dark) 51%,
363+
var(--base) 100%
364+
);
365+
cursor: pointer;
366+
display: flex;
367+
text-align: center;
368+
align-items: center;
369+
justify-content: center;
370+
transition: all 0.24s ease-out;
371+
flex: 1;
372+
font-size: 0.75rem;
373+
letter-spacing: 0.5px;
374+
text-transform: uppercase;
375+
font-weight: 600;
376+
box-shadow:
377+
0 2px 6px 0 rgba(68, 63, 63, 0.16),
378+
0 6px 6px -2px rgba(120, 120, 120, 0.125);
379+
background-size: 250% auto;
380+
}
381+
.carto__slider--button svg {
382+
height: 16px;
383+
width: 16px;
384+
}
385+
.tr--button:hover,
386+
.carto__slider--button:hover {
387+
background-position: right center;
388+
color: #fff;
389+
box-shadow:
390+
0 2px 6px 0 rgba(68, 63, 63, 0.32),
391+
0 6px 6px -2px rgba(0, 0, 0, 0.5);
392+
}
393+
.tr--button {
394+
display: table-cell;
337395
}
338-
339396
.slider--thumb {
340397
background-color: var(--bg-light);
341398
cursor: pointer;

0 commit comments

Comments
 (0)