@canopy-iiif/app 0.12.5 → 0.12.6

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.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/ui/dist/index.mjs +46 -15
  3. package/ui/dist/index.mjs.map +2 -2
  4. package/ui/dist/server.mjs +46 -15
  5. package/ui/dist/server.mjs.map +2 -2
  6. package/ui/styles/components/_timeline.scss +72 -50
  7. package/ui/styles/index.css +53 -49
package/ui/styles/components/_timeline.scss CHANGED
@@ -1,35 +1,38 @@
1
1
  .canopy-timeline {
2
2
  font-size: 1rem;
3
3
  line-height: 1.5;
4
- color: var(--color-gray-800);
4
+ color: var(--color-gray-900);
5
5
  display: flex;
6
6
  flex-direction: column;
7
- gap: 1rem;
8
7
  margin: 2.618rem 0;
8
+ text-align: center;
9
9
  }
10
10
 
11
11
  .canopy-timeline__title {
12
12
  margin: 0;
13
- font-size: 1rem;
13
+ font-size: 1.382rem;
14
14
  font-weight: 600;
15
15
  }
16
16
 
17
17
  .canopy-timeline__description {
18
18
  margin: 0;
19
- font-size: 1rem;
19
+ font-size: 0.9222rem;
20
20
  color: var(--color-gray-700);
21
21
  }
22
22
 
23
23
  .canopy-timeline__range {
24
24
  margin: 0;
25
25
  font-size: 1rem;
26
- text-transform: uppercase;
27
- letter-spacing: 0.2em;
28
- color: var(--color-gray-600);
26
+ color: var(--color-gray-700);
27
+ font-size: 1.111rem;
28
+ letter-spacing: 0.0125em;
29
+ color: var(--color-gray-700);
30
+ font-weight: 300;
29
31
  }
30
32
 
31
33
  .canopy-timeline__body {
32
34
  position: relative;
35
+ padding: 2.618rem;
33
36
  }
34
37
 
35
38
  .canopy-timeline__list {
@@ -44,31 +47,56 @@
44
47
  left: 50%;
45
48
  transform: translateX(-50%);
46
49
  width: 1rem;
47
- background: var(--color-accent-300);
50
+ background: var(--color-accent-400);
48
51
  z-index: 0;
52
+
53
+ // mask background to create top and bottom fade effect
54
+ -webkit-mask-image: linear-gradient(
55
+ to bottom,
56
+ transparent,
57
+ black 10%,
58
+ black 90%,
59
+ transparent
60
+ );
61
+ mask-image: linear-gradient(
62
+ to bottom,
63
+ transparent,
64
+ black 10%,
65
+ black 90%,
66
+ transparent
67
+ );
49
68
  }
50
69
 
51
70
  .canopy-timeline__step {
52
71
  position: absolute;
53
- left: calc(50% - 0.5rem);
72
+ left: calc(50% - 0.75rem);
73
+ margin-top: -1px;
54
74
  display: flex;
55
- gap: 0.35rem;
56
75
  pointer-events: none;
57
76
  z-index: 1;
77
+
78
+ &--start .canopy-timeline__step-line {
79
+ background: transparent;
80
+ }
81
+
82
+ &--end .canopy-timeline__step-line {
83
+ background: transparent;
84
+ }
58
85
  }
59
86
 
60
87
  .canopy-timeline__step-line {
61
- width: 1rem;
88
+ width: 1.5rem;
62
89
  height: 0.125rem;
63
90
  background: var(--color-gray-50);
64
91
  }
65
92
 
66
93
  .canopy-timeline__step-label {
67
94
  font-size: 0.8333rem;
68
- font-weight: 600;
69
- color: var(--color-gray-900);
95
+ font-weight: 300;
96
+ color: var(--color-gray-700);
70
97
  transform: translateX(0.5rem);
71
98
  margin-top: -0.618rem;
99
+ margin-left: -0.382rem;
72
100
  }
73
101
 
74
102
  .canopy-timeline__point-wrapper {
@@ -76,19 +104,20 @@
76
104
  width: 50%;
77
105
  display: flex;
78
106
  align-items: center;
107
+ transform: translateY(-50%);
79
108
  }
80
109
 
81
110
  .canopy-timeline__point-wrapper--left {
82
111
  right: 50%;
83
112
  justify-content: flex-end;
84
- padding-right: 0.125rem;
113
+ padding-right: 0.2rem;
85
114
  text-align: right;
86
115
  }
87
116
 
88
117
  .canopy-timeline__point-wrapper--right {
89
118
  left: 50%;
90
119
  justify-content: flex-start;
91
- padding-left: 0.125rem;
120
+ padding-left: 0.2rem;
92
121
  text-align: left;
93
122
  }
94
123
 
@@ -105,29 +134,15 @@
105
134
  box-shadow 150ms ease;
106
135
  display: flex;
107
136
  flex-direction: column;
108
- gap: 0.75rem;
109
- }
110
-
111
- .canopy-timeline__point.is-active,
112
- .canopy-timeline__group.is-active {
113
- border-color: var(--color-accent-400);
114
- box-shadow:
115
- 0 12px 22px rgba(15, 23, 42, 0.15),
116
- 0 0 0 2px color-mix(in srgb, var(--color-accent-300) 45%, transparent);
117
- }
118
-
119
- .canopy-timeline__point.is-highlighted {
120
- border-color: var(--color-accent-600);
121
137
  }
122
138
 
123
139
  .canopy-timeline__point-date,
124
- .canopy-timeline__group-point-date,
125
- .canopy-timeline__group-count {
126
- font-size: 1rem;
127
- text-transform: uppercase;
128
- letter-spacing: 0.18em;
129
- color: var(--color-gray-600);
130
- font-weight: 600;
140
+ .canopy-timeline__group-point-date {
141
+ font-size: 1.111rem;
142
+ letter-spacing: 0.0125em;
143
+ color: var(--color-gray-700);
144
+ font-weight: 300;
145
+ margin-bottom: 0.382rem;
131
146
  }
132
147
 
133
148
  .canopy-timeline__point-title,
@@ -136,14 +151,14 @@
136
151
  font-size: 1rem;
137
152
  font-weight: 600;
138
153
  color: var(--color-gray-900);
139
- margin-top: 0.25rem;
154
+ margin-top: 0.382rem 0;
140
155
  }
141
156
 
142
157
  .canopy-timeline__point-summary,
143
- .canopy-timeline__group-range {
144
- font-size: 1rem;
158
+ .canopy-timeline__group-count {
159
+ font-size: 0.9222rem;
160
+ font-weight: 300;
145
161
  color: var(--color-gray-700);
146
- margin: 0.25rem 0 0;
147
162
  }
148
163
 
149
164
  .canopy-timeline__connector {
@@ -201,12 +216,6 @@
201
216
  .canopy-timeline__group-summary {
202
217
  display: flex;
203
218
  flex-direction: column;
204
- gap: 0.2rem;
205
- }
206
-
207
- .canopy-timeline__group-range {
208
- font-size: 1rem;
209
- color: var(--color-gray-700);
210
219
  }
211
220
 
212
221
  .canopy-timeline__group-toggle {
@@ -240,11 +249,22 @@
240
249
  }
241
250
 
242
251
  @media (max-width: 900px) {
252
+ .canopy-timeline__list {
253
+ height: unset;
254
+ min-height: unset !important;
255
+ }
256
+
243
257
  .canopy-timeline__point-wrapper {
244
258
  position: static;
245
259
  width: 100%;
246
260
  padding: 0 !important;
247
261
  margin-bottom: 1rem;
262
+ transform: none;
263
+ }
264
+
265
+ .canopy-timeline__point-wrapper--left {
266
+ justify-content: flex-start;
267
+ text-align: left;
248
268
  }
249
269
 
250
270
  .canopy-timeline__list {
@@ -252,11 +272,13 @@
252
272
  }
253
273
 
254
274
  .canopy-timeline__spine {
255
- left: 0.5rem;
275
+ left: -1.5rem;
256
276
  transform: none;
257
277
  width: 0.35rem;
278
+ display: none;
258
279
  }
259
280
 
281
+ .canopy-timeline__step,
260
282
  .canopy-timeline__connector {
261
283
  display: none;
262
284
  }
@@ -265,8 +287,8 @@
265
287
  .canopy-timeline__group {
266
288
  width: 100%;
267
289
  }
268
- }
269
- .canopy-timeline__point-body {
270
- display: flex;
271
- flex-direction: column;
290
+
291
+ .canopy-timeline__body {
292
+ padding: 1rem 0 0;
293
+ }
272
294
  }
package/ui/styles/index.css CHANGED
@@ -2238,35 +2238,38 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2238
2238
  .canopy-timeline {
2239
2239
  font-size: 1rem;
2240
2240
  line-height: 1.5;
2241
- color: var(--color-gray-800);
2241
+ color: var(--color-gray-900);
2242
2242
  display: flex;
2243
2243
  flex-direction: column;
2244
- gap: 1rem;
2245
2244
  margin: 2.618rem 0;
2245
+ text-align: center;
2246
2246
  }
2247
2247
 
2248
2248
  .canopy-timeline__title {
2249
2249
  margin: 0;
2250
- font-size: 1rem;
2250
+ font-size: 1.382rem;
2251
2251
  font-weight: 600;
2252
2252
  }
2253
2253
 
2254
2254
  .canopy-timeline__description {
2255
2255
  margin: 0;
2256
- font-size: 1rem;
2256
+ font-size: 0.9222rem;
2257
2257
  color: var(--color-gray-700);
2258
2258
  }
2259
2259
 
2260
2260
  .canopy-timeline__range {
2261
2261
  margin: 0;
2262
2262
  font-size: 1rem;
2263
- text-transform: uppercase;
2264
- letter-spacing: 0.2em;
2265
- color: var(--color-gray-600);
2263
+ color: var(--color-gray-700);
2264
+ font-size: 1.111rem;
2265
+ letter-spacing: 0.0125em;
2266
+ color: var(--color-gray-700);
2267
+ font-weight: 300;
2266
2268
  }
2267
2269
 
2268
2270
  .canopy-timeline__body {
2269
2271
  position: relative;
2272
+ padding: 2.618rem;
2270
2273
  }
2271
2274
 
2272
2275
  .canopy-timeline__list {
@@ -2281,31 +2284,40 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2281
2284
  left: 50%;
2282
2285
  transform: translateX(-50%);
2283
2286
  width: 1rem;
2284
- background: var(--color-accent-300);
2287
+ background: var(--color-accent-400);
2285
2288
  z-index: 0;
2289
+ -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
2290
+ mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
2286
2291
  }
2287
2292
 
2288
2293
  .canopy-timeline__step {
2289
2294
  position: absolute;
2290
- left: calc(50% - 0.5rem);
2295
+ left: calc(50% - 0.75rem);
2296
+ margin-top: -1px;
2291
2297
  display: flex;
2292
- gap: 0.35rem;
2293
2298
  pointer-events: none;
2294
2299
  z-index: 1;
2295
2300
  }
2301
+ .canopy-timeline__step--start .canopy-timeline__step-line {
2302
+ background: transparent;
2303
+ }
2304
+ .canopy-timeline__step--end .canopy-timeline__step-line {
2305
+ background: transparent;
2306
+ }
2296
2307
 
2297
2308
  .canopy-timeline__step-line {
2298
- width: 1rem;
2309
+ width: 1.5rem;
2299
2310
  height: 0.125rem;
2300
2311
  background: var(--color-gray-50);
2301
2312
  }
2302
2313
 
2303
2314
  .canopy-timeline__step-label {
2304
2315
  font-size: 0.8333rem;
2305
- font-weight: 600;
2306
- color: var(--color-gray-900);
2316
+ font-weight: 300;
2317
+ color: var(--color-gray-700);
2307
2318
  transform: translateX(0.5rem);
2308
2319
  margin-top: -0.618rem;
2320
+ margin-left: -0.382rem;
2309
2321
  }
2310
2322
 
2311
2323
  .canopy-timeline__point-wrapper {
@@ -2313,19 +2325,20 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2313
2325
  width: 50%;
2314
2326
  display: flex;
2315
2327
  align-items: center;
2328
+ transform: translateY(-50%);
2316
2329
  }
2317
2330
 
2318
2331
  .canopy-timeline__point-wrapper--left {
2319
2332
  right: 50%;
2320
2333
  justify-content: flex-end;
2321
- padding-right: 0.125rem;
2334
+ padding-right: 0.2rem;
2322
2335
  text-align: right;
2323
2336
  }
2324
2337
 
2325
2338
  .canopy-timeline__point-wrapper--right {
2326
2339
  left: 50%;
2327
2340
  justify-content: flex-start;
2328
- padding-left: 0.125rem;
2341
+ padding-left: 0.2rem;
2329
2342
  text-align: left;
2330
2343
  }
2331
2344
 
@@ -2340,27 +2353,15 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2340
2353
  transition: border-color 150ms ease, box-shadow 150ms ease;
2341
2354
  display: flex;
2342
2355
  flex-direction: column;
2343
- gap: 0.75rem;
2344
- }
2345
-
2346
- .canopy-timeline__point.is-active,
2347
- .canopy-timeline__group.is-active {
2348
- border-color: var(--color-accent-400);
2349
- box-shadow: 0 12px 22px rgba(15, 23, 42, 0.15), 0 0 0 2px color-mix(in srgb, var(--color-accent-300) 45%, transparent);
2350
- }
2351
-
2352
- .canopy-timeline__point.is-highlighted {
2353
- border-color: var(--color-accent-600);
2354
2356
  }
2355
2357
 
2356
2358
  .canopy-timeline__point-date,
2357
- .canopy-timeline__group-point-date,
2358
- .canopy-timeline__group-count {
2359
- font-size: 1rem;
2360
- text-transform: uppercase;
2361
- letter-spacing: 0.18em;
2362
- color: var(--color-gray-600);
2363
- font-weight: 600;
2359
+ .canopy-timeline__group-point-date {
2360
+ font-size: 1.111rem;
2361
+ letter-spacing: 0.0125em;
2362
+ color: var(--color-gray-700);
2363
+ font-weight: 300;
2364
+ margin-bottom: 0.382rem;
2364
2365
  }
2365
2366
 
2366
2367
  .canopy-timeline__point-title,
@@ -2369,14 +2370,14 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2369
2370
  font-size: 1rem;
2370
2371
  font-weight: 600;
2371
2372
  color: var(--color-gray-900);
2372
- margin-top: 0.25rem;
2373
+ margin-top: 0.382rem 0;
2373
2374
  }
2374
2375
 
2375
2376
  .canopy-timeline__point-summary,
2376
- .canopy-timeline__group-range {
2377
- font-size: 1rem;
2377
+ .canopy-timeline__group-count {
2378
+ font-size: 0.9222rem;
2379
+ font-weight: 300;
2378
2380
  color: var(--color-gray-700);
2379
- margin: 0.25rem 0 0;
2380
2381
  }
2381
2382
 
2382
2383
  .canopy-timeline__connector {
@@ -2434,12 +2435,6 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2434
2435
  .canopy-timeline__group-summary {
2435
2436
  display: flex;
2436
2437
  flex-direction: column;
2437
- gap: 0.2rem;
2438
- }
2439
-
2440
- .canopy-timeline__group-range {
2441
- font-size: 1rem;
2442
- color: var(--color-gray-700);
2443
2438
  }
2444
2439
 
2445
2440
  .canopy-timeline__group-toggle {
@@ -2473,20 +2468,31 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2473
2468
  }
2474
2469
 
2475
2470
  @media (max-width: 900px) {
2471
+ .canopy-timeline__list {
2472
+ height: unset;
2473
+ min-height: unset !important;
2474
+ }
2476
2475
  .canopy-timeline__point-wrapper {
2477
2476
  position: static;
2478
2477
  width: 100%;
2479
2478
  padding: 0 !important;
2480
2479
  margin-bottom: 1rem;
2480
+ transform: none;
2481
+ }
2482
+ .canopy-timeline__point-wrapper--left {
2483
+ justify-content: flex-start;
2484
+ text-align: left;
2481
2485
  }
2482
2486
  .canopy-timeline__list {
2483
2487
  min-height: auto;
2484
2488
  }
2485
2489
  .canopy-timeline__spine {
2486
- left: 0.5rem;
2490
+ left: -1.5rem;
2487
2491
  transform: none;
2488
2492
  width: 0.35rem;
2493
+ display: none;
2489
2494
  }
2495
+ .canopy-timeline__step,
2490
2496
  .canopy-timeline__connector {
2491
2497
  display: none;
2492
2498
  }
@@ -2494,12 +2500,10 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2494
2500
  .canopy-timeline__group {
2495
2501
  width: 100%;
2496
2502
  }
2503
+ .canopy-timeline__body {
2504
+ padding: 1rem 0 0;
2505
+ }
2497
2506
  }
2498
- .canopy-timeline__point-body {
2499
- display: flex;
2500
- flex-direction: column;
2501
- }
2502
-
2503
2507
  /**
2504
2508
  * Define source files for utility classes
2505
2509
  */