Changelog ad5dc02
survey banner
2 files of code, design or docs +37 −0 lines
Code, design and documents 2 files
src/components/HomePage.astro +28 −0
@@ -5,4 +5,5 @@ import Changes from "../components/Changes.astro"; import ProjectNumbers from "../components/ProjectNumbers.astro"; import Tools from "./Tools.astro"; +import { survey } from "../lib/survey.js"; import AverageChart from "../components/AverageChart.astro"; import { SEGMENTS, DATA_SNAPSHOT, REC_LABEL, REC_ORDER, REC_HELP, MED_LABEL, MED_HELP, countries, regions, worldAvg, lastUpdated, formatDate, subunitsOf, places, trendOf, changeDate, TREND_YEARS } from "../lib/countries.js"; @@ -130,4 +131,13 @@ const columnGroups = [["Shown by default", BASE_COLUMNS], ...["Score segments", {/* The opening: the question, the answer in one number with its history, then what just changed. */} {!view && <section class="front"> + {/* While the yearly survey is open, the page starts with an invitation to it. A browser that + has already answered is shown the way back to its answers instead (see the script). */} + {survey.open && ( + <a class="front-call" id="frontCall" href={`${base}survey/take/`} data-edition={survey.edition}> + <span class="fc-tag">New · {survey.edition}</span> + <span class="fc-text"><strong>State of Cannabis is open.</strong> <span data-fc-more>Tell us how cannabis really is where you live: ten minutes, no account, answers encrypted.</span></span> + <span class="fc-go"><span data-fc-go>Take the survey</span> <span aria-hidden="true">→</span></span> + </a> + )} <p class="eyebrow">Cannabis Freedom Index <span>{DATA_SNAPSHOT} edition</span></p> <h1>How free is cannabis <em>in every country?</em></h1> @@ -375,4 +385,22 @@ const columnGroups = [["Shown by default", BASE_COLUMNS], ...["Score segments", </section>} + {!view && survey.open && ( + <script is:inline> + // Someone who has already answered the survey gets a link to their answers, not an invitation. + (function () { + var a = document.getElementById("frontCall"); + try { + var items = (JSON.parse(localStorage.getItem("cfi-survey-" + a.dataset.edition + "-mine") || "null") || {}).items || []; + if (!items.length) return; + a.href = a.href.replace(/take\/$/, "me/"); + a.querySelector("strong").textContent = "Thank you for answering State of Cannabis."; + a.querySelector("[data-fc-more]").textContent = "You can add places and prices, or change your answers, at any time."; + a.querySelector("[data-fc-go]").textContent = "Your submissions"; + a.querySelector(".fc-tag").textContent = "Survey · " + a.dataset.edition; + } catch (e) {} + })(); + </script> + )} + {!view && <Tools />}
src/styles/global.css +9 −0
@@ -1561,2 +1561,11 @@ button.sv-row .sv-chip { font: 400 10.5px var(--mono); text-transform: uppercase .tools-grid a:hover .tools-go { color: var(--text); } @media (max-width: 900px) { .tools-grid { grid-template-columns: 1fr; } } +/* the invitation to the survey that opens the home page */ +.front-call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; margin: 0 0 clamp(22px, 4vw, 40px); padding: 12px 16px; border: 1px solid var(--text); border-left: 4px solid var(--t4); font-size: 14.5px; } +.front-call:hover { background: var(--surface); } +.fc-tag { padding: 3px 8px; background: var(--t4); color: #0c0c0b; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; border-radius: var(--r); white-space: nowrap; } +.fc-text { color: var(--text-2); text-wrap: pretty; } +.fc-text strong { color: var(--text); font-weight: 600; } +.fc-go { font: 400 11.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } +.front-call:hover .fc-go { text-decoration: underline; text-underline-offset: 4px; } +@media (max-width: 700px) { .front-call { grid-template-columns: 1fr; justify-items: start; } }