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 3d024409d845cb34b89bef900983dbe259bd5908..005e1d16a8a4a30513661d8f4c2f301fbc90ecd8 100644 (file)
--- 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. */