source: Klonkt/src/views/pages/download.ejs@ 52fc278

main
Last change on this file since 52fc278 was 52fc278, checked in by roboburr <roboburr@…>, 5 weeks ago

De Krant en de downloadpagina, met het data-kanaal in gebruik (shaer-bqr, stap 3d)

De eerste twee die servergegevens nodig hadden. news gebruikte twee vertalingen,
download een berekende URL.

EEN ONTWERPCORRECTIE die het bouwen opleverde: de gegevens horen gedeclareerd te
worden waar ze BEKEND zijn, niet door de route geregen. fileUrl wordt in de
template zelf berekend, en t() bestaat in een route helemaal niet. Dus geeft de
pagina zijn eigen gegevens mee aan de include:

include('../partials/page-data', { pageData: { fileUrl: fileUrl } })

De route noemt alleen nog de module. Dat scheelt in elke volgende pagina een
omweg langs de route, en het houdt de gegevens naast de plek waar ze vandaan
komen.

Gecontroleerd dat er in GEEN enkele module nog een EJS-tag staat -- dat is de
enige manier om zeker te weten dat er niets stilzwijgend is blijven hangen dat
straks als letterlijke tekst in een statisch bestand belandt.

Templates compileren, suite 565/565.
  • Property mode set to 100644
File size: 3.0 KB
Line 
1<%
2 var _ready_h1 = t('dl.ready_title');
3 var _ready_sub = t('dl.ready_sub');
4 var _manual = t('dl.manual');
5 var _capture_sub = t('dl.capture_sub');
6 var _email_ph = t('dl.email_ph');
7 var _download_btn = t('dl.download_btn');
8%>
9<%
10 var tr = (typeof dlTrack !== 'undefined') ? dlTrack : {};
11 var st = (typeof dlState !== 'undefined') ? dlState : 'form';
12 var fileUrl = siteUrlBase + '/download/' + tr.id + '/bestand';
13%>
14<section class="dl">
15 <div class="dl-card">
16 <div class="dl-head">
17 <% if (tr.cover_url) { %><span class="dl-cover" style="background-image:url('<%= tr.cover_url %>')"></span><% } else { %><span class="dl-cover dl-cover-empty">♪</span><% } %>
18 <div>
19 <div class="dl-title"><%= tr.title %></div>
20 <% if (tr.artist) { %><div class="dl-artist"><%= tr.artist %></div><% } %>
21 </div>
22 </div>
23
24 <% if (st === 'ready') { %>
25 <h1 class="dl-h1"><%= _ready_h1 %></h1>
26 <p class="dl-sub"><%= _ready_sub %></p>
27 <p><a class="dl-go" href="<%= fileUrl %>"><%= _manual %></a></p>
28 <%# Het script staat in assets/js/mod/download.js; de servergegevens gaan via partials/page-data.ejs (shaer-bqr). %>
29 <% } else { %>
30 <h1 class="dl-h1"><%= _download_btn %> <%= tr.title %></h1>
31 <p class="dl-sub"><%= _capture_sub %></p>
32 <% if (typeof dlError !== 'undefined' && dlError) { %><p class="dl-err"><%= dlError %></p><% } %>
33 <form method="POST" action="<%= siteUrlBase %>/download/<%= tr.id %>" class="dl-form">
34 <input type="email" name="email" required placeholder="<%= _email_ph %>" value="<%= (typeof dlPrefill!=='undefined')?dlPrefill:'' %>" autocomplete="email">
35 <button type="submit" class="dl-go">⬇ <%= _download_btn %></button>
36 </form>
37 <% } %>
38 </div>
39</section>
40
41<style>
42 .dl { max-width: 520px; margin: 0 auto; padding: 48px 18px; }
43 .dl-card { border: 1px solid rgba(128,128,128,.2); border-radius: 18px; padding: 28px; }
44 .dl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
45 .dl-cover { width: 56px; height: 56px; border-radius: 10px; background-size: cover; background-position: center; display: grid; place-items: center; flex: 0 0 auto; }
46 .dl-cover-empty { background: var(--accent,#6b8f71); color: #fff; opacity: .85; }
47 .dl-title { font-weight: 700; font-size: 17px; }
48 .dl-artist { opacity: .65; font-size: 13px; }
49 .dl-h1 { font-size: clamp(22px,4.5vw,30px); margin: 0 0 8px; }
50 .dl-sub { opacity: .85; line-height: 1.55; margin: 0 0 18px; }
51 .dl-err { color: #c43c3c; margin: 0 0 12px; }
52 .dl-form { display: flex; gap: 10px; flex-wrap: wrap; }
53 .dl-form input { flex: 1 1 200px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(128,128,128,.4); background: transparent; color: inherit; font-size: 15px; }
54 .dl-go { padding: 12px 20px; border-radius: 10px; border: none; background: var(--accent,#6b8f71); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-block; }
55</style>
56<%- include('../partials/page-data', { pageData: { fileUrl: fileUrl } }) %>
Note: See TracBrowser for help on using the repository browser.