Better mobile experience

Workout.js

@@ -16,9 +16,20 @@ constructor(cont, plan) {
     this.set_repeat_idx = 0;
     this.exercise_idx = 0;
     this.workout_done = 0;
+    this.show_header = 0;
+    this.show_debug_status = 0;
 
-    // // Enable debug
-    // this.show_debug_status = 1;
+    // Dimensions
+    this.vwidth = window.innerWidth;
+    this.vheight = window.innerHeight;
+
+    let qstring = window.location.search;
+    let url_params = new URLSearchParams(qstring);
+
+    // Enable debug
+    this.show_debug_status = url_params.has("dbg");
+    // Enable table header
+    this.show_header = url_params.has("hdr");
 }
 
 // ----------
@@ -64,6 +75,7 @@ update_debug_info() {
         const curr_set_repeat_max_idx = this.plan.set[this.set_idx].count-1;
         const done_str = (this.workout_done === 1) ? "Done " : "";
         dt.textContent = `${done_str}Action: ${this.action} Current: Set-${this.set_idx} [${this.set_repeat_idx}/${curr_set_repeat_max_idx}]/Exercise-${this.exercise_idx}`;
+        dt.textContent += `\nView ${this.vwidth} x ${this.vheight}`;
     }
 }
 
@@ -72,27 +84,24 @@ render_exercise(prnt, el, idx) {
     const tblr = document.createElement("tr");
     tblr.setAttribute("class", `exercise-row exercise-idx-${idx} exercise-pending`);
 
+    // Status
     const sts_td = document.createElement("td");
     const sts_cb = document.createElement("input");
     sts_cb.setAttribute("type", "checkbox");
-    sts_td.appendChild(sts_cb);
     sts_cb.setAttribute("disabled", true);
-
-    // Status
-    let col = sts_td;
-    col.classList.add("col-status");
-    tblr.appendChild(col);
-    el.done = 0;
+    sts_td.appendChild(sts_cb);
+    tblr.appendChild(sts_td);
 
     // Name
-    col = this.text_element("td", el.name);
-    col.classList.add("col-name");
-    tblr.appendChild(col);
-
-    // Pattern/count
-    col = this.text_element("td", `${el.pattern} x ${el.count}`);
-    col.classList.add("col-pattern-count");
-    tblr.appendChild(col);
+    const name_td = document.createElement("td");
+    let ex_name = this.text_element("div", el.name);
+    ex_name.classList.add("col-name");
+    let ex_patt = this.text_element("div", `${el.pattern} x ${el.count}`);
+    ex_patt.classList.add("col-patt");
+    name_td.appendChild(ex_name);
+    name_td.appendChild(ex_patt);
+    tblr.appendChild(name_td);
+    el.done = 0;
 
     prnt.appendChild(tblr);
 }
@@ -112,8 +121,7 @@ render_set(el, idx) {
     }
     tbl.appendChild(tcap);
 
-    let show_header = 0;
-    if (show_header) {
+    if (this.show_header) {
         // Header of the table
         const tblh = document.createElement("thead");
         const tblhr = document.createElement("tr");
@@ -124,9 +132,9 @@ render_set(el, idx) {
         col = this.text_element("th", "Exercise");
         col.classList.add("col-name");
         tblhr.appendChild(col);
-        col = this.text_element("th", "Pattern/Count");
-        col.classList.add("col-pattern-count");
-        tblhr.appendChild(col);
+        // col = this.text_element("th", "Pattern/Count");
+        // col.classList.add("col-pattern-count");
+        // tblhr.appendChild(col);
 
         tblh.appendChild(tblhr);
         tbl.appendChild(tblh);
@@ -427,6 +435,13 @@ render() {
     fab_regress.addEventListener('click', function() {
         app.handle_action('Button-Regress');
     });
+
+    window.addEventListener('resize', function() {
+        // Dimensions
+        app.vwidth = window.innerWidth;
+        app.vheight = window.innerHeight;
+        app.update_debug_info();
+    });
 }
 
 }

index.html

@@ -5,6 +5,9 @@
         <meta name="viewport" content="width=device-width" />
         <title>Workout</title>
 
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Boldonse&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="style.css" />
 
         <script type="text/javascript" src="Workout.js"></script>

style.css

@@ -18,16 +18,46 @@
 }
 
 html {
-    font-family: "Iosevka", monospace;
+    font-family: "Roboto", sans-serif;
+    font-optical-sizing: auto;
+    font-size: 16px;
+}
+
+/* Dimensions for mobile screen */
+.workout-wrapper {
+    width: 90%;
+}
+.workout-wrapper table {
+    width: 97%;
+}
+.workout-wrapper input[type=checkbox] {
+    transform: scale(1.5);
+}
+
+/* Styles for larger screens (e.g., tablets and desktops) */
+@media (min-width: 1200px) {
+    body {
+        font-size: 20px;
+    }
+
+    .workout-wrapper {
+        width: 1200px;
+    }
+    .workout-wrapper table {
+        width: 90%;
+    }
 }
 
 .workout-wrapper {
-    width: 60em;
     margin: auto;
     padding: 1.5em;
 }
 
 .workout-wrapper h1 {
+    font-family: "Boldonse", system-ui;
+    font-weight: 400;
+    font-style: normal;
+
     text-align: center;
 }
 .workout-wrapper table {
@@ -35,13 +65,16 @@ html {
     margin-right: auto;
     margin-top: 2em;
     margin-bottom: 1em;
-    width: 95%;
     border-spacing: 0px;
     border-collapse: collapse;
     box-shadow: 1px 1px 7px var(--table-shadow);
 }
 .workout-wrapper table caption {
-    font-size: large;
+    font-family: "Boldonse", system-ui;
+    font-weight: 200;
+    font-style: normal;
+
+    font-size: 1.5em;
     text-align: left;
     padding: 7px 7px 7px 10px;
     font-weight: bold;
@@ -74,13 +107,11 @@ html {
 }
 
 .workout-wrapper .set-table .col-status {
-    width: 10%;
+    width: 20%;
 }
 .workout-wrapper .set-table .col-name {
-    width: 60%;
-}
-.workout-wrapper .set-table .col-pattern-count {
-    width: 30%;
+    width: 80%;
+    font-weight: bold;
 }
 
 /* Workout indicator */
@@ -114,7 +145,6 @@ html {
 .workout-wrapper #app_debug_div {
     border: thin dotted blue;
     color: grey;
-    font-size: x-small;
 }
 
 /* Floating Action Buttons */