diff options
Diffstat (limited to 'VegaData/wwwroot')
| -rw-r--r-- | VegaData/wwwroot/index.html | 28 | ||||
| -rw-r--r-- | VegaData/wwwroot/index.js | 37 |
2 files changed, 49 insertions, 16 deletions
diff --git a/VegaData/wwwroot/index.html b/VegaData/wwwroot/index.html index 18bd9bc..30056ce 100644 --- a/VegaData/wwwroot/index.html +++ b/VegaData/wwwroot/index.html @@ -5,7 +5,7 @@ <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> - /* @font-face { + @font-face { font-family: 'Broadsheet Italic'; src: url('/Broadsheet Italic/Broadsheet Italic.ttf') format('truetype'); font-weight: normal; @@ -19,7 +19,7 @@ font-weight: normal; font-display: auto; font-style: normal; - } */ + } .italic { font-family: 'Broadsheet Italic', serif; @@ -37,6 +37,11 @@ --bg: beige; } + #search { + padding: 10px 12px; + min-width: 300px; + } + html, body { margin: 0; @@ -44,7 +49,8 @@ background: var(--bg); } - li:target { + li:target, + .activeShow { padding-block: 2rem; padding-inline: 1rem; background-image: url("./17.png"); @@ -57,9 +63,12 @@ } #ulShows { - padding-inline-start: 10px; height: 80vh; - overflow: auto; + overflow-x: auto; + } + + main { + padding-inline: 10px; } .show { @@ -73,6 +82,8 @@ font-weight: 600; position: sticky; top: 0; + overflow-wrap: break-word; + hyphens: manual; background: beige; } } @@ -101,6 +112,11 @@ } } + h1 { + margin: 0; + padding: 10px; + } + ul { list-style: none; margin: 0; @@ -114,7 +130,7 @@ <body> <h1>Bli med på vega?</h1> <main> - <button id="renderShowsBtn">tilbakestill</button> + <button id="renderShowsBtn">tilbakestill</button> <br> <input type="search" name="q1" id="search" placeholder="søk"> <ul id="ulShows"></ul> </main> diff --git a/VegaData/wwwroot/index.js b/VegaData/wwwroot/index.js index ec27f4d..cad938d 100644 --- a/VegaData/wwwroot/index.js +++ b/VegaData/wwwroot/index.js @@ -42,22 +42,24 @@ function dateString(date, small = false) { }); } -function copyLink(e) { +function copyLink(t, e) { + const initialInnerText = t.target.innerText; if ("clipboard" in navigator) { navigator.clipboard.writeText(`${location.origin}/index.html#${urlId(e)}`) + t.target.innerText = `${initialInnerText} ✓` + setTimeout(() => { + t.target.innerText = initialInnerText + }, 1000) } } function vegascene(e) { - if (e.movieVersion.startsWith("KUL")) return `https://www.vegascene.no/teater/${e.movieVersion}` - return `https://www.vegascene.no/film/${e.movieVersion}` + if (e.movieMainVersion.startsWith("KUL")) return `https://www.vegascene.no/teater/${e.movieMainVersion}` + return `https://www.vegascene.no/film/${e.movieMainVersion}` } -if (gqp("q")) search.value = gqp("q") -search.addEventListener("input", e => renderShows(e.currentTarget.value)); - function urlId(e) { - return encodeURIComponent(`${e.movieVersion}-${e.startDateTime}`) + return `${e.movieVersion}${e.startDateTime}`.replaceAll("-", "").replaceAll(" ", "").replaceAll(":", "") } async function renderShows(query = search.value) { @@ -101,7 +103,8 @@ async function renderShows(query = search.value) { t("ul", undefined, [ t("li", undefined, times.filter(e => e.ticketUrl !== "").map(e => { - const tagLine = `${e.scene} - ${[e.type, ...e.tags].join(", ")}` + let tagLine = `${e.scene} - ${[e.type, ...e.tags].join(", ")}` + tagLine = tagLine[0].toUpperCase() + tagLine.slice(1) return t("li", { class: `time time-${e.id}`, id: urlId(e) }, [ t("div", undefined, [ t("span", { title: e.startDateTime }, dateString(e.startDateTime)), @@ -109,7 +112,7 @@ async function renderShows(query = search.value) { t("div", { class: "actions" }, [ t("a", { href: e.ticketUrl }, "Billetter"), "share" in navigator ? t("button", { onclick: () => share(e) }, "Del tid") : null, - t("button", { onclick: () => copyLink(e) }, "Kopier lenke"), + t("button", { onclick: (t) => copyLink(t, e) }, "Kopier lenke"), t("a", { href: vegascene(e) }, "Åpne på vegascene.no") ]) ]) @@ -122,6 +125,20 @@ async function renderShows(query = search.value) { if (!lis.length) ulShows.replaceChildren(...[t("i", undefined, "Dessverre")]) else ulShows.replaceChildren(...lis); + } -renderShows(); +document.addEventListener("DOMContentLoaded", () => { + if (gqp("q")) search.value = gqp("q") + search.addEventListener("input", e => renderShows(e.currentTarget.value)); + renderShows(); + const id = location.href.indexOf("#") !== -1 ? location.href.substring(location.href.indexOf("#")) : "" + document.querySelectorAll(".time").forEach(el => el.classList.remove("activeShow")) + if (id !== "") { + setTimeout(() => { + const target = document.querySelector(id) + target.scrollIntoView({ behavior: "smooth", block: "center" }) + target.classList.add("activeShow") + }, 50) + } +}) |