@canopy-iiif/app 1.10.1 → 1.10.4

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 (8) hide show
  1. package/package.json +1 -1
  2. package/ui/dist/index.mjs +76 -6
  3. package/ui/dist/index.mjs.map +3 -3
  4. package/ui/dist/server.mjs +76 -6
  5. package/ui/dist/server.mjs.map +2 -2
  6. package/ui/styles/components/_gallery.scss +31 -9
  7. package/ui/styles/components/_timeline.scss +52 -10
  8. package/ui/styles/index.css +80 -19
package/ui/styles/components/_gallery.scss CHANGED
@@ -183,7 +183,7 @@
183
183
  padding: 0;
184
184
  display: flex;
185
185
  flex-direction: row;
186
- overflow-y: scroll;
186
+ overflow: hidden;
187
187
  }
188
188
 
189
189
  &__modal-panel {
@@ -195,6 +195,8 @@
195
195
  gap: 1.6181rem;
196
196
  flex-grow: 1;
197
197
  z-index: 1;
198
+ max-height: 100vh;
199
+ overflow-y: auto;
198
200
  }
199
201
 
200
202
  &__modal-actions {
@@ -274,20 +276,40 @@ body[data-canopy-gallery-locked="1"] {
274
276
  overflow: hidden;
275
277
  }
276
278
 
277
- .canopy-gallery--popup-medium {
278
- .canopy-gallery__modal-scrim {
279
- min-height: 100vh;
279
+ .canopy-gallery--popup-window {
280
+ .canopy-gallery__modal {
280
281
  display: flex;
281
282
  align-items: center;
282
283
  justify-content: center;
283
- padding: clamp(1.5rem, 3vw, 3rem);
284
- background: rgba(15, 23, 42, 0.85);
284
+ padding: clamp(1.25rem, 4vw, 2.5rem);
285
+ background: #0006;
286
+ }
287
+
288
+ .canopy-gallery__modal-scrim {
289
+ width: 80vw;
290
+ height: calc(100vh - 4rem);
291
+ max-width: 80vw;
292
+ max-height: calc(100vh - 4rem);
293
+ border-radius: var(--canopy-gallery-radius, 1rem);
294
+ box-shadow: 0 25px 80px rgba(15, 23, 42, 0.4);
295
+ background: var(--color-gray-50);
296
+ overflow: hidden;
297
+ display: flex;
298
+ }
299
+
300
+ .canopy-gallery__modal-actions {
301
+ width: clamp(5rem, 18vw, 8rem);
302
+ max-width: clamp(5rem, 18vw, 8rem);
303
+ background: var(--color-gray-100);
304
+ border-right: 1px solid var(--color-gray-200);
285
305
  }
286
306
 
287
307
  .canopy-gallery__modal-panel {
288
- width: min(960px, calc(100% - clamp(2rem, 4vw, 4rem)));
289
- height: auto;
290
- max-height: min(90vh, 960px);
308
+ width: auto;
309
+ height: 100%;
310
+ max-width: none;
311
+ flex: 1 1 auto;
312
+ background: transparent;
291
313
  }
292
314
  }
293
315
 
package/ui/styles/components/_timeline.scss CHANGED
@@ -8,6 +8,15 @@
8
8
  flex-direction: column;
9
9
  margin: 2.618rem 0;
10
10
  text-align: center;
11
+ --canopy-timeline-spine-width: 1rem;
12
+ --canopy-timeline-connector-length: clamp(2.618rem, 6vw, 2.618rem);
13
+ --canopy-timeline-spine-left: 50%;
14
+ --canopy-timeline-spine-translate: -50%;
15
+ --canopy-timeline-point-offset-left: 50%;
16
+ --canopy-timeline-point-offset-right: 50%;
17
+ --canopy-timeline-spine-center-offset: calc(
18
+ var(--canopy-timeline-spine-width) / 2
19
+ );
11
20
  }
12
21
 
13
22
  .canopy-timeline__title {
@@ -43,9 +52,9 @@
43
52
  position: absolute;
44
53
  top: 0;
45
54
  bottom: 0;
46
- left: 50%;
47
- transform: translateX(-50%);
48
- width: 1rem;
55
+ left: var(--canopy-timeline-spine-left);
56
+ transform: translateX(var(--canopy-timeline-spine-translate));
57
+ width: var(--canopy-timeline-spine-width);
49
58
  background: var(--color-accent-400);
50
59
  z-index: 0;
51
60
 
@@ -68,7 +77,7 @@
68
77
 
69
78
  .canopy-timeline__step {
70
79
  position: absolute;
71
- left: calc(50% - 0.75rem);
80
+ left: calc(var(--canopy-timeline-spine-left) - 0.75rem);
72
81
  margin-top: -1px;
73
82
  display: flex;
74
83
  pointer-events: none;
@@ -105,14 +114,14 @@
105
114
  }
106
115
 
107
116
  .canopy-timeline__point-wrapper--left {
108
- right: 50%;
117
+ right: var(--canopy-timeline-point-offset-right);
109
118
  justify-content: flex-end;
110
119
  padding-right: 0.2rem;
111
120
  text-align: right;
112
121
  }
113
122
 
114
123
  .canopy-timeline__point-wrapper--right {
115
- left: 50%;
124
+ left: var(--canopy-timeline-point-offset-left);
116
125
  justify-content: flex-start;
117
126
  padding-left: 0.2rem;
118
127
  text-align: left;
@@ -121,9 +130,7 @@
121
130
  .canopy-timeline__point,
122
131
  .canopy-timeline__group {
123
132
  width: min(100%, 28rem);
124
- border: 1px solid var(--color-gray-200);
125
- background: var(--color-gray-50);
126
- padding: 1rem 1.25rem;
133
+ padding: 1rem;
127
134
  transition: border-color 150ms ease;
128
135
  display: flex;
129
136
  flex-direction: column;
@@ -161,7 +168,7 @@
161
168
  }
162
169
 
163
170
  .canopy-timeline__connector-line {
164
- width: clamp(2.618rem, 6vw, 2.618rem);
171
+ width: var(--canopy-timeline-connector-length);
165
172
  height: 0.125rem;
166
173
  background: var(--color-accent-default);
167
174
  }
@@ -236,6 +243,36 @@
236
243
  border-color: var(--color-accent-400);
237
244
  }
238
245
 
246
+ .canopy-timeline--align-left {
247
+ text-align: left;
248
+ --canopy-timeline-spine-left: 0%;
249
+ --canopy-timeline-spine-translate: 0;
250
+ --canopy-timeline-point-offset-left: var(
251
+ --canopy-timeline-spine-center-offset
252
+ );
253
+ --canopy-timeline-point-offset-right: 0%;
254
+ }
255
+
256
+ .canopy-timeline--align-left .canopy-timeline__point-wrapper {
257
+ width: calc(100% - var(--canopy-timeline-point-offset-left));
258
+ max-width: 100%;
259
+ }
260
+
261
+ .canopy-timeline--align-right {
262
+ text-align: right;
263
+ --canopy-timeline-spine-left: 100%;
264
+ --canopy-timeline-spine-translate: -100%;
265
+ --canopy-timeline-point-offset-left: 0%;
266
+ --canopy-timeline-point-offset-right: var(
267
+ --canopy-timeline-spine-center-offset
268
+ );
269
+ }
270
+
271
+ .canopy-timeline--align-right .canopy-timeline__point-wrapper {
272
+ width: calc(100% - var(--canopy-timeline-point-offset-right));
273
+ max-width: 100%;
274
+ }
275
+
239
276
  @media (max-width: 900px) {
240
277
  .canopy-timeline__list {
241
278
  height: unset;
@@ -250,6 +287,11 @@
250
287
  transform: none;
251
288
  }
252
289
 
290
+ .canopy-timeline--align-left .canopy-timeline__point-wrapper,
291
+ .canopy-timeline--align-right .canopy-timeline__point-wrapper {
292
+ width: 100%;
293
+ }
294
+
253
295
  .canopy-timeline__point-wrapper--left {
254
296
  justify-content: flex-start;
255
297
  text-align: left;
package/ui/styles/index.css CHANGED
@@ -2786,6 +2786,15 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
2786
2786
  flex-direction: column;
2787
2787
  margin: 2.618rem 0;
2788
2788
  text-align: center;
2789
+ --canopy-timeline-spine-width: 1rem;
2790
+ --canopy-timeline-connector-length: clamp(2.618rem, 6vw, 2.618rem);
2791
+ --canopy-timeline-spine-left: 50%;
2792
+ --canopy-timeline-spine-translate: -50%;
2793
+ --canopy-timeline-point-offset-left: 50%;
2794
+ --canopy-timeline-point-offset-right: 50%;
2795
+ --canopy-timeline-spine-center-offset: calc(
2796
+ var(--canopy-timeline-spine-width) / 2
2797
+ );
2789
2798
  }
2790
2799
 
2791
2800
  .canopy-timeline__title {
@@ -2821,9 +2830,9 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
2821
2830
  position: absolute;
2822
2831
  top: 0;
2823
2832
  bottom: 0;
2824
- left: 50%;
2825
- transform: translateX(-50%);
2826
- width: 1rem;
2833
+ left: var(--canopy-timeline-spine-left);
2834
+ transform: translateX(var(--canopy-timeline-spine-translate));
2835
+ width: var(--canopy-timeline-spine-width);
2827
2836
  background: var(--color-accent-400);
2828
2837
  z-index: 0;
2829
2838
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
@@ -2832,7 +2841,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
2832
2841
 
2833
2842
  .canopy-timeline__step {
2834
2843
  position: absolute;
2835
- left: calc(50% - 0.75rem);
2844
+ left: calc(var(--canopy-timeline-spine-left) - 0.75rem);
2836
2845
  margin-top: -1px;
2837
2846
  display: flex;
2838
2847
  pointer-events: none;
@@ -2862,14 +2871,14 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
2862
2871
  }
2863
2872
 
2864
2873
  .canopy-timeline__point-wrapper--left {
2865
- right: 50%;
2874
+ right: var(--canopy-timeline-point-offset-right);
2866
2875
  justify-content: flex-end;
2867
2876
  padding-right: 0.2rem;
2868
2877
  text-align: right;
2869
2878
  }
2870
2879
 
2871
2880
  .canopy-timeline__point-wrapper--right {
2872
- left: 50%;
2881
+ left: var(--canopy-timeline-point-offset-left);
2873
2882
  justify-content: flex-start;
2874
2883
  padding-left: 0.2rem;
2875
2884
  text-align: left;
@@ -2878,9 +2887,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
2878
2887
  .canopy-timeline__point,
2879
2888
  .canopy-timeline__group {
2880
2889
  width: min(100%, 28rem);
2881
- border: 1px solid var(--color-gray-200);
2882
- background: var(--color-gray-50);
2883
- padding: 1rem 1.25rem;
2890
+ padding: 1rem;
2884
2891
  transition: border-color 150ms ease;
2885
2892
  display: flex;
2886
2893
  flex-direction: column;
@@ -2918,7 +2925,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
2918
2925
  }
2919
2926
 
2920
2927
  .canopy-timeline__connector-line {
2921
- width: clamp(2.618rem, 6vw, 2.618rem);
2928
+ width: var(--canopy-timeline-connector-length);
2922
2929
  height: 0.125rem;
2923
2930
  background: var(--color-accent-default);
2924
2931
  }
@@ -3015,6 +3022,36 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
3015
3022
  border-color: var(--color-accent-400);
3016
3023
  }
3017
3024
 
3025
+ .canopy-timeline--align-left {
3026
+ text-align: left;
3027
+ --canopy-timeline-spine-left: 0%;
3028
+ --canopy-timeline-spine-translate: 0;
3029
+ --canopy-timeline-point-offset-left: var(
3030
+ --canopy-timeline-spine-center-offset
3031
+ );
3032
+ --canopy-timeline-point-offset-right: 0%;
3033
+ }
3034
+
3035
+ .canopy-timeline--align-left .canopy-timeline__point-wrapper {
3036
+ width: calc(100% - var(--canopy-timeline-point-offset-left));
3037
+ max-width: 100%;
3038
+ }
3039
+
3040
+ .canopy-timeline--align-right {
3041
+ text-align: right;
3042
+ --canopy-timeline-spine-left: 100%;
3043
+ --canopy-timeline-spine-translate: -100%;
3044
+ --canopy-timeline-point-offset-left: 0%;
3045
+ --canopy-timeline-point-offset-right: var(
3046
+ --canopy-timeline-spine-center-offset
3047
+ );
3048
+ }
3049
+
3050
+ .canopy-timeline--align-right .canopy-timeline__point-wrapper {
3051
+ width: calc(100% - var(--canopy-timeline-point-offset-right));
3052
+ max-width: 100%;
3053
+ }
3054
+
3018
3055
  @media (max-width: 900px) {
3019
3056
  .canopy-timeline__list {
3020
3057
  height: unset;
@@ -3027,6 +3064,10 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
3027
3064
  margin-bottom: 1rem;
3028
3065
  transform: none;
3029
3066
  }
3067
+ .canopy-timeline--align-left .canopy-timeline__point-wrapper,
3068
+ .canopy-timeline--align-right .canopy-timeline__point-wrapper {
3069
+ width: 100%;
3070
+ }
3030
3071
  .canopy-timeline__point-wrapper--left {
3031
3072
  justify-content: flex-start;
3032
3073
  text-align: left;
@@ -3449,7 +3490,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
3449
3490
  padding: 0;
3450
3491
  display: flex;
3451
3492
  flex-direction: row;
3452
- overflow-y: scroll;
3493
+ overflow: hidden;
3453
3494
  }
3454
3495
  .canopy-gallery__modal-panel {
3455
3496
  position: relative;
@@ -3460,6 +3501,8 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
3460
3501
  gap: 1.6181rem;
3461
3502
  flex-grow: 1;
3462
3503
  z-index: 1;
3504
+ max-height: 100vh;
3505
+ overflow-y: auto;
3463
3506
  }
3464
3507
  .canopy-gallery__modal-actions {
3465
3508
  display: flex;
@@ -3529,18 +3572,36 @@ body[data-canopy-gallery-locked="1"] {
3529
3572
  overflow: hidden;
3530
3573
  }
3531
3574
 
3532
- .canopy-gallery--popup-medium .canopy-gallery__modal-scrim {
3533
- min-height: 100vh;
3575
+ .canopy-gallery--popup-window .canopy-gallery__modal {
3534
3576
  display: flex;
3535
3577
  align-items: center;
3536
3578
  justify-content: center;
3537
- padding: clamp(1.5rem, 3vw, 3rem);
3538
- background: rgba(15, 23, 42, 0.85);
3579
+ padding: clamp(1.25rem, 4vw, 2.5rem);
3580
+ background: rgba(0, 0, 0, 0.4);
3581
+ }
3582
+ .canopy-gallery--popup-window .canopy-gallery__modal-scrim {
3583
+ width: 80vw;
3584
+ height: calc(100vh - 4rem);
3585
+ max-width: 80vw;
3586
+ max-height: calc(100vh - 4rem);
3587
+ border-radius: var(--canopy-gallery-radius, 1rem);
3588
+ box-shadow: 0 25px 80px rgba(15, 23, 42, 0.4);
3589
+ background: var(--color-gray-50);
3590
+ overflow: hidden;
3591
+ display: flex;
3539
3592
  }
3540
- .canopy-gallery--popup-medium .canopy-gallery__modal-panel {
3541
- width: min(960px, 100% - clamp(2rem, 4vw, 4rem));
3542
- height: auto;
3543
- max-height: min(90vh, 960px);
3593
+ .canopy-gallery--popup-window .canopy-gallery__modal-actions {
3594
+ width: clamp(5rem, 18vw, 8rem);
3595
+ max-width: clamp(5rem, 18vw, 8rem);
3596
+ background: var(--color-gray-100);
3597
+ border-right: 1px solid var(--color-gray-200);
3598
+ }
3599
+ .canopy-gallery--popup-window .canopy-gallery__modal-panel {
3600
+ width: auto;
3601
+ height: 100%;
3602
+ max-width: none;
3603
+ flex: 1 1 auto;
3604
+ background: transparent;
3544
3605
  }
3545
3606
 
3546
3607
  .canopy-gallery--popup-full .canopy-gallery__modal-scrim {