From 20dd0de6c072c6f691a2d9c67b7db98c68e09f2f Mon Sep 17 00:00:00 2001 From: Mahesh Asolkar Date: Sun, 23 Mar 2025 12:41:06 -0700 Subject: [PATCH] Better mobile experience --- Workout.js | 59 ++++++++++++++++++++++++++++++++++-------------------- index.html | 3 +++ style.css | 50 ++++++++++++++++++++++++++++++++++++--------- 3 files changed, 80 insertions(+), 32 deletions(-) diff --git a/Workout.js b/Workout.js index fba9713..89ef7fb 100644 --- a/Workout.js +++ b/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(); + }); } } diff --git a/index.html b/index.html index 30ca52f..d03ec1f 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,9 @@ Workout + + + diff --git a/style.css b/style.css index 30fa48b..243ccf8 100644 --- a/style.css +++ b/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 */