Workout.js

@@ -16,20 +16,9 @@ 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;
 
-    // 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");
+    // // Enable debug
+    // this.show_debug_status = 1;
 }
 
 // ----------
@@ -75,7 +64,6 @@ 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}`;
     }
 }
 
@@ -84,24 +72,27 @@ 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_cb.setAttribute("disabled", true);
     sts_td.appendChild(sts_cb);
-    tblr.appendChild(sts_td);
+    sts_cb.setAttribute("disabled", true);
+
+    // Status
+    let col = sts_td;
+    col.classList.add("col-status");
+    tblr.appendChild(col);
+    el.done = 0;
 
     // Name
-    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;
+    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);
 
     prnt.appendChild(tblr);
 }
@@ -121,7 +112,8 @@ render_set(el, idx) {
     }
     tbl.appendChild(tcap);
 
-    if (this.show_header) {
+    let show_header = 0;
+    if (show_header) {
         // Header of the table
         const tblh = document.createElement("thead");
         const tblhr = document.createElement("tr");
@@ -132,6 +124,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);
 
         tblh.appendChild(tblhr);
         tbl.appendChild(tblh);
@@ -432,13 +427,6 @@ 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,9 +5,6 @@
         <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,46 +18,16 @@
 }
 
 html {
-    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%;
-    }
+    font-family: "Iosevka", monospace;
 }
 
 .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 {
@@ -65,16 +35,13 @@ 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-family: "Boldonse", system-ui;
-    font-weight: 200;
-    font-style: normal;
-
-    font-size: 1.5em;
+    font-size: large;
     text-align: left;
     padding: 7px 7px 7px 10px;
     font-weight: bold;
@@ -107,11 +74,13 @@ html {
 }
 
 .workout-wrapper .set-table .col-status {
-    width: 20%;
+    width: 10%;
 }
 .workout-wrapper .set-table .col-name {
-    width: 80%;
-    font-weight: bold;
+    width: 60%;
+}
+.workout-wrapper .set-table .col-pattern-count {
+    width: 30%;
 }
 
 /* Workout indicator */
@@ -145,6 +114,7 @@ html {
 .workout-wrapper #app_debug_div {
     border: thin dotted blue;
     color: grey;
+    font-size: x-small;
 }
 
 /* Floating Action Buttons */