From: Michael Orlitzky <michael@orlitzky.com>
Date: Wed, 10 Sep 2025 23:58:39 +0000 (-0400)
Subject: index.html.in: fix QR focus for Commuter Bus and MARC train
X-Git-Url: http://gitweb.michael.orlitzky.com/?a=commitdiff_plain;h=162b7dc335ea806c1f3314f0ea06428823becd3d;p=charm-bypass.git

index.html.in: fix QR focus for Commuter Bus and MARC train

These need their initial upwards translations "repeated" when the QR
code is focused and we overwrite the transform attribute with CSS.
The scale() just works, but that's because these ticket start at the
correct scale -- not true of their position.
---

diff --git a/index.html.in b/index.html.in
index 3d02440..005e1d1 100644
--- a/index.html.in
+++ b/index.html.in
@@ -841,7 +841,10 @@
            * second, the scaling is going to affect the translation.
            *
            * The y-translations for the QR code and ticket by contrast
-           * were pretty much chosen on vibes.
+           * were pretty much chosen on vibes. All tickets grow up/down
+           * more or less equal amounts: BaltimoreLink tickets grow the
+           * most, Commuter bus tickets grow a little less, and MARC
+           * train tickets grow only tiny bit.
            *
            * Note: the fucked up spacing around the QR code is there in
            * CharmPass, too -- that's not my fault.
@@ -851,7 +854,22 @@
           const svg_to_client = client_width / svg_width;
           const qr_xoffset = -6.56 * svg_to_client;
           const qr_yoffset = 43 * svg_to_client;
-          const t_yoffset = -40 * svg_to_client;
+
+          /* Overriding the transform attribute with the CSS property
+           * Just Works for the scale() transform, but the "translate"
+           * transform needs some extra help because the Commuter Bus
+           * and MARC Train tickets are not in the right place to begin
+           * with. The relevant magic numbers can be found in the
+           * resize_ticket() function. */
+          const params = new URLSearchParams(document.location.search);
+          let t_yoffset = -40;
+          if (params.get("servicename") === "Commuter Bus") {
+            t_yoffset -= 9.33;
+          }
+          else if (params.get("servicename") === "MARC Train") {
+            t_yoffset -= 67.17;
+          }
+          t_yoffset *= svg_to_client;
 
           /* The _CSS_ translate transform takes comma-separated strings,
            * and is specified in px. */