From 829f22bb96c8004b89a2c99b5aba296f1731cd3d Mon Sep 17 00:00:00 2001
From: Raphael Paul Laude <raphlaude@gmail.com>
Date: Sat, 24 Feb 2024 21:54:32 -0500
Subject: [PATCH] add about modal

---
 pluto-hist/about.html | 56 +++++++++++++++++++++++++++++++++++++++++++
 pluto-hist/index.html | 11 +++++++++
 pluto-hist/main.js    |  1 +
 pluto-hist/style.css  | 31 ++++++++++++++++++++++++
 4 files changed, 99 insertions(+)
 create mode 100644 pluto-hist/about.html

diff --git a/pluto-hist/about.html b/pluto-hist/about.html
new file mode 100644
index 0000000..a25bf3c
--- /dev/null
+++ b/pluto-hist/about.html
@@ -0,0 +1,56 @@
+<div id="modal" class="uk-modal" style="display: block">
+    <div class="uk-modal-dialog uk-modal-body">
+        <h3 class="uk-modal-title">More about the Parcel ATM</h3>
+        <p>
+            The NYC Parcel ATM is an art project conceived for data through
+            design 2024, an annual data art show in NYC. It surfaces all 22
+            years of NYC's Primary Land Use Tax Lot Output (<a
+                href="https://www.nyc.gov/site/planning/data-maps/open-data/dwn-pluto-mappluto.page"
+                target="_blank"
+                >PLUTO</a
+            >) dataset, going back to 2002.
+        </p>
+        <p>
+            PLUTO is a remarkable dataset. Used by urban planners, developers,
+            researchers, and civic hackers, PLUTO is a digital palimpsest of
+            evolving visions for the city. It offers a rich view into 20+ years
+            of sociopolitical, economic, and regulatory history, as well as
+            chronicling the Department of City Planning’s (DCP) evolving data
+            collection methods.
+        </p>
+
+        <p>
+            The interface you are looking at presents one interpretation of
+            PLUTO. In the future, I hope to collect feedback and make the tool
+            more useful to others. If you have any ideas, please reach out to me
+            by
+            <a
+                href="mailto:
+                raphlaude@gmail.com"
+                >&#9993; email</a
+            >. And if you'd like to analyze the data yourself, check out the
+            full
+            <a
+                href="https://www.nyc.gov/site/planning/data-maps/open-data/bytes-archive.page"
+                target="_blank"
+                >BYTES of the BIG APPLE™ Archive</a
+            >
+        </p>
+        <p>
+            Thank you to the organizers of data through design for putting on
+            such an awesome event and to everyone that gave me feedback along
+            the way.
+        </p>
+
+        <form _="on submit take .uk-open from #modal">
+            <button
+                id="cancelButton"
+                type="button"
+                class="uk-button uk-button-default"
+                _="on click take .uk-open from #modal wait 200ms then remove #modal"
+            >
+                &#x2715; Close
+            </button>
+        </form>
+    </div>
+</div>
diff --git a/pluto-hist/index.html b/pluto-hist/index.html
index cbd8062..7c59476 100644
--- a/pluto-hist/index.html
+++ b/pluto-hist/index.html
@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
         <script src="/htmx.min.js"></script>
+        <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
         <link
             href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"
             rel="stylesheet"
@@ -36,6 +37,16 @@
                 <h1 class="title">NYC Parcel ATM</h1>
             </div>
             <h2 class="subtitle">Exploring PLUTO's 22 year history</h2>
+            <button
+                id="about"
+                hx-get="/about.html"
+                hx-target="#about-modal"
+                class="uk-button uk-button-primary"
+                _="on htmx:afterOnLoad wait 10ms then add .uk-open to #modal"
+            >
+                About this project
+            </button>
+            <div id="about-modal"></div>
             <div style="display: flex; align-items: center; gap: 8px">
                 <button id="prev-year">&larr;</button>
                 <h3 class="title mapquest no-print" id="year">2002</h3>
diff --git a/pluto-hist/main.js b/pluto-hist/main.js
index 5a4f23d..75b4003 100644
--- a/pluto-hist/main.js
+++ b/pluto-hist/main.js
@@ -53,6 +53,7 @@ if (import.meta.env.VITE_KIOSK === "true") {
   document.body.classList.add("kiosk");
   addAttributeToId("controls", "visibility", "visible");
   addAttributeToId("centerMarker", "visibility", "visible");
+  addAttributeToId("about", "display", "none");
 }
 
 class Spinner {
diff --git a/pluto-hist/style.css b/pluto-hist/style.css
index 638d720..ff2d02a 100644
--- a/pluto-hist/style.css
+++ b/pluto-hist/style.css
@@ -82,6 +82,33 @@ h1 {
     margin-top: 0;
 }
 
+#modal {
+    position: absolute;
+    width: 250px;
+    top: 1rem;
+    left: calc(var(--sidebar-width) + 3rem);
+    background-color: var(--bg);
+    color: var(--text-color);
+    padding: var(--box-padding);
+    border: 1px solid #000;
+    border-radius: 0.5rem;
+    z-index: 1000;
+    max-height: calc(100% - 4rem);
+    overflow-y: scroll;
+
+    h3 {
+        font-size: 1em;
+        font-weight: 500;
+        margin: 0 0 0.5em 0;
+        padding: 0;
+    }
+
+    p {
+        font-size: 0.75em;
+        margin: 0 0 1rem 0;
+    }
+}
+
 #year {
     /* position: fixed; */
     /* top: 0.67em; */
@@ -229,6 +256,10 @@ h1 {
         border-bottom: #000 1px solid;
     }
 
+    #modal {
+        left: 1rem;
+    }
+
     #centerMarker {
         left: 50%;
         top: 25%;