@canopy-iiif/app 1.8.9 → 1.8.11
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/lib/build/mdx.js +20 -2
- package/package.json +3 -2
- package/ui/dist/index.mjs +43330 -182
- package/ui/dist/index.mjs.map +4 -4
- package/ui/dist/server.mjs +65 -3
- package/ui/dist/server.mjs.map +2 -2
- package/ui/styles/components/_map.scss +111 -5
- package/ui/styles/index.css +97 -5
|
@@ -8,6 +8,18 @@
|
|
|
8
8
|
background-color: var(--color-gray-100);
|
|
9
9
|
z-index: 0;
|
|
10
10
|
|
|
11
|
+
&__overlays {
|
|
12
|
+
position: absolute;
|
|
13
|
+
top: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
right: 0;
|
|
16
|
+
padding: 0.75rem;
|
|
17
|
+
pointer-events: none;
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: flex-end;
|
|
20
|
+
z-index: 4;
|
|
21
|
+
}
|
|
22
|
+
|
|
11
23
|
.leaflet-control-attribution {
|
|
12
24
|
display: none;
|
|
13
25
|
}
|
|
@@ -28,13 +40,13 @@
|
|
|
28
40
|
width: 100%;
|
|
29
41
|
height: 100%;
|
|
30
42
|
min-height: inherit;
|
|
43
|
+
position: relative;
|
|
44
|
+
z-index: 1;
|
|
31
45
|
}
|
|
32
46
|
|
|
33
47
|
&__status {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
left: 0.75rem;
|
|
37
|
-
z-index: 2;
|
|
48
|
+
max-width: 320px;
|
|
49
|
+
z-index: 4;
|
|
38
50
|
padding: 0.5rem 0.75rem;
|
|
39
51
|
border-radius: 999px;
|
|
40
52
|
background-color: rgba(15, 23, 42, 0.85);
|
|
@@ -42,6 +54,45 @@
|
|
|
42
54
|
font-size: 0.875rem;
|
|
43
55
|
line-height: 1.25rem;
|
|
44
56
|
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
|
|
57
|
+
pointer-events: auto;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&__key {
|
|
61
|
+
margin: 1rem;
|
|
62
|
+
z-index: 1;
|
|
63
|
+
color: var(--color-gray-900);
|
|
64
|
+
align-self: flex-end;
|
|
65
|
+
|
|
66
|
+
&-list {
|
|
67
|
+
list-style: none;
|
|
68
|
+
margin: 0;
|
|
69
|
+
padding: 0;
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-wrap: wrap;
|
|
72
|
+
gap: 0.382rem 1rem;
|
|
73
|
+
justify-content: flex-end;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&-item {
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
gap: 0.382rem;
|
|
80
|
+
font-size: 0.8333rem;
|
|
81
|
+
line-height: 1.4;
|
|
82
|
+
font-weight: 400;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&-dot {
|
|
86
|
+
width: 12px;
|
|
87
|
+
height: 12px;
|
|
88
|
+
border-radius: 999px;
|
|
89
|
+
background-color: var(--color-accent-default);
|
|
90
|
+
flex-shrink: 0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&-label {
|
|
94
|
+
flex: 1;
|
|
95
|
+
}
|
|
45
96
|
}
|
|
46
97
|
|
|
47
98
|
&__popup {
|
|
@@ -143,6 +194,11 @@
|
|
|
143
194
|
border: none;
|
|
144
195
|
width: auto;
|
|
145
196
|
height: auto;
|
|
197
|
+
|
|
198
|
+
&.is-hovered {
|
|
199
|
+
z-index: 2000 !important;
|
|
200
|
+
filter: drop-shadow(0 6px 18px rgba(15, 23, 42, 0.45));
|
|
201
|
+
}
|
|
146
202
|
}
|
|
147
203
|
|
|
148
204
|
.leaflet-popup {
|
|
@@ -163,6 +219,7 @@
|
|
|
163
219
|
}
|
|
164
220
|
|
|
165
221
|
&__marker-thumb {
|
|
222
|
+
border: 2px solid var(--color-accent-600);
|
|
166
223
|
img {
|
|
167
224
|
display: block;
|
|
168
225
|
width: 105%;
|
|
@@ -179,6 +236,55 @@
|
|
|
179
236
|
background: var(--color-accent-600);
|
|
180
237
|
}
|
|
181
238
|
|
|
239
|
+
&__marker--label {
|
|
240
|
+
background: transparent;
|
|
241
|
+
border: none;
|
|
242
|
+
|
|
243
|
+
&.is-hovered {
|
|
244
|
+
.canopy-map__marker-label {
|
|
245
|
+
background: var(--color-gray-50);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.canopy-map__marker-label-text {
|
|
249
|
+
opacity: 1;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.canopy-map__marker-label-text {
|
|
253
|
+
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
&__marker-label {
|
|
259
|
+
display: inline-flex;
|
|
260
|
+
align-items: center;
|
|
261
|
+
font-size: 0.8333rem;
|
|
262
|
+
font-weight: 400;
|
|
263
|
+
color: #000;
|
|
264
|
+
background: #fffd;
|
|
265
|
+
white-space: nowrap;
|
|
266
|
+
position: relative;
|
|
267
|
+
border-radius: 999px;
|
|
268
|
+
padding-left: 4px;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
&__marker-label-dot {
|
|
272
|
+
width: 12px;
|
|
273
|
+
height: 12px;
|
|
274
|
+
border-radius: 999px;
|
|
275
|
+
background-color: var(--color-accent-default);
|
|
276
|
+
flex-shrink: 0;
|
|
277
|
+
cursor: default;
|
|
278
|
+
z-index: 1;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
&__marker-label-text {
|
|
282
|
+
padding: 0 0.25rem;
|
|
283
|
+
line-height: 1.2;
|
|
284
|
+
color: inherit;
|
|
285
|
+
cursor: default;
|
|
286
|
+
}
|
|
287
|
+
|
|
182
288
|
&__cluster-wrapper {
|
|
183
289
|
background: none;
|
|
184
290
|
border: none;
|
|
@@ -191,7 +297,7 @@
|
|
|
191
297
|
width: 40px;
|
|
192
298
|
height: 40px;
|
|
193
299
|
border-radius: 999px;
|
|
194
|
-
background: var(--color-
|
|
300
|
+
background: var(--color-gray-default);
|
|
195
301
|
color: var(--color-gray-50);
|
|
196
302
|
display: flex;
|
|
197
303
|
align-items: center;
|
package/ui/styles/index.css
CHANGED
|
@@ -2842,6 +2842,17 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
|
|
|
2842
2842
|
background-color: var(--color-gray-100);
|
|
2843
2843
|
z-index: 0;
|
|
2844
2844
|
}
|
|
2845
|
+
.canopy-map__overlays {
|
|
2846
|
+
position: absolute;
|
|
2847
|
+
top: 0;
|
|
2848
|
+
left: 0;
|
|
2849
|
+
right: 0;
|
|
2850
|
+
padding: 0.75rem;
|
|
2851
|
+
pointer-events: none;
|
|
2852
|
+
display: flex;
|
|
2853
|
+
justify-content: flex-end;
|
|
2854
|
+
z-index: 4;
|
|
2855
|
+
}
|
|
2845
2856
|
.canopy-map .leaflet-control-attribution {
|
|
2846
2857
|
display: none;
|
|
2847
2858
|
}
|
|
@@ -2858,12 +2869,12 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
|
|
|
2858
2869
|
width: 100%;
|
|
2859
2870
|
height: 100%;
|
|
2860
2871
|
min-height: inherit;
|
|
2872
|
+
position: relative;
|
|
2873
|
+
z-index: 1;
|
|
2861
2874
|
}
|
|
2862
2875
|
.canopy-map__status {
|
|
2863
|
-
|
|
2864
|
-
|
|
2865
|
-
left: 0.75rem;
|
|
2866
|
-
z-index: 2;
|
|
2876
|
+
max-width: 320px;
|
|
2877
|
+
z-index: 4;
|
|
2867
2878
|
padding: 0.5rem 0.75rem;
|
|
2868
2879
|
border-radius: 999px;
|
|
2869
2880
|
background-color: rgba(15, 23, 42, 0.85);
|
|
@@ -2871,6 +2882,40 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
|
|
|
2871
2882
|
font-size: 0.875rem;
|
|
2872
2883
|
line-height: 1.25rem;
|
|
2873
2884
|
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
|
|
2885
|
+
pointer-events: auto;
|
|
2886
|
+
}
|
|
2887
|
+
.canopy-map__key {
|
|
2888
|
+
margin: 1rem;
|
|
2889
|
+
z-index: 1;
|
|
2890
|
+
color: var(--color-gray-900);
|
|
2891
|
+
align-self: flex-end;
|
|
2892
|
+
}
|
|
2893
|
+
.canopy-map__key-list {
|
|
2894
|
+
list-style: none;
|
|
2895
|
+
margin: 0;
|
|
2896
|
+
padding: 0;
|
|
2897
|
+
display: flex;
|
|
2898
|
+
flex-wrap: wrap;
|
|
2899
|
+
gap: 0.382rem 1rem;
|
|
2900
|
+
justify-content: flex-end;
|
|
2901
|
+
}
|
|
2902
|
+
.canopy-map__key-item {
|
|
2903
|
+
display: flex;
|
|
2904
|
+
align-items: center;
|
|
2905
|
+
gap: 0.382rem;
|
|
2906
|
+
font-size: 0.8333rem;
|
|
2907
|
+
line-height: 1.4;
|
|
2908
|
+
font-weight: 400;
|
|
2909
|
+
}
|
|
2910
|
+
.canopy-map__key-dot {
|
|
2911
|
+
width: 12px;
|
|
2912
|
+
height: 12px;
|
|
2913
|
+
border-radius: 999px;
|
|
2914
|
+
background-color: var(--color-accent-default);
|
|
2915
|
+
flex-shrink: 0;
|
|
2916
|
+
}
|
|
2917
|
+
.canopy-map__key-label {
|
|
2918
|
+
flex: 1;
|
|
2874
2919
|
}
|
|
2875
2920
|
.canopy-map__popup {
|
|
2876
2921
|
display: flex;
|
|
@@ -2958,6 +3003,10 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
|
|
|
2958
3003
|
width: auto;
|
|
2959
3004
|
height: auto;
|
|
2960
3005
|
}
|
|
3006
|
+
.canopy-map .leaflet-marker-icon.canopy-map__marker.is-hovered {
|
|
3007
|
+
z-index: 2000 !important;
|
|
3008
|
+
filter: drop-shadow(0 6px 18px rgba(15, 23, 42, 0.45));
|
|
3009
|
+
}
|
|
2961
3010
|
.canopy-map .leaflet-popup {
|
|
2962
3011
|
padding: 1rem 1rem 0;
|
|
2963
3012
|
}
|
|
@@ -2972,6 +3021,9 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
|
|
|
2972
3021
|
justify-content: center;
|
|
2973
3022
|
background: var(--color-gray-900);
|
|
2974
3023
|
}
|
|
3024
|
+
.canopy-map__marker-thumb {
|
|
3025
|
+
border: 2px solid var(--color-accent-600);
|
|
3026
|
+
}
|
|
2975
3027
|
.canopy-map__marker-thumb img {
|
|
2976
3028
|
display: block;
|
|
2977
3029
|
width: 105%;
|
|
@@ -2985,6 +3037,46 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
|
|
|
2985
3037
|
justify-content: center;
|
|
2986
3038
|
background: var(--color-accent-600);
|
|
2987
3039
|
}
|
|
3040
|
+
.canopy-map__marker--label {
|
|
3041
|
+
background: transparent;
|
|
3042
|
+
border: none;
|
|
3043
|
+
}
|
|
3044
|
+
.canopy-map__marker--label.is-hovered .canopy-map__marker-label {
|
|
3045
|
+
background: var(--color-gray-50);
|
|
3046
|
+
}
|
|
3047
|
+
.canopy-map__marker--label.is-hovered .canopy-map__marker-label-text {
|
|
3048
|
+
opacity: 1;
|
|
3049
|
+
}
|
|
3050
|
+
.canopy-map__marker--label.is-hovered .canopy-map__marker-label-text {
|
|
3051
|
+
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
|
|
3052
|
+
}
|
|
3053
|
+
.canopy-map__marker-label {
|
|
3054
|
+
display: inline-flex;
|
|
3055
|
+
align-items: center;
|
|
3056
|
+
font-size: 0.8333rem;
|
|
3057
|
+
font-weight: 400;
|
|
3058
|
+
color: #000;
|
|
3059
|
+
background: rgba(255, 255, 255, 0.8666666667);
|
|
3060
|
+
white-space: nowrap;
|
|
3061
|
+
position: relative;
|
|
3062
|
+
border-radius: 999px;
|
|
3063
|
+
padding-left: 4px;
|
|
3064
|
+
}
|
|
3065
|
+
.canopy-map__marker-label-dot {
|
|
3066
|
+
width: 12px;
|
|
3067
|
+
height: 12px;
|
|
3068
|
+
border-radius: 999px;
|
|
3069
|
+
background-color: var(--color-accent-default);
|
|
3070
|
+
flex-shrink: 0;
|
|
3071
|
+
cursor: default;
|
|
3072
|
+
z-index: 1;
|
|
3073
|
+
}
|
|
3074
|
+
.canopy-map__marker-label-text {
|
|
3075
|
+
padding: 0 0.25rem;
|
|
3076
|
+
line-height: 1.2;
|
|
3077
|
+
color: inherit;
|
|
3078
|
+
cursor: default;
|
|
3079
|
+
}
|
|
2988
3080
|
.canopy-map__cluster-wrapper {
|
|
2989
3081
|
background: none;
|
|
2990
3082
|
border: none;
|
|
@@ -2996,7 +3088,7 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
|
|
|
2996
3088
|
width: 40px;
|
|
2997
3089
|
height: 40px;
|
|
2998
3090
|
border-radius: 999px;
|
|
2999
|
-
background: var(--color-
|
|
3091
|
+
background: var(--color-gray-default);
|
|
3000
3092
|
color: var(--color-gray-50);
|
|
3001
3093
|
display: flex;
|
|
3002
3094
|
align-items: center;
|