@canopy-iiif/app 1.10.1 → 1.10.3

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 +23 -4
  3. package/ui/dist/index.mjs.map +3 -3
  4. package/ui/dist/server.mjs +23 -4
  5. package/ui/dist/server.mjs.map +2 -2
  6. package/ui/styles/components/_timeline.scss +52 -10
  7. package/ui/styles/index.css +51 -10
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;