Several fixes post refactoring.

server/utils/components.py

@@ -23,7 +23,7 @@ def load_sibling_file(base_file_name: str | pathlib.Path, file_name: str) -> str
 
 def _css_vars(selector: str, /, **vars: str) -> str:
     """Generate CSS variables to inject into a stylesheet."""
-    as_css = "\n".join("  --{k.replace('_', '-')}: {v};" for k, v in vars.items())
+    as_css = "\n".join(f"  --{k.replace('_', '-')}: {v};" for k, v in vars.items())
     return f"{selector} {{\n{as_css}\n}}\n"
 
 
@@ -69,7 +69,7 @@ def js(
         as_json = json.dumps(as_camel)
         element = element(data_props=as_json)
     if surreal:
-        text = f"({text})(me(), me('script').dataset.props && JSON.parse(me('script').dataset.props))"  # noqa: E501
+        text = f"({text})(me(), me().querySelector('script').dataset.props && JSON.parse(me().querySelector('script').dataset.props))"  # noqa: E501
     return element[Markup(text)]
 
 

server/vb/components/check_page.css

@@ -92,6 +92,7 @@ me main .urgency {
 }
 
 me main .fireworks {
+  pointer-events: none;
   position: absolute;
   top: 0;
   left: 0;
@@ -112,4 +113,4 @@ me main img {
   me main .urgency {
     flex-direction: row;
   }
-}
+}

server/vb/components/check_page.py

@@ -41,7 +41,7 @@ def check_page(school: School, current_contest: Contest | None) -> h.Element:
                         countdown(current_contest)
                         if current_contest
                         else h.div(".separate")[
-                            h.p["Check your voter registraiton status below."]
+                            h.p["Check your voter registration status below."]
                         ],
                     ]
                 ],

server/vb/components/ongoing_contest.js

@@ -3,7 +3,7 @@
  * 
  * @param {HTMLElement} self 
  * @param {object} props
- * @param {string} props.endAt
+ * @param {string} props.endsAt
  */
 
 function ongoingCountdown(self, props) {
@@ -12,12 +12,12 @@ function ongoingCountdown(self, props) {
    * 
    * @param {HTMLElement} self 
    * @param {object} props
-   * @param {string} props.endAt
+   * @param {string} props.endsAt
    */
   function countdown(self, props) {
     // compute the deadline
-    const { endAt } = props;
-    const deadline = new Date(endAt);
+    const { endsAt } = props;
+    const deadline = new Date(endsAt);
     const deadlineTime = deadline.getTime();
 
     /** Update the countdown. */

server/vb/components/ongoing_contest.py

@@ -27,7 +27,7 @@ def ongoing_contest(contest: Contest) -> h.Element:
                 )["Visit event"]
             ],
         ],
-        h.div(".box", data_end_at=contest.end_at.isoformat())[
+        h.div(".box")[
             js(__file__, "ongoing_contest.js", ends_at=contest.end_at.isoformat()),
             "Ends in ...",
         ],