@reuters-graphics/graphics-components 3.3.0 → 3.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BlogPost/PostHeadline.svelte +6 -6
- package/dist/components/BlogTOC/BlogTOC.svelte +104 -62
- package/dist/components/BlogTOC/TOCList.svelte +6 -2
- package/dist/components/ClockWall/Clock.svelte +4 -0
- package/dist/components/ClockWall/ClockWall.svelte +3 -3
- package/package.json +1 -1
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
<Block {id} class="headline-container post-headline fmt-7 {cls}" width="normal">
|
|
67
67
|
<header class="headline">
|
|
68
68
|
<div class="kinesis">
|
|
69
|
-
<Kinesis width="
|
|
69
|
+
<Kinesis width="22px" colour="#fff" />
|
|
70
70
|
</div>
|
|
71
71
|
<div class="dateline-container">
|
|
72
72
|
{#if isValidDate(publishTime)}
|
|
@@ -129,17 +129,17 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
|
|
|
129
129
|
}
|
|
130
130
|
.headline .kinesis {
|
|
131
131
|
position: absolute;
|
|
132
|
-
top: -
|
|
133
|
-
left: -
|
|
132
|
+
top: -7px;
|
|
133
|
+
left: -39px;
|
|
134
134
|
background-color: #d64000;
|
|
135
135
|
border-radius: 50%;
|
|
136
|
-
width:
|
|
137
|
-
height:
|
|
136
|
+
width: 30px;
|
|
137
|
+
height: 30px;
|
|
138
138
|
display: flex;
|
|
139
139
|
align-items: center;
|
|
140
140
|
justify-content: center;
|
|
141
141
|
}
|
|
142
|
-
@media (max-width:
|
|
142
|
+
@media (max-width: 820px) {
|
|
143
143
|
.headline .kinesis {
|
|
144
144
|
display: none;
|
|
145
145
|
}
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
let {
|
|
31
31
|
posts,
|
|
32
32
|
base = '',
|
|
33
|
-
label = '
|
|
34
|
-
maxHeight =
|
|
33
|
+
label = 'Show all articles',
|
|
34
|
+
maxHeight = 300,
|
|
35
35
|
}: Props = $props();
|
|
36
36
|
|
|
37
37
|
let showContents = $state(false);
|
|
@@ -44,67 +44,86 @@
|
|
|
44
44
|
(a, b) =>
|
|
45
45
|
new Date(a.publishTime).getTime() - new Date(b.publishTime).getTime()
|
|
46
46
|
)
|
|
47
|
-
.
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
{
|
|
47
|
+
.reduce(
|
|
48
|
+
(acc, post) => {
|
|
49
|
+
const d = new Date(post.publishTime);
|
|
50
|
+
const dateKey = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
|
|
51
|
+
const existing = acc.find((entry) => entry.dateKey === dateKey);
|
|
52
|
+
const event = {
|
|
51
53
|
title: post.title,
|
|
52
54
|
titleLink: `${base}/#${slugify(post.slugTitle)}`,
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
|
|
55
|
+
};
|
|
56
|
+
if (existing) {
|
|
57
|
+
existing.events.push(event);
|
|
58
|
+
} else {
|
|
59
|
+
acc.push({
|
|
60
|
+
dateKey,
|
|
61
|
+
date: `${apmonth(d)} ${d.getDate()}`,
|
|
62
|
+
events: [event],
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
return acc;
|
|
66
|
+
},
|
|
67
|
+
[] as {
|
|
68
|
+
dateKey: string;
|
|
69
|
+
date: string;
|
|
70
|
+
events: { title: string; titleLink: string }[];
|
|
71
|
+
}[]
|
|
72
|
+
)
|
|
73
|
+
.map(({ dateKey: _dateKey, ...rest }) => rest)
|
|
56
74
|
);
|
|
57
75
|
</script>
|
|
58
76
|
|
|
59
77
|
{#if contents.length > 1}
|
|
60
|
-
<Block width="
|
|
61
|
-
<div class="
|
|
62
|
-
<div class="
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<Fa icon={faCaretDown} size="lg" />
|
|
70
|
-
</div>
|
|
71
|
-
<div
|
|
72
|
-
class="label text-xs uppercase leading-loose tracking-wide py-0.5"
|
|
78
|
+
<Block width="fluid" class="mt-4 mb-0">
|
|
79
|
+
<div class="toc-gutter">
|
|
80
|
+
<div class="table-of-contents" style="--mh: {maxHeight}px;">
|
|
81
|
+
<div class="flex w-full">
|
|
82
|
+
<button
|
|
83
|
+
onclick={() => {
|
|
84
|
+
showContents = !showContents;
|
|
85
|
+
scrollPos = 0;
|
|
86
|
+
}}
|
|
73
87
|
>
|
|
74
|
-
{
|
|
75
|
-
|
|
88
|
+
<div class="icon" class:expanded={showContents}>
|
|
89
|
+
<Fa icon={faCaretDown} size="lg" />
|
|
90
|
+
</div>
|
|
91
|
+
<div class="label text-xs leading-loose tracking-wide py-0.5">
|
|
92
|
+
{label}
|
|
93
|
+
</div>
|
|
94
|
+
</button>
|
|
95
|
+
</div>
|
|
96
|
+
<Block
|
|
97
|
+
width="normal"
|
|
98
|
+
class="my-0 ml-2 relative {showContents ? 'fpb-6' : ''}"
|
|
76
99
|
>
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
onscroll={(e) => {
|
|
88
|
-
scrollPos = e.currentTarget.scrollTop;
|
|
89
|
-
}}
|
|
90
|
-
>
|
|
91
|
-
<TOCList dates={contents} bind:listHeight />
|
|
100
|
+
<div>
|
|
101
|
+
{#if showContents}
|
|
102
|
+
<div
|
|
103
|
+
class="content-container fmt-3"
|
|
104
|
+
transition:slide={{ axis: 'y', duration: 350 }}
|
|
105
|
+
onscroll={(e) => {
|
|
106
|
+
scrollPos = e.currentTarget.scrollTop;
|
|
107
|
+
}}
|
|
108
|
+
>
|
|
109
|
+
<TOCList dates={contents} bind:listHeight />
|
|
92
110
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
111
|
+
{#if scrollPos > 10 && listHeight > maxHeight}
|
|
112
|
+
<div class="scroll-icon up">
|
|
113
|
+
<Fa icon={faAngleDoubleUp} />
|
|
114
|
+
</div>
|
|
115
|
+
{/if}
|
|
98
116
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
117
|
+
{#if listHeight > maxHeight && scrollPos < 0.95 * (listHeight - maxHeight)}
|
|
118
|
+
<div class="scroll-icon down">
|
|
119
|
+
<Fa icon={faAngleDoubleDown} />
|
|
120
|
+
</div>
|
|
121
|
+
{/if}
|
|
122
|
+
</div>
|
|
123
|
+
{/if}
|
|
124
|
+
</div></Block
|
|
125
|
+
>
|
|
126
|
+
</div>
|
|
108
127
|
</div>
|
|
109
128
|
</Block>
|
|
110
129
|
{/if}
|
|
@@ -116,9 +135,20 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
|
|
|
116
135
|
https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
|
|
117
136
|
*/
|
|
118
137
|
/* Scales by 1.125 */
|
|
138
|
+
.toc-gutter {
|
|
139
|
+
padding: 5px 0 0;
|
|
140
|
+
margin-bottom: -40px;
|
|
141
|
+
}
|
|
142
|
+
|
|
119
143
|
.table-of-contents {
|
|
120
144
|
overflow: hidden;
|
|
121
|
-
|
|
145
|
+
max-width: var(--normal-column-width);
|
|
146
|
+
margin-left: auto;
|
|
147
|
+
margin-right: auto;
|
|
148
|
+
}
|
|
149
|
+
.table-of-contents > div {
|
|
150
|
+
display: flex;
|
|
151
|
+
justify-content: center;
|
|
122
152
|
}
|
|
123
153
|
|
|
124
154
|
.content-container {
|
|
@@ -130,7 +160,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
|
|
|
130
160
|
.scroll-icon {
|
|
131
161
|
position: absolute;
|
|
132
162
|
margin-left: -4px;
|
|
133
|
-
color: var(--theme-colour-
|
|
163
|
+
color: var(--theme-colour-text-secondary);
|
|
134
164
|
background-color: var(--theme-colour-background);
|
|
135
165
|
border-radius: 50%;
|
|
136
166
|
width: 24px;
|
|
@@ -180,23 +210,35 @@ button {
|
|
|
180
210
|
display: inline-flex;
|
|
181
211
|
font-family: var(--theme-font-family-hed);
|
|
182
212
|
font-weight: normal;
|
|
183
|
-
padding: 0;
|
|
213
|
+
padding: 0 5px;
|
|
184
214
|
color: var(--theme-colour-accent);
|
|
185
215
|
font-size: var(--theme-font-size-sm);
|
|
186
216
|
align-items: center;
|
|
187
217
|
cursor: pointer;
|
|
218
|
+
border: 1px solid var(--tr-muted-grey);
|
|
219
|
+
border-radius: 50px;
|
|
220
|
+
}
|
|
221
|
+
button:hover {
|
|
222
|
+
border: 1px solid var(--theme-colour-text-secondary);
|
|
223
|
+
background-color: #efefef;
|
|
224
|
+
}
|
|
225
|
+
button:hover div.label {
|
|
226
|
+
color: var(--theme-colour-text-primary);
|
|
227
|
+
}
|
|
228
|
+
button:hover div.icon {
|
|
229
|
+
color: var(--theme-colour-text-secondary);
|
|
188
230
|
}
|
|
189
231
|
button div.icon {
|
|
190
232
|
z-index: 1;
|
|
191
233
|
font-size: var(--theme-font-size-sm);
|
|
192
234
|
line-height: 1.7;
|
|
193
|
-
width:
|
|
194
|
-
height:
|
|
235
|
+
width: 18px;
|
|
236
|
+
height: 24px;
|
|
237
|
+
margin-left: 6px;
|
|
195
238
|
display: inline-flex;
|
|
196
239
|
justify-content: center;
|
|
197
240
|
align-items: center;
|
|
198
|
-
|
|
199
|
-
color: white;
|
|
241
|
+
color: var(--tr-light-grey);
|
|
200
242
|
border-radius: 50%;
|
|
201
243
|
transition: transform 0.3s ease;
|
|
202
244
|
}
|
|
@@ -204,7 +246,7 @@ button div.icon.expanded {
|
|
|
204
246
|
transform: rotate(180deg);
|
|
205
247
|
}
|
|
206
248
|
button div.label {
|
|
207
|
-
color: var(--theme-colour-
|
|
249
|
+
color: var(--theme-colour-text-secondary);
|
|
208
250
|
display: inline-flex;
|
|
209
251
|
font-weight: 500;
|
|
210
252
|
padding-inline-start: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);
|
|
@@ -213,6 +255,7 @@ button div.label {
|
|
|
213
255
|
position: relative;
|
|
214
256
|
border-top-right-radius: 20px;
|
|
215
257
|
border-bottom-right-radius: 20px;
|
|
258
|
+
font-style: italic;
|
|
216
259
|
}
|
|
217
260
|
button div.label:after {
|
|
218
261
|
content: "";
|
|
@@ -224,5 +267,4 @@ button div.label:after {
|
|
|
224
267
|
opacity: 0.2;
|
|
225
268
|
border-top-right-radius: 20px;
|
|
226
269
|
border-bottom-right-radius: 20px;
|
|
227
|
-
background-color: var(--theme-colour-accent);
|
|
228
270
|
}</style>
|
|
@@ -91,9 +91,9 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
|
|
|
91
91
|
}
|
|
92
92
|
.timeline .timeline-date {
|
|
93
93
|
font-family: var(--theme-font-family-note);
|
|
94
|
-
font-size: var(--theme-font-size-
|
|
94
|
+
font-size: var(--theme-font-size-xxs);
|
|
95
95
|
text-transform: uppercase;
|
|
96
|
-
font-weight:
|
|
96
|
+
font-weight: 600;
|
|
97
97
|
letter-spacing: 0.03em;
|
|
98
98
|
margin-block-end: 0;
|
|
99
99
|
}
|
|
@@ -109,10 +109,14 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
|
|
|
109
109
|
font-size: var(--theme-font-size-base);
|
|
110
110
|
margin-block-start: clamp(1.69rem, 1.58rem + 0.52vw, 2rem);
|
|
111
111
|
margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
|
|
112
|
+
font-size: var(--theme-font-size-base);
|
|
112
113
|
margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
|
|
113
114
|
margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
|
|
114
115
|
font-weight: 500;
|
|
115
116
|
}
|
|
117
|
+
.timeline div.event {
|
|
118
|
+
margin-bottom: 0.75rem;
|
|
119
|
+
}
|
|
116
120
|
.timeline div.event a {
|
|
117
121
|
text-decoration: none;
|
|
118
122
|
}
|
|
@@ -244,6 +244,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
|
|
|
244
244
|
justify-content: center;
|
|
245
245
|
align-items: center;
|
|
246
246
|
gap: 8px;
|
|
247
|
+
flex: 1 1 0px;
|
|
247
248
|
}
|
|
248
249
|
@media (max-width: 659px) {
|
|
249
250
|
.clock-container {
|
|
@@ -255,6 +256,9 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
|
|
|
255
256
|
flex-direction: column;
|
|
256
257
|
gap: 2px;
|
|
257
258
|
}
|
|
259
|
+
.clock-container .clock-info p {
|
|
260
|
+
text-wrap: nowrap;
|
|
261
|
+
}
|
|
258
262
|
.clock-container svg {
|
|
259
263
|
aspect-ratio: 1/1;
|
|
260
264
|
width: auto;
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
}: Props = $props();
|
|
31
31
|
</script>
|
|
32
32
|
|
|
33
|
-
<Block {width}>
|
|
33
|
+
<Block {width} class="my-6">
|
|
34
34
|
<div id="clock-group">
|
|
35
35
|
{#each cities as city (city.tzIdentifier)}
|
|
36
36
|
<Clock
|
|
@@ -55,8 +55,8 @@ div#clock-group {
|
|
|
55
55
|
margin: 0px auto;
|
|
56
56
|
display: flex;
|
|
57
57
|
flex-wrap: wrap;
|
|
58
|
-
gap: 10px
|
|
59
|
-
justify-content: space-
|
|
58
|
+
gap: 10px 1rem;
|
|
59
|
+
justify-content: space-around;
|
|
60
60
|
}
|
|
61
61
|
@media (max-width: 659px) {
|
|
62
62
|
div#clock-group {
|