Subscribe UI improvements
eb6c76c2
1 file(s) · +17 −23
| 215 | 215 | <p class="vocs_Paragraph">Enter your Bluesky handle to subscribe to this publication.</p> |
|
| 216 | 216 | ${errorHtml} |
|
| 217 | 217 | <form method="POST" action="/subscribe/login"> |
|
| 218 | - | <input type="hidden" name="publicationUri" value="${escapeHtml(publicationUri)}" /> |
|
| 219 | - | <label> |
|
| 220 | - | Bluesky handle |
|
| 221 | - | <input |
|
| 222 | - | type="text" |
|
| 223 | - | name="handle" |
|
| 224 | - | placeholder="you.bsky.social" |
|
| 225 | - | autocomplete="username" |
|
| 226 | - | required |
|
| 227 | - | autofocus |
|
| 228 | - | /> |
|
| 229 | - | </label> |
|
| 218 | + | <input type="hidden" name="publicationUri" value="${escapeHtml(publicationUri)}" /> |
|
| 219 | + | <input |
|
| 220 | + | type="text" |
|
| 221 | + | name="handle" |
|
| 222 | + | placeholder="you.bsky.social" |
|
| 223 | + | autocomplete="username" |
|
| 224 | + | required |
|
| 225 | + | autofocus |
|
| 226 | + | /> |
|
| 230 | 227 | <button type="submit" class="vocs_Button_button vocs_Button_button_accent">Continue on Bluesky</button> |
|
| 231 | 228 | </form> |
|
| 232 | 229 | `, styleHref); |
|
| 241 | 238 | const msg = existing |
|
| 242 | 239 | ? "You're already subscribed to this publication." |
|
| 243 | 240 | : "You've successfully subscribed!"; |
|
| 241 | + | const escapedPublicationUri = escapeHtml(publicationUri); |
|
| 242 | + | const escapedRecordUri = escapeHtml(recordUri); |
|
| 244 | 243 | return page(` |
|
| 245 | 244 | <h1 class="vocs_H1 vocs_Heading">Subscribed ✓</h1> |
|
| 246 | 245 | <p class="vocs_Paragraph">${msg}</p> |
|
| 247 | - | <p class="vocs_Paragraph"><small>Publication: <code class="vocs_Code">${escapeHtml(publicationUri)}</code></small></p> |
|
| 248 | - | <p class="vocs_Paragraph"><small>Record: <code class="vocs_Code">${escapeHtml(recordUri)}</code></small></p> |
|
| 246 | + | <p class="vocs_Paragraph"><small>Publication: <code class="vocs_Code"><a href="https://pds.ls/${escapedPublicationUri}">${escapedPublicationUri}</a></code></small></p> |
|
| 247 | + | <p class="vocs_Paragraph"><small>Record: <code class="vocs_Code"><a href="https://pds.ls/${escapedRecordUri}">${escapedRecordUri}</a></code></small></p> |
|
| 249 | 248 | `, styleHref); |
|
| 250 | 249 | } |
|
| 251 | 250 | ||
| 264 | 263 | <script>if(window.matchMedia('(prefers-color-scheme: dark)').matches)document.documentElement.classList.add('dark')</script> |
|
| 265 | 264 | <style> |
|
| 266 | 265 | .page-container { |
|
| 267 | - | max-width: 480px; |
|
| 266 | + | max-width: calc(var(--vocs-content_width, 480px) / 1.6); |
|
| 268 | 267 | margin: 4rem auto; |
|
| 269 | 268 | padding: 0 var(--vocs-space_20, 1.25rem); |
|
| 270 | 269 | } |
|
| 271 | 270 | .vocs_Heading { margin-bottom: var(--vocs-space_12, .75rem); } |
|
| 272 | 271 | .vocs_Paragraph { margin-bottom: var(--vocs-space_16, 1rem); } |
|
| 273 | - | label { |
|
| 274 | - | display: flex; |
|
| 275 | - | flex-direction: column; |
|
| 276 | - | gap: var(--vocs-space_6, .375rem); |
|
| 277 | - | margin-bottom: var(--vocs-space_20, 1.25rem); |
|
| 278 | - | font-weight: var(--vocs-fontWeight_medium, 400); |
|
| 279 | - | font-size: var(--vocs-fontSize_15, .9375rem); |
|
| 280 | - | } |
|
| 281 | 272 | input[type="text"] { |
|
| 282 | 273 | padding: var(--vocs-space_8, .5rem) var(--vocs-space_12, .75rem); |
|
| 283 | 274 | border: 1px solid var(--vocs-color_border, #D5D1C8); |
|
| 284 | 275 | border-radius: var(--vocs-borderRadius_6, 6px); |
|
| 276 | + | margin-bottom: var(--vocs-space_20, 1.25rem); |
|
| 277 | + | min-width: 30vh; |
|
| 278 | + | width: 100%; |
|
| 285 | 279 | font-size: var(--vocs-fontSize_16, 1rem); |
|
| 286 | 280 | font-family: inherit; |
|
| 287 | 281 | background: var(--vocs-color_background, #F5F3EF); |
|