@canopy-iiif/app 1.5.9 → 1.5.10
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/iiif.js +7 -2
- package/lib/build/pages.js +20 -2
- package/lib/components/navigation.js +21 -0
- package/package.json +1 -1
- package/ui/dist/index.mjs +524 -204
- package/ui/dist/index.mjs.map +4 -4
- package/ui/dist/server.mjs +602 -309
- package/ui/dist/server.mjs.map +4 -4
- package/ui/styles/components/_layout.scss +16 -2
- package/ui/styles/components/_nav-tree.scss +67 -0
- package/ui/styles/components/_sub-navigation.scss +38 -17
- package/ui/styles/components/header/_header.scss +3 -1
- package/ui/styles/components/header/_navbar.scss +65 -50
- package/ui/styles/components/index.scss +1 -0
- package/ui/styles/index.css +168 -67
- package/ui/styles/settings/_breakpoints.scss +7 -0
package/ui/styles/index.css
CHANGED
|
@@ -339,6 +339,11 @@ section[data-footnotes] ul li,
|
|
|
339
339
|
border-radius: 0.2rem;
|
|
340
340
|
}
|
|
341
341
|
|
|
342
|
+
@layer base {
|
|
343
|
+
:root {
|
|
344
|
+
--canopy-desktop-breakpoint: 70rem;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
342
347
|
.canopy-layout {
|
|
343
348
|
--canopy-layout-sidebar-width: 13rem;
|
|
344
349
|
--canopy-layout-content-nav-width: 14rem;
|
|
@@ -372,8 +377,12 @@ section[data-footnotes] ul li,
|
|
|
372
377
|
position: relative;
|
|
373
378
|
}
|
|
374
379
|
|
|
380
|
+
.canopy-layout__sidebar {
|
|
381
|
+
display: none;
|
|
382
|
+
}
|
|
383
|
+
|
|
375
384
|
.canopy-layout__content-nav {
|
|
376
|
-
display:
|
|
385
|
+
display: none;
|
|
377
386
|
flex-direction: column;
|
|
378
387
|
gap: 0.75rem;
|
|
379
388
|
align-items: stretch;
|
|
@@ -393,6 +402,12 @@ section[data-footnotes] ul li,
|
|
|
393
402
|
}
|
|
394
403
|
|
|
395
404
|
@media (min-width: 70rem) {
|
|
405
|
+
.canopy-layout__sidebar {
|
|
406
|
+
display: block;
|
|
407
|
+
}
|
|
408
|
+
.canopy-layout__content-nav {
|
|
409
|
+
display: flex;
|
|
410
|
+
}
|
|
396
411
|
.canopy-layout--with-sidebar {
|
|
397
412
|
grid-template-columns: var(--canopy-layout-sidebar-width) minmax(0, 1fr);
|
|
398
413
|
}
|
|
@@ -403,6 +418,62 @@ section[data-footnotes] ul li,
|
|
|
403
418
|
grid-template-columns: var(--canopy-layout-sidebar-width) minmax(0, 1fr) var(--canopy-layout-content-nav-width);
|
|
404
419
|
}
|
|
405
420
|
}
|
|
421
|
+
@layer components {
|
|
422
|
+
.canopy-nav-tree {
|
|
423
|
+
color: inherit;
|
|
424
|
+
}
|
|
425
|
+
.canopy-nav-tree__heading {
|
|
426
|
+
font-weight: 600;
|
|
427
|
+
margin-bottom: 0.618rem;
|
|
428
|
+
}
|
|
429
|
+
.canopy-nav-tree__list {
|
|
430
|
+
list-style: none;
|
|
431
|
+
margin: 0;
|
|
432
|
+
padding: 0;
|
|
433
|
+
}
|
|
434
|
+
.canopy-nav-tree__item {
|
|
435
|
+
margin: 0;
|
|
436
|
+
padding: 0;
|
|
437
|
+
list-style: none;
|
|
438
|
+
}
|
|
439
|
+
.canopy-nav-tree__row {
|
|
440
|
+
display: flex;
|
|
441
|
+
align-items: center;
|
|
442
|
+
gap: 0.25rem;
|
|
443
|
+
}
|
|
444
|
+
.canopy-nav-tree__row .canopy-nav-tree__link {
|
|
445
|
+
flex: 1;
|
|
446
|
+
min-width: 0;
|
|
447
|
+
}
|
|
448
|
+
.canopy-nav-tree__link {
|
|
449
|
+
text-decoration: none;
|
|
450
|
+
}
|
|
451
|
+
.canopy-nav-tree__toggle {
|
|
452
|
+
appearance: none;
|
|
453
|
+
border: none;
|
|
454
|
+
background: transparent;
|
|
455
|
+
padding: 0.25rem;
|
|
456
|
+
margin: -0.25rem;
|
|
457
|
+
display: inline-flex;
|
|
458
|
+
align-items: center;
|
|
459
|
+
justify-content: center;
|
|
460
|
+
}
|
|
461
|
+
.canopy-nav-tree__toggle:focus-visible {
|
|
462
|
+
outline: 2px solid var(--color-accent-default);
|
|
463
|
+
outline-offset: 2px;
|
|
464
|
+
}
|
|
465
|
+
.canopy-nav-tree__toggle-icon {
|
|
466
|
+
width: 1.25rem;
|
|
467
|
+
height: 1.25rem;
|
|
468
|
+
transition: transform 150ms ease;
|
|
469
|
+
}
|
|
470
|
+
.canopy-nav-tree__children {
|
|
471
|
+
margin-top: 0.25rem;
|
|
472
|
+
}
|
|
473
|
+
.canopy-nav-tree__item[data-expanded=true] .canopy-nav-tree__toggle-icon {
|
|
474
|
+
transform: rotate(180deg);
|
|
475
|
+
}
|
|
476
|
+
}
|
|
406
477
|
.referenced-items {
|
|
407
478
|
margin: clamp(2rem, 6vw, 4rem) 0;
|
|
408
479
|
width: 100%;
|
|
@@ -677,7 +748,7 @@ section[data-footnotes] ul li,
|
|
|
677
748
|
.canopy-modal--search .canopy-search-teaser > #cplist {
|
|
678
749
|
padding: 0.25rem 0;
|
|
679
750
|
}
|
|
680
|
-
@media (min-width:
|
|
751
|
+
@media (min-width: 70rem) {
|
|
681
752
|
.canopy-header__menu {
|
|
682
753
|
display: none;
|
|
683
754
|
}
|
|
@@ -738,9 +809,11 @@ section[data-footnotes] ul li,
|
|
|
738
809
|
gap: 1rem;
|
|
739
810
|
font-size: 1rem;
|
|
740
811
|
}
|
|
812
|
+
.canopy-nav-links.canopy-header__desktop-nav {
|
|
813
|
+
display: none;
|
|
814
|
+
}
|
|
741
815
|
.canopy-nav-links a {
|
|
742
816
|
color: var(--color-gray-900);
|
|
743
|
-
font-weight: 500;
|
|
744
817
|
text-decoration: none;
|
|
745
818
|
padding: 0.25rem 0;
|
|
746
819
|
transition: color 150ms ease;
|
|
@@ -756,74 +829,83 @@ section[data-footnotes] ul li,
|
|
|
756
829
|
.canopy-modal--nav .canopy-modal__body {
|
|
757
830
|
display: flex;
|
|
758
831
|
flex-direction: column;
|
|
759
|
-
gap:
|
|
832
|
+
gap: 1rem;
|
|
760
833
|
}
|
|
761
834
|
.canopy-modal--nav .canopy-nav-links {
|
|
762
835
|
flex-direction: column;
|
|
763
836
|
align-items: stretch;
|
|
764
|
-
gap: 0.
|
|
765
|
-
font-size: 1.
|
|
766
|
-
}
|
|
767
|
-
.canopy-modal--nav .canopy-nav-links a {
|
|
768
|
-
display: block;
|
|
769
|
-
padding: 0.75rem 0;
|
|
770
|
-
font-weight: 600;
|
|
771
|
-
}
|
|
772
|
-
.canopy-modal--nav .canopy-modal__section-nav {
|
|
773
|
-
border-top: 1px solid var(--color-gray-200);
|
|
774
|
-
padding-top: 1rem;
|
|
775
|
-
}
|
|
776
|
-
.canopy-modal--nav .canopy-modal__section-label {
|
|
777
|
-
font-size: 0.75rem;
|
|
778
|
-
font-weight: 600;
|
|
779
|
-
letter-spacing: 0.04em;
|
|
780
|
-
text-transform: uppercase;
|
|
781
|
-
color: var(--color-gray-500);
|
|
782
|
-
margin-bottom: 0.5rem;
|
|
837
|
+
gap: 0.618rem;
|
|
838
|
+
font-size: 1.111rem;
|
|
783
839
|
}
|
|
784
|
-
.canopy-
|
|
840
|
+
.canopy-modal__nav-list {
|
|
785
841
|
list-style: none;
|
|
786
842
|
margin: 0;
|
|
787
843
|
padding: 0;
|
|
844
|
+
display: flex;
|
|
845
|
+
flex-direction: column;
|
|
846
|
+
gap: 0.618rem;
|
|
788
847
|
}
|
|
789
|
-
.canopy-
|
|
848
|
+
.canopy-modal__nav-item {
|
|
790
849
|
margin: 0;
|
|
791
850
|
padding: 0;
|
|
851
|
+
display: flex;
|
|
852
|
+
flex-direction: column;
|
|
853
|
+
gap: 0.5rem;
|
|
792
854
|
}
|
|
793
|
-
.canopy-
|
|
794
|
-
display:
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
font-weight: 500;
|
|
855
|
+
.canopy-modal__nav-row {
|
|
856
|
+
display: flex;
|
|
857
|
+
align-items: center;
|
|
858
|
+
justify-content: space-between;
|
|
859
|
+
gap: 0.5rem;
|
|
799
860
|
}
|
|
800
|
-
.canopy-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
outline: none;
|
|
861
|
+
.canopy-modal__nav-row a {
|
|
862
|
+
flex: 1;
|
|
863
|
+
min-width: 0;
|
|
804
864
|
}
|
|
805
|
-
.canopy-
|
|
806
|
-
|
|
865
|
+
.canopy-modal--nav .canopy-nav-links a {
|
|
866
|
+
display: inline-flex;
|
|
867
|
+
align-items: center;
|
|
868
|
+
padding: 0.618rem 0;
|
|
807
869
|
}
|
|
808
|
-
.canopy-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
870
|
+
.canopy-modal__nav-toggle {
|
|
871
|
+
appearance: none;
|
|
872
|
+
border: none;
|
|
873
|
+
background: transparent;
|
|
874
|
+
padding: 0.25rem;
|
|
875
|
+
margin: -0.25rem;
|
|
876
|
+
display: inline-flex;
|
|
877
|
+
align-items: center;
|
|
878
|
+
justify-content: center;
|
|
879
|
+
color: var(--color-gray-700);
|
|
812
880
|
}
|
|
813
|
-
.canopy-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
border-left: 1px solid var(--color-gray-200);
|
|
881
|
+
.canopy-modal__nav-toggle:focus-visible {
|
|
882
|
+
outline: 2px solid var(--color-accent-default);
|
|
883
|
+
outline-offset: 2px;
|
|
817
884
|
}
|
|
818
|
-
|
|
819
|
-
.
|
|
820
|
-
|
|
821
|
-
|
|
885
|
+
.canopy-modal__nav-toggle-icon {
|
|
886
|
+
width: 1.25rem;
|
|
887
|
+
height: 1.25rem;
|
|
888
|
+
transition: transform 150ms ease;
|
|
822
889
|
}
|
|
823
|
-
|
|
890
|
+
.canopy-modal__nav-item[data-expanded=true] .canopy-modal__nav-toggle-icon {
|
|
891
|
+
transform: rotate(180deg);
|
|
892
|
+
}
|
|
893
|
+
.canopy-modal--nav .canopy-modal__section-nav {
|
|
894
|
+
border-top: 1px solid var(--color-gray-200);
|
|
895
|
+
padding-top: 1rem;
|
|
896
|
+
}
|
|
897
|
+
.canopy-modal__section-nav--nested {
|
|
898
|
+
border-top: none;
|
|
899
|
+
padding-top: 0;
|
|
900
|
+
margin-top: -0.25rem;
|
|
901
|
+
}
|
|
902
|
+
@media (min-width: 70rem) {
|
|
824
903
|
.canopy-modal--nav {
|
|
825
904
|
display: none !important;
|
|
826
905
|
}
|
|
906
|
+
.canopy-nav-links.canopy-header__desktop-nav {
|
|
907
|
+
display: flex;
|
|
908
|
+
}
|
|
827
909
|
}
|
|
828
910
|
}
|
|
829
911
|
@layer components {
|
|
@@ -2065,24 +2147,25 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
|
|
|
2065
2147
|
color: inherit;
|
|
2066
2148
|
}
|
|
2067
2149
|
|
|
2068
|
-
.canopy-sub-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
}
|
|
2072
|
-
|
|
2073
|
-
.canopy-sub-navigation__list {
|
|
2150
|
+
.canopy-sub-navigation__list,
|
|
2151
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__list,
|
|
2152
|
+
.canopy-modal__section-nav .canopy-nav-tree__list {
|
|
2074
2153
|
list-style: none;
|
|
2075
2154
|
margin: 0;
|
|
2076
2155
|
padding: 0;
|
|
2077
2156
|
}
|
|
2078
2157
|
|
|
2079
|
-
.canopy-sub-navigation__item
|
|
2158
|
+
.canopy-sub-navigation__item,
|
|
2159
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__item,
|
|
2160
|
+
.canopy-modal__section-nav .canopy-nav-tree__item {
|
|
2080
2161
|
margin: 0;
|
|
2081
2162
|
padding: 0;
|
|
2082
2163
|
list-style: none;
|
|
2083
2164
|
}
|
|
2084
2165
|
|
|
2085
|
-
.canopy-sub-navigation__link
|
|
2166
|
+
.canopy-sub-navigation__link,
|
|
2167
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link,
|
|
2168
|
+
.canopy-modal__section-nav .canopy-nav-tree__link {
|
|
2086
2169
|
display: block;
|
|
2087
2170
|
padding: 0.382rem 0.618;
|
|
2088
2171
|
border-radius: 0.382rem;
|
|
@@ -2092,22 +2175,29 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
|
|
|
2092
2175
|
transition: background-color 120ms ease, color 120ms ease;
|
|
2093
2176
|
}
|
|
2094
2177
|
|
|
2095
|
-
.canopy-sub-navigation__link:hover
|
|
2178
|
+
.canopy-sub-navigation__link:hover,
|
|
2179
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link:hover,
|
|
2180
|
+
.canopy-modal__section-nav .canopy-nav-tree__link:hover {
|
|
2096
2181
|
color: var(--color-accent-default);
|
|
2097
2182
|
}
|
|
2098
2183
|
|
|
2099
|
-
.canopy-sub-navigation__link.is-label
|
|
2184
|
+
.canopy-sub-navigation__link.is-label,
|
|
2185
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.is-label,
|
|
2186
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.is-label {
|
|
2100
2187
|
cursor: default;
|
|
2101
2188
|
color: var(--color-gray-600);
|
|
2102
2189
|
}
|
|
2103
2190
|
|
|
2104
|
-
.canopy-sub-navigation__link.is-disabled
|
|
2191
|
+
.canopy-sub-navigation__link.is-disabled,
|
|
2192
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.is-disabled,
|
|
2193
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.is-disabled {
|
|
2105
2194
|
cursor: default;
|
|
2106
2195
|
color: var(--color-gray-700);
|
|
2107
2196
|
font-style: italic;
|
|
2108
2197
|
}
|
|
2109
2198
|
|
|
2110
|
-
.canopy-sub-navigation__badge
|
|
2199
|
+
.canopy-sub-navigation__badge,
|
|
2200
|
+
.canopy-nav-tree__badge {
|
|
2111
2201
|
display: inline-flex;
|
|
2112
2202
|
align-items: center;
|
|
2113
2203
|
justify-content: center;
|
|
@@ -2127,23 +2217,33 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
|
|
|
2127
2217
|
letter-spacing: -0.0125em;
|
|
2128
2218
|
}
|
|
2129
2219
|
|
|
2130
|
-
.canopy-sub-navigation__link.is-active
|
|
2220
|
+
.canopy-sub-navigation__link.is-active,
|
|
2221
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.is-active,
|
|
2222
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.is-active {
|
|
2131
2223
|
color: var(--color-gray-900);
|
|
2132
2224
|
font-weight: 600;
|
|
2133
2225
|
}
|
|
2134
2226
|
|
|
2135
|
-
.canopy-sub-navigation__list--nested
|
|
2227
|
+
.canopy-sub-navigation__list--nested,
|
|
2228
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__list--nested,
|
|
2229
|
+
.canopy-modal__section-nav .canopy-nav-tree__list--nested {
|
|
2136
2230
|
margin: 0.382rem 0 0.382rem 0.618rem;
|
|
2137
2231
|
padding-left: 0.618rem;
|
|
2138
2232
|
border-left: 1px solid var(--color-gray-200);
|
|
2139
2233
|
}
|
|
2140
2234
|
|
|
2141
|
-
.canopy-sub-navigation__link.depth-0
|
|
2235
|
+
.canopy-sub-navigation__link.depth-0,
|
|
2236
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.depth-0,
|
|
2237
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.depth-0 {
|
|
2142
2238
|
padding-left: 0.382rem;
|
|
2143
2239
|
}
|
|
2144
2240
|
|
|
2145
2241
|
.canopy-sub-navigation__link.depth-1,
|
|
2146
|
-
.canopy-sub-navigation__link.depth-2
|
|
2242
|
+
.canopy-sub-navigation__link.depth-2,
|
|
2243
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.depth-1,
|
|
2244
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.depth-2,
|
|
2245
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.depth-1,
|
|
2246
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.depth-2 {
|
|
2147
2247
|
padding-left: 0.382rem;
|
|
2148
2248
|
font-size: 0.9222rem;
|
|
2149
2249
|
}
|
|
@@ -2196,7 +2296,8 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
|
|
|
2196
2296
|
letter-spacing: 0.05em;
|
|
2197
2297
|
}
|
|
2198
2298
|
|
|
2199
|
-
.canopy-content-navigation--collapsed .canopy-sub-navigation__list
|
|
2299
|
+
.canopy-content-navigation--collapsed .canopy-sub-navigation__list,
|
|
2300
|
+
.canopy-content-navigation--collapsed .canopy-sub-navigation__tree .canopy-nav-tree__list {
|
|
2200
2301
|
display: none;
|
|
2201
2302
|
}
|
|
2202
2303
|
|