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

17
views/templates/today.php
View file

@ -7,9 +7,20 @@
<link rel="stylesheet" href="/css/app.css"> <link rel="stylesheet" href="/css/app.css">
</head> </head>
<body> <body>
<h1>Today</h1> <header class="site-header">
<ul id="scheduled-nodes-list"> <div class="site-header-inner">
</ul> <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/auth.js"></script>
<script src="/js/today.js"></script> <script src="/js/today.js"></script>
</body> </body>