ash-bot/ash-pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix sidebar: both diagrams visible, add arrow key scrolling for remote

Browse Source
This commit is contained in:
Ash
2026-04-22 16:12:40 +00:00
parent 91edd825db
commit a6d91eec4b
2 changed files with 42 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workout/2026-04-22.html
+21 -16
View File
@@ -95,28 +95,24 @@
/* Anatomy sidebar */
.anatomy-column {
width: 380px;
width: 360px;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.anatomy-section {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 12px;
flex: 1;
display: flex;
flex-direction: column;
}
.anatomy-header { margin-bottom: 10px; flex-shrink: 0; }
.anatomy-header { margin-bottom: 10px; }
.anatomy-title { font-size: 0.85rem; color: #f97316; font-weight: 600; }
.anatomy-diagrams {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
}
.diagram-container {
background: #ffffff;
@@ -125,18 +121,13 @@
text-align: center;
border: 2px solid transparent;
transition: all 0.3s ease;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.diagram-container h3 { font-size: 0.7rem; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
.diagram-container h3 { font-size: 0.7rem; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.diagram-container img {
flex: 1;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
max-height: 35vh;
object-fit: contain;
display: block;
margin: 0 auto;
@@ -162,7 +153,7 @@
.exercise-name { font-size: 1.1rem; }
.reps, .weight { font-size: 0.95rem; }
.muscle-tag { font-size: 0.75rem; padding: 3px 10px; }
.anatomy-column { width: 420px; }
.anatomy-column { width: 400px; }
}
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@@ -180,7 +171,7 @@
<div class="main">
<!-- WORKOUT COLUMN -->
<div class="workout-column">
<div class="workout-column" id="workoutColumn">
<!-- Main workout table -->
<div class="section">
<h2>Main Workout</h2>
@@ -348,6 +339,20 @@
<div class="wake-locked" id="wakeLockStatus">Screen locked for workout</div>
<script>
// Remote control: arrow keys scroll workout
const workoutCol = document.getElementById('workoutColumn');
const SCROLL_AMOUNT = 120;
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowDown' || e.key === 'Down') {
e.preventDefault();
workoutCol.scrollBy({ top: SCROLL_AMOUNT, behavior: 'smooth' });
} else if (e.key === 'ArrowUp' || e.key === 'Up') {
e.preventDefault();
workoutCol.scrollBy({ top: -SCROLL_AMOUNT, behavior: 'smooth' });
}
});
// Wake Lock
let wakeLock = null;
async function requestWakeLock() {
workout/template.html
+21 -16
View File
@@ -96,28 +96,24 @@
/* Anatomy sidebar */
.anatomy-column {
width: 380px;
width: 360px;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.anatomy-section {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 12px;
flex: 1;
display: flex;
flex-direction: column;
}
.anatomy-header { margin-bottom: 10px; flex-shrink: 0; }
.anatomy-header { margin-bottom: 10px; }
.anatomy-title { font-size: 0.85rem; color: #f97316; font-weight: 600; }
.anatomy-diagrams {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
}
.diagram-container {
background: #ffffff;
@@ -126,18 +122,13 @@
text-align: center;
border: 2px solid transparent;
transition: all 0.3s ease;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.diagram-container h3 { font-size: 0.7rem; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
.diagram-container h3 { font-size: 0.7rem; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.diagram-container img {
flex: 1;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
max-height: 35vh;
object-fit: contain;
display: block;
margin: 0 auto;
@@ -163,7 +154,7 @@
.exercise-name { font-size: 1.1rem; }
.reps, .weight { font-size: 0.95rem; }
.muscle-tag { font-size: 0.75rem; padding: 3px 10px; }
.anatomy-column { width: 420px; }
.anatomy-column { width: 400px; }
}
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@@ -181,7 +172,7 @@
<div class="main">
<!-- WORKOUT COLUMN -->
<div class="workout-column">
<div class="workout-column" id="workoutColumn">
<!-- Main workout table -->
<div class="section">
<h2>Main Workout</h2>
@@ -223,6 +214,20 @@
<div class="wake-locked" id="wakeLockStatus">Screen locked for workout</div>
<script>
// Remote control: arrow keys scroll workout
const workoutCol = document.getElementById('workoutColumn');
const SCROLL_AMOUNT = 120;
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowDown' || e.key === 'Down') {
e.preventDefault();
workoutCol.scrollBy({ top: SCROLL_AMOUNT, behavior: 'smooth' });
} else if (e.key === 'ArrowUp' || e.key === 'Up') {
e.preventDefault();
workoutCol.scrollBy({ top: -SCROLL_AMOUNT, behavior: 'smooth' });
}
});
// Wake Lock
let wakeLock = null;
async function requestWakeLock() {