@internetarchive/ia-topnav 1.1.30 → 1.1.31-heart1
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/package.json +1 -1
- package/src/primary-nav.js +12 -0
- package/src/styles/primary-nav.js +34 -6
package/package.json
CHANGED
package/src/primary-nav.js
CHANGED
|
@@ -142,6 +142,17 @@ class PrimaryNav extends TrackedElement {
|
|
|
142
142
|
`;
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
+
get mobileDonateHeart() {
|
|
146
|
+
return html`
|
|
147
|
+
<a class="mobile-donate-link" href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}>
|
|
148
|
+
<span class="icon ${this.iconClass}">
|
|
149
|
+
${icons.donate}
|
|
150
|
+
</span>
|
|
151
|
+
<span class="label">"Donate to the archive"</span>
|
|
152
|
+
</a>
|
|
153
|
+
`;
|
|
154
|
+
}
|
|
155
|
+
|
|
145
156
|
get secondLogoSlot() {
|
|
146
157
|
return this.allowSecondaryIcon
|
|
147
158
|
? html`
|
|
@@ -170,6 +181,7 @@ class PrimaryNav extends TrackedElement {
|
|
|
170
181
|
>
|
|
171
182
|
${this.secondLogoSlot}
|
|
172
183
|
</div>
|
|
184
|
+
${this.mobileDonateHeart}
|
|
173
185
|
${this.searchMenu}
|
|
174
186
|
<a href="${formatUrl('/create', this.baseHost)}" class="upload">
|
|
175
187
|
${icons.upload}
|
|
@@ -12,9 +12,9 @@ export default css`
|
|
|
12
12
|
display: -ms-grid;
|
|
13
13
|
display: grid;
|
|
14
14
|
height: 4rem;
|
|
15
|
-
grid-template-areas: 'hamburger empty search user';
|
|
16
|
-
-ms-grid-columns: 4rem minmax(1rem, 100%) 4.3rem 4rem;
|
|
17
|
-
grid-template-columns: 4rem auto 4.3rem 4rem;
|
|
15
|
+
grid-template-areas: 'hamburger empty heart search user';
|
|
16
|
+
-ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4.3rem 4rem;
|
|
17
|
+
grid-template-columns: 4rem auto 4rem 4.3rem 4rem;
|
|
18
18
|
-ms-grid-rows: 100%;
|
|
19
19
|
grid-template-rows: 100%;
|
|
20
20
|
background: var(--primaryNavBg);
|
|
@@ -62,9 +62,36 @@ export default css`
|
|
|
62
62
|
padding: 0;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
.
|
|
65
|
+
.mobile-donate-link {
|
|
66
66
|
-ms-grid-row: 1;
|
|
67
67
|
-ms-grid-column: 3;
|
|
68
|
+
grid-area: heart;
|
|
69
|
+
position: relative;
|
|
70
|
+
padding: 0;
|
|
71
|
+
z-index: 1;
|
|
72
|
+
width: 100%;
|
|
73
|
+
text-align: right;
|
|
74
|
+
-webkit-box-align: center;
|
|
75
|
+
-ms-flex-align: center;
|
|
76
|
+
align-items: center;
|
|
77
|
+
}
|
|
78
|
+
.mobile-donate-link .fill-color {
|
|
79
|
+
fill: rgb(255, 0, 0);
|
|
80
|
+
}
|
|
81
|
+
.mobile-donate-link .label {
|
|
82
|
+
position: absolute;
|
|
83
|
+
width: 1px;
|
|
84
|
+
height: 1px;
|
|
85
|
+
padding: 0;
|
|
86
|
+
margin: -1px;
|
|
87
|
+
overflow: hidden;
|
|
88
|
+
clip: rect(0,0,0,0);
|
|
89
|
+
border: 0;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.search-trigger {
|
|
93
|
+
-ms-grid-row: 1;
|
|
94
|
+
-ms-grid-column: 4;
|
|
68
95
|
grid-area: search;
|
|
69
96
|
position: relative;
|
|
70
97
|
padding: 0;
|
|
@@ -95,7 +122,7 @@ export default css`
|
|
|
95
122
|
|
|
96
123
|
.user-info {
|
|
97
124
|
-ms-grid-row: 1;
|
|
98
|
-
-ms-grid-column:
|
|
125
|
+
-ms-grid-column: 5;
|
|
99
126
|
grid-area: user;
|
|
100
127
|
-ms-grid-row-align: stretch;
|
|
101
128
|
align-self: stretch;
|
|
@@ -181,7 +208,8 @@ export default css`
|
|
|
181
208
|
}
|
|
182
209
|
|
|
183
210
|
.hamburger,
|
|
184
|
-
.search-trigger
|
|
211
|
+
.search-trigger,
|
|
212
|
+
.mobile-donate-link {
|
|
185
213
|
display: none;
|
|
186
214
|
}
|
|
187
215
|
|