diff options
| author | Harald Eilertsen <haraldei@anduin.net> | 2023-10-10 21:10:19 +0200 |
|---|---|---|
| committer | Harald Eilertsen <haraldei@anduin.net> | 2023-10-10 21:10:19 +0200 |
| commit | 51ef51bbe3b741a76d1d44b8ce8c1d8a07427e1f (patch) | |
| tree | 4f2b4b8a0df7669f6de73496be578f6340ade3c3 /index.html.erb | |
| parent | 68e89035e51a3fa6d0a54ee7d5f27259090b101e (diff) | |
| download | ramaskrik-program-master.tar.gz ramaskrik-program-master.tar.bz2 ramaskrik-program-master.zip | |
- Reorg, create lib dir and move room-schedule and events there
- Add .ics template to generate program as an iCalendar stream.
- Add some info to html template, and instructions to html template.
- Add footer to html template, with timestamp for when the view was
generated.
- Fix bug that messed up the layout if the input data was not already
sorted.
- Update readme with usage instructions.
Diffstat (limited to 'index.html.erb')
| -rw-r--r-- | index.html.erb | 136 |
1 files changed, 131 insertions, 5 deletions
diff --git a/index.html.erb b/index.html.erb index f1dfbf0..6b8630e 100644 --- a/index.html.erb +++ b/index.html.erb @@ -1,12 +1,138 @@ <!DOCTYPE html> <html> <head> - <title>Ramaskrik 2018 programoversikt</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta charset="utf-8"> + <title><%= title %></title> +<style> +.events { + display:flex; + justify-content: space-around; + width: 800px; +} +.event-column { + width: 350px; +} +.event-column-inner, +.time-column-inner { + position: relative; +} +.timestamp { + position: absolute; + font-size: 10px; +} +.event-item { + display: flex; + position: absolute; + background-color: #b8afaf; + border: 1px solid #ccc; + padding: 0.3em; + color: #000; + box-sizing: border-box; + width: 100%; + + font-family: Helvetica; + font-size: small; +} +.event-item.selected { + background-color: #709270; +} +.event-item-image { + float: left; + margin-right: 0.3em; +} +.event-item-image img { + width: 3em; + object-fit: cover; +} +</style> </head> <body> - <h1>Ramaskrik 2018 programoversikt</h1> - <% generate_graphs do |graph| %> - <%= graph.burn_svg_only() %> - <% end %> + <h1><%= title %></h1> + <section id="introduction"> + <p>Dette er en annen visning av programmet for skrekkfilmfestivalen + <a href="https://ramaskrik.no">Ramaskrik 2023</a>. Jeg laget det for + meg selv, for å få en bedre oversikt over hvilke filmer som går hvor og når. Offisielt program finner du + på <a href="https://ramaskrik.no/program/">Ramaskrik sine egne websider</a>. Denne siden ble generert + <%= Date.today.strftime('%d.%m.%Y') %>, evt. endringer i programmet etter det er ikke tatt med.</p> + + <p>Du kan merke hvilke filmer du ønsker å se ved å klikke/tappe på de. Siden vil huske hvilke filmer du + har valgt, så du vil kunne bruke denne siden til å planlegge ruten din igjennom festivalen hvis du vil. + (Ingen data sendes til websiden, hvilke filmer du har valgt vil kun lagres i din egen nettleser.)</p> + + <p>Programmet er også tilgjengelig som en kalenderfil. <a href="./program-ramaskrik-2023.ics">Klikk her</a> + for å legge den til i kalenderen din</a>.</p> + + <p>Har du spørsmål, ta kontakt med meg <a href="mailto:haraldei-ramaprogram@anduin.net">via epost</a>.</p> + </section> + <section id="events-list"> + <% eventlist.each do |date, events| %> + <h2><%= date.strftime("%A %d.%m.%Y") %></h2> + <div class="events" style="height: <%= 200 + (events.end_time - events.start_time) / 50 %>px; width: <%= 100 + (events.venues.length * 350) %>px;"> + <% start_time = events.start_time.to_i %> + <% end_time = events.end_time.to_i %> + <% events.venues.sort.each do |venue| %> + <div class="time-column" style="position: relative;"> + <h3>Kl.</h3> + <div class="time-column-inner"> + <% (start_time..end_time).step(3600 / 4) do |time| %> + <div class="timestamp" style="top: <%= (time - start_time).to_i / 50 - 5 %>px; height: 10px;"> + <%= Time.at(time).strftime('%H:%M') %> + </div> + <% end %> + </div> + </div> + <div class="event-column"> + <h3><%= venue %></h2> + <div class="event-column-inner"> + <% events.events.select{ |e| e.venue == venue }.each do |e| %> + <div id="<%= e.slug %>" class="event-item" style="top: <%= e.offset %>px; height: <%= e.height %>px;"> + <div class="event-item-image"> + <% if e.image_url %> + <img src="<%= e.image_url %>"> + <% end %> + </div> + <div class="event-item-meta"> + <div class="event-item-title"><%= e.title %></div> + <div class="event-item-times"> + <time datetime="<%= e.start_time.iso8601 %>"> + <%= e.start_time.strftime('%H:%M') %> + </time> + - + <time datetime="<%= (e.start_time + e.duration).iso8601 %>"> + <%= (e.start_time + e.duration).strftime('%H:%M') %> + </time> + </div> + </div> + </div> + <% end %> + </div> + </div> + <% end %> + </div> + <% end %> + </section> + <section id="footer"> + <p>Denne siden ble generert den <%= DateTime.now.strftime('%d.%m.%Y kl. %H:%M') %> av + <a href="https://code.volse.net/ramaskrik-program.git/">Ramaskrik programoversikt-generator</a> + </section> </body> </html> +<script> + let event_items = document.getElementsByClassName('event-item'); + for (const element of event_items) { + if (localStorage.getItem(element.id) === 'selected') { + element.classList.add('selected'); + } + + element.addEventListener('click', event => { + const result = event.currentTarget.classList.toggle('selected'); + + if (result) { + localStorage.setItem(event.currentTarget.id, 'selected'); + } else { + localStorage.removeItem(event.currentTarget.id); + } + }); + } +</script> |