yisroelbaum/Goal-Calibration
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style today page with shell and card list

Browse source 
wrap the today page in the shared header + container/stack shell,
render scheduled nodes as cards via list-cards, and add a muted
empty-state message that toggles when no nodes are scheduled.
existing #scheduled-nodes-list and li selectors used by cypress
tests are preserved (the empty message lives in its own element).
This commit is contained in:
Yisroel Baum 2026-05-01 11:31:55 +03:00
parent 807458ebe8
commit 2349e69c4f
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
2 changed files with 24 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

12
public/js/today.js
View file

@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
const scheduledNodesList = document.getElementById(
'scheduled-nodes-list'
);
const emptyMessage = document.getElementById('scheduled-nodes-empty');
function todayDateString() {
const today = new Date();
@ -23,10 +24,17 @@ document.addEventListener('DOMContentLoaded', () => {
const scheduledNodes = await response.json();
scheduledNodesList.innerHTML = scheduledNodes
.map((scheduledNode) =>
'<li>' + scheduledNode.planName + ': ' +
scheduledNode.nodeTitle + '</li>'
'<li class="card">' +
'<span class="muted">' + scheduledNode.planName +
'</span>: ' +
'<span class="node-title">' + scheduledNode.nodeTitle +
'</span>' +
'</li>'
)
.join('');
if (emptyMessage !== null) {
emptyMessage.hidden = scheduledNodes.length > 0;
}
}
loadScheduledNodes();

17
views/templates/today.php
View file

@ -7,9 +7,20 @@
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<h1>Today</h1>
<ul id="scheduled-nodes-list">
</ul>
<header class="site-header">
<div class="site-header-inner">
<h1>Today</h1>
<div class="cluster">
<a class="btn btn-secondary" href="/home">Home</a>
</div>
</div>
</header>
<main class="container stack">
<ul id="scheduled-nodes-list" class="list-cards"></ul>
<p id="scheduled-nodes-empty" class="muted" hidden>
Nothing scheduled for today.
</p>
</main>
<script src="/js/auth.js"></script>
<script src="/js/today.js"></script>
</body>