index.html.in,TODO: reimplement ticket sizing

Reimplement the sizing of the commuter bus and MARC train tickets to
account for the split top and bottom halves of the ticket. This is not
too difficult because, this time around, we take advantage of the
transform-box and transform-origin properties to scale only the bottom
half of the ticket, and only downwards.

The new magic numbers were found by comparing old/new versions of the
page in two separate browser tabs. This also happens to fix the
alignment of the grey ticket separator, because the top half of the
ticket (that contains it) is no longer being scaled

diff --git a/TODO b/TODO
index 4c8e76d46764b2d8003753a9d40b134b811dbaaa..8fa6b4b82604b8fcd58b8ea9df1ed9c3dfa10d97 100644 (file)
--- a/TODO
+++ b/TODO
@@ -15,8 +15,3 @@ look minor to me:
 
 On Android at least, those are the only two changes I saw with a
 BaltimoreLink ticket.
-
-And here's an old one:
-
-  3. The ticket separator doesn't stay aligned with the "cut" after
-     scaling the commuter bus and MARC train tickets.

diff --git a/index.html.in b/index.html.in
index 6813c4b900bd096c077d215fb56364aad3eb0698..4964b04a64eb6428355b27cf476693f88626df4b 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -198,6 +198,15 @@
         animation: citycopyscroll 20s linear infinite;
       }
 
+      /*****************/
+      /* Ticket sizing */
+      /*****************/
+
+      #ticketbottombg {
+        transform-box: fill-box;
+        transform-origin: top; /* scale down only */
+      }
+
       /*****************/
       /* QR code focus */
       /*****************/
@@ -587,21 +596,19 @@
       function resize_ticket() {
         /* Get the "servicename" from the querystring if it's there */
         const params = new URLSearchParams(document.location.search);
-        const tbg = document.getElementById("ticketbg");
+        const tbg = document.getElementById("ticketbottombg");
         const t = document.getElementById("ticket");
         const sn = document.getElementById("servicename");
 
         if (params.get("servicename") === "Commuter Bus") {
-          /* The top of the background is initially at y=246.859, and
-           * we scale it by a factor of 1.12 to y=276.482 for a change
-           * of 29.623. So after we scale it, we translate it upwards
-           * by that amount to put it back where it started. */
-          tbg.setAttribute("transform", "translate(0 -29.623) scale(1 1.12)");
-
-          /* Now translate the entire ticket up by the magic amount, 1/5
-           * of the size change we made to the background. This ratio
-           * was found by measuring pixels in side-by-side screenshots
-           * of BaltimoreLink and Commuter Bus tickets. */
+          /* Scale the bottom part of the ticket (the white background
+           * only) downwards. There's no real motivation for this scale
+           * factor except that, visually, it gives the right result. */
+          tbg.setAttribute("transform", "scale(1 1.16)");
+
+          /* Now translate the entire ticket up by the magic amount.
+           * This number was found by measuring pixels in side-by-side
+           * screenshots of BaltimoreLink and Commuter Bus tickets. */
           t.setAttribute("transform", "translate(0 -9.33)");
 
           /* More magic numbers discovered by comparing the two
@@ -610,8 +617,7 @@
         }
         else if (params.get("servicename") === "MARC Train") {
           /* insane tricks are explained above */
-          tbg.setAttribute("transform",
-                           "translate(0 -72.378) scale(1 1.2932)");
+          tbg.setAttribute("transform", "scale(1 1.395)");
           t.setAttribute("transform", "translate(0 -67.17)");
           sn.setAttribute("transform", "translate(0 131.0)");
         }