@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.
Files changed (16) hide show
  1. package/lib/build/iiif.js +7 -2
  2. package/lib/build/pages.js +20 -2
  3. package/lib/components/navigation.js +21 -0
  4. package/package.json +1 -1
  5. package/ui/dist/index.mjs +524 -204
  6. package/ui/dist/index.mjs.map +4 -4
  7. package/ui/dist/server.mjs +602 -309
  8. package/ui/dist/server.mjs.map +4 -4
  9. package/ui/styles/components/_layout.scss +16 -2
  10. package/ui/styles/components/_nav-tree.scss +67 -0
  11. package/ui/styles/components/_sub-navigation.scss +38 -17
  12. package/ui/styles/components/header/_header.scss +3 -1
  13. package/ui/styles/components/header/_navbar.scss +65 -50
  14. package/ui/styles/components/index.scss +1 -0
  15. package/ui/styles/index.css +168 -67
  16. package/ui/styles/settings/_breakpoints.scss +7 -0
package/ui/styles/components/_layout.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "../settings/breakpoints" as bp;
2
+
1
3
  .canopy-layout {
2
4
  --canopy-layout-sidebar-width: 13rem;
3
5
  --canopy-layout-content-nav-width: 14rem;
@@ -31,8 +33,12 @@
31
33
  position: relative;
32
34
  }
33
35
 
36
+ .canopy-layout__sidebar {
37
+ display: none;
38
+ }
39
+
34
40
  .canopy-layout__content-nav {
35
- display: flex;
41
+ display: none;
36
42
  flex-direction: column;
37
43
  gap: 0.75rem;
38
44
  align-items: stretch;
@@ -51,7 +57,15 @@
51
57
  margin-left: calc(-1 * var(--canopy-layout-column-gap));
52
58
  }
53
59
 
54
- @media (min-width: 70rem) {
60
+ @media (min-width: bp.$canopy-desktop-breakpoint) {
61
+ .canopy-layout__sidebar {
62
+ display: block;
63
+ }
64
+
65
+ .canopy-layout__content-nav {
66
+ display: flex;
67
+ }
68
+
55
69
  .canopy-layout--with-sidebar {
56
70
  grid-template-columns: var(--canopy-layout-sidebar-width) minmax(0, 1fr);
57
71
  }
package/ui/styles/components/_nav-tree.scss ADDED
@@ -0,0 +1,67 @@
1
+ @layer components {
2
+ .canopy-nav-tree {
3
+ color: inherit;
4
+ }
5
+
6
+ .canopy-nav-tree__heading {
7
+ font-weight: 600;
8
+ margin-bottom: 0.618rem;
9
+ }
10
+
11
+ .canopy-nav-tree__list {
12
+ list-style: none;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+
17
+ .canopy-nav-tree__item {
18
+ margin: 0;
19
+ padding: 0;
20
+ list-style: none;
21
+ }
22
+
23
+ .canopy-nav-tree__row {
24
+ display: flex;
25
+ align-items: center;
26
+ gap: 0.25rem;
27
+ }
28
+
29
+ .canopy-nav-tree__row .canopy-nav-tree__link {
30
+ flex: 1;
31
+ min-width: 0;
32
+ }
33
+
34
+ .canopy-nav-tree__link {
35
+ text-decoration: none;
36
+ }
37
+
38
+ .canopy-nav-tree__toggle {
39
+ appearance: none;
40
+ border: none;
41
+ background: transparent;
42
+ padding: 0.25rem;
43
+ margin: -0.25rem;
44
+ display: inline-flex;
45
+ align-items: center;
46
+ justify-content: center;
47
+ }
48
+
49
+ .canopy-nav-tree__toggle:focus-visible {
50
+ outline: 2px solid var(--color-accent-default);
51
+ outline-offset: 2px;
52
+ }
53
+
54
+ .canopy-nav-tree__toggle-icon {
55
+ width: 1.25rem;
56
+ height: 1.25rem;
57
+ transition: transform 150ms ease;
58
+ }
59
+
60
+ .canopy-nav-tree__children {
61
+ margin-top: 0.25rem;
62
+ }
63
+
64
+ .canopy-nav-tree__item[data-expanded='true'] .canopy-nav-tree__toggle-icon {
65
+ transform: rotate(180deg);
66
+ }
67
+ }
package/ui/styles/components/_sub-navigation.scss CHANGED
@@ -2,24 +2,25 @@
2
2
  color: inherit;
3
3
  }
4
4
 
5
- .canopy-sub-navigation__heading {
6
- font-weight: 600;
7
- margin-bottom: 0.618rem;
8
- }
9
-
10
- .canopy-sub-navigation__list {
5
+ .canopy-sub-navigation__list,
6
+ .canopy-sub-navigation__tree .canopy-nav-tree__list,
7
+ .canopy-modal__section-nav .canopy-nav-tree__list {
11
8
  list-style: none;
12
9
  margin: 0;
13
10
  padding: 0;
14
11
  }
15
12
 
16
- .canopy-sub-navigation__item {
13
+ .canopy-sub-navigation__item,
14
+ .canopy-sub-navigation__tree .canopy-nav-tree__item,
15
+ .canopy-modal__section-nav .canopy-nav-tree__item {
17
16
  margin: 0;
18
17
  padding: 0;
19
18
  list-style: none;
20
19
  }
21
20
 
22
- .canopy-sub-navigation__link {
21
+ .canopy-sub-navigation__link,
22
+ .canopy-sub-navigation__tree .canopy-nav-tree__link,
23
+ .canopy-modal__section-nav .canopy-nav-tree__link {
23
24
  display: block;
24
25
  padding: 0.382rem 0.618;
25
26
  border-radius: 0.382rem;
@@ -31,22 +32,29 @@
31
32
  color 120ms ease;
32
33
  }
33
34
 
34
- .canopy-sub-navigation__link:hover {
35
+ .canopy-sub-navigation__link:hover,
36
+ .canopy-sub-navigation__tree .canopy-nav-tree__link:hover,
37
+ .canopy-modal__section-nav .canopy-nav-tree__link:hover {
35
38
  color: var(--color-accent-default);
36
39
  }
37
40
 
38
- .canopy-sub-navigation__link.is-label {
41
+ .canopy-sub-navigation__link.is-label,
42
+ .canopy-sub-navigation__tree .canopy-nav-tree__link.is-label,
43
+ .canopy-modal__section-nav .canopy-nav-tree__link.is-label {
39
44
  cursor: default;
40
45
  color: var(--color-gray-600);
41
46
  }
42
47
 
43
- .canopy-sub-navigation__link.is-disabled {
48
+ .canopy-sub-navigation__link.is-disabled,
49
+ .canopy-sub-navigation__tree .canopy-nav-tree__link.is-disabled,
50
+ .canopy-modal__section-nav .canopy-nav-tree__link.is-disabled {
44
51
  cursor: default;
45
52
  color: var(--color-gray-700);
46
53
  font-style: italic;
47
54
  }
48
55
 
49
- .canopy-sub-navigation__badge {
56
+ .canopy-sub-navigation__badge,
57
+ .canopy-nav-tree__badge {
50
58
  display: inline-flex;
51
59
  align-items: center;
52
60
  justify-content: center;
@@ -66,23 +74,33 @@
66
74
  letter-spacing: -0.0125em;
67
75
  }
68
76
 
69
- .canopy-sub-navigation__link.is-active {
77
+ .canopy-sub-navigation__link.is-active,
78
+ .canopy-sub-navigation__tree .canopy-nav-tree__link.is-active,
79
+ .canopy-modal__section-nav .canopy-nav-tree__link.is-active {
70
80
  color: var(--color-gray-900);
71
81
  font-weight: 600;
72
82
  }
73
83
 
74
- .canopy-sub-navigation__list--nested {
84
+ .canopy-sub-navigation__list--nested,
85
+ .canopy-sub-navigation__tree .canopy-nav-tree__list--nested,
86
+ .canopy-modal__section-nav .canopy-nav-tree__list--nested {
75
87
  margin: 0.382rem 0 0.382rem 0.618rem;
76
88
  padding-left: 0.618rem;
77
89
  border-left: 1px solid var(--color-gray-200);
78
90
  }
79
91
 
80
- .canopy-sub-navigation__link.depth-0 {
92
+ .canopy-sub-navigation__link.depth-0,
93
+ .canopy-sub-navigation__tree .canopy-nav-tree__link.depth-0,
94
+ .canopy-modal__section-nav .canopy-nav-tree__link.depth-0 {
81
95
  padding-left: 0.382rem;
82
96
  }
83
97
 
84
98
  .canopy-sub-navigation__link.depth-1,
85
- .canopy-sub-navigation__link.depth-2 {
99
+ .canopy-sub-navigation__link.depth-2,
100
+ .canopy-sub-navigation__tree .canopy-nav-tree__link.depth-1,
101
+ .canopy-sub-navigation__tree .canopy-nav-tree__link.depth-2,
102
+ .canopy-modal__section-nav .canopy-nav-tree__link.depth-1,
103
+ .canopy-modal__section-nav .canopy-nav-tree__link.depth-2 {
86
104
  padding-left: calc(0.382rem);
87
105
  font-size: 0.9222rem;
88
106
  }
@@ -143,6 +161,9 @@
143
161
  letter-spacing: 0.05em;
144
162
  }
145
163
 
146
- .canopy-content-navigation--collapsed .canopy-sub-navigation__list {
164
+ .canopy-content-navigation--collapsed .canopy-sub-navigation__list,
165
+ .canopy-content-navigation--collapsed
166
+ .canopy-sub-navigation__tree
167
+ .canopy-nav-tree__list {
147
168
  display: none;
148
169
  }
package/ui/styles/components/header/_header.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "../../settings/breakpoints" as bp;
2
+
1
3
  @layer components {
2
4
  .canopy-header {
3
5
  position: relative;
@@ -135,7 +137,7 @@
135
137
  padding: 0.25rem 0;
136
138
  }
137
139
 
138
- @media (min-width: 48rem) {
140
+ @media (min-width: bp.$canopy-desktop-breakpoint) {
139
141
  .canopy-header__menu {
140
142
  display: none;
141
143
  }
package/ui/styles/components/header/_navbar.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "../../settings/breakpoints" as bp;
2
+
1
3
  @layer components {
2
4
  .canopy-nav-links {
3
5
  display: flex;
@@ -6,9 +8,12 @@
6
8
  font-size: 1rem;
7
9
  }
8
10
 
11
+ .canopy-nav-links.canopy-header__desktop-nav {
12
+ display: none;
13
+ }
14
+
9
15
  .canopy-nav-links a {
10
16
  color: var(--color-gray-900);
11
- font-weight: 500;
12
17
  text-decoration: none;
13
18
  padding: 0.25rem 0;
14
19
  transition: color 150ms ease;
@@ -27,86 +32,96 @@
27
32
  .canopy-modal--nav .canopy-modal__body {
28
33
  display: flex;
29
34
  flex-direction: column;
30
- gap: 1.5rem;
35
+ gap: 1rem;
31
36
  }
32
37
 
33
38
  .canopy-modal--nav .canopy-nav-links {
34
39
  flex-direction: column;
35
40
  align-items: stretch;
36
- gap: 0.75rem;
37
- font-size: 1.125rem;
41
+ gap: 0.618rem;
42
+ font-size: 1.111rem;
38
43
  }
39
44
 
40
- .canopy-modal--nav .canopy-nav-links a {
41
- display: block;
42
- padding: 0.75rem 0;
43
- font-weight: 600;
45
+ .canopy-modal__nav-list {
46
+ list-style: none;
47
+ margin: 0;
48
+ padding: 0;
49
+ display: flex;
50
+ flex-direction: column;
51
+ gap: 0.618rem;
44
52
  }
45
53
 
46
- .canopy-modal--nav .canopy-modal__section-nav {
47
- border-top: 1px solid var(--color-gray-200);
48
- padding-top: 1rem;
54
+ .canopy-modal__nav-item {
55
+ margin: 0;
56
+ padding: 0;
57
+ display: flex;
58
+ flex-direction: column;
59
+ gap: 0.5rem;
49
60
  }
50
61
 
51
- .canopy-modal--nav .canopy-modal__section-label {
52
- font-size: 0.75rem;
53
- font-weight: 600;
54
- letter-spacing: 0.04em;
55
- text-transform: uppercase;
56
- color: var(--color-gray-500);
57
- margin-bottom: 0.5rem;
62
+ .canopy-modal__nav-row {
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: space-between;
66
+ gap: 0.5rem;
58
67
  }
59
68
 
60
- .canopy-modal__section-list {
61
- list-style: none;
62
- margin: 0;
63
- padding: 0;
69
+ .canopy-modal__nav-row a {
70
+ flex: 1;
71
+ min-width: 0;
64
72
  }
65
73
 
66
- .canopy-modal__section-item {
67
- margin: 0;
68
- padding: 0;
74
+ .canopy-modal--nav .canopy-nav-links a {
75
+ display: inline-flex;
76
+ align-items: center;
77
+ padding: 0.618rem 0;
69
78
  }
70
79
 
71
- .canopy-modal__section-link {
72
- display: block;
73
- padding: 0.25rem 0;
74
- text-decoration: none;
75
- color: var(--color-gray-900);
76
- font-weight: 500;
80
+ .canopy-modal__nav-toggle {
81
+ appearance: none;
82
+ border: none;
83
+ background: transparent;
84
+ padding: 0.25rem;
85
+ margin: -0.25rem;
86
+ display: inline-flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ color: var(--color-gray-700);
77
90
  }
78
91
 
79
- .canopy-modal__section-link:hover,
80
- .canopy-modal__section-link:focus-visible {
81
- color: var(--color-accent-default);
82
- outline: none;
92
+ .canopy-modal__nav-toggle:focus-visible {
93
+ outline: 2px solid var(--color-accent-default);
94
+ outline-offset: 2px;
83
95
  }
84
96
 
85
- .canopy-modal__section-link.is-active {
86
- font-weight: 600;
97
+ .canopy-modal__nav-toggle-icon {
98
+ width: 1.25rem;
99
+ height: 1.25rem;
100
+ transition: transform 150ms ease;
87
101
  }
88
102
 
89
- .canopy-modal__section-link.is-label {
90
- color: var(--color-gray-600);
91
- font-weight: 600;
92
- cursor: default;
103
+ .canopy-modal__nav-item[data-expanded="true"] .canopy-modal__nav-toggle-icon {
104
+ transform: rotate(180deg);
93
105
  }
94
106
 
95
- .canopy-modal__section-list--nested {
96
- margin: 0.25rem 0 0.25rem 0.75rem;
97
- padding-left: 0.5rem;
98
- border-left: 1px solid var(--color-gray-200);
107
+ .canopy-modal--nav .canopy-modal__section-nav {
108
+ border-top: 1px solid var(--color-gray-200);
109
+ padding-top: 1rem;
99
110
  }
100
111
 
101
- @media (max-width: 48rem) {
102
- .canopy-header__desktop-nav {
103
- display: none;
104
- }
112
+ .canopy-modal__section-nav--nested {
113
+ border-top: none;
114
+ padding-top: 0;
115
+ margin-top: -0.25rem;
105
116
  }
106
117
 
107
- @media (min-width: 48rem) {
118
+ @media (min-width: bp.$canopy-desktop-breakpoint) {
108
119
  .canopy-modal--nav {
109
120
  display: none !important;
110
121
  }
122
+
123
+ .canopy-nav-links.canopy-header__desktop-nav {
124
+ display: flex;
125
+ }
111
126
  }
112
127
  }
package/ui/styles/components/index.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @use "./card";
3
3
  @use "./article-card";
4
4
  @use "./layout";
5
+ @use "./nav-tree";
5
6
  @use "./referenced-items";
6
7
  @use "./bibliography";
7
8
  @use "./header";