apoena.dev / remanso-cli
this repo has no description
fork atom

Subscribe UI improvements

authored by

Heath Stewart and committed by tangled.org eb6c76c2 9f834bf6

+17 -23
+17 -23
docs/src/routes/subscribe.ts
··· 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);