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

style home page with shell and card list

Browse source 
apply the new design system to the home page: wrap content in a
container/stack shell with a site-header for the logout and today
links, render the texts list as a vertical stack of cards via the
list-cards primitive, and dress the create plan modal with the new
modal/btn classes. js renders each text as an li.card with the
create-plan button preserved so existing cypress hooks (li,
.create-plan, .plan-name, .save-plan, .cancel-plan, ids) keep
matching.
This commit is contained in:
Yisroel Baum 2026-05-01 11:25:45 +03:00
parent b259a1243e
commit 807458ebe8
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
2 changed files with 36 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

8
public/js/home.js
View file

@ -9,9 +9,11 @@ document.addEventListener('DOMContentLoaded', () => {
const texts = await response.json(); const texts = await response.json();
textsList.innerHTML = texts textsList.innerHTML = texts
.map(text => .map(text =>
'<li>' + text.name + '<li class="card cluster cluster-between">' +
' <button class="create-plan" data-text-id="' + '<span class="text-name">' + text.name + '</span>' +
text.id + '">Create plan</button></li>' '<button class="create-plan btn btn-primary"' +
' data-text-id="' + text.id + '">Create plan</button>' +
'</li>'
) )
.join(''); .join('');
} }

27
views/templates/home.php
View file

@ -7,12 +7,22 @@
<link rel="stylesheet" href="/css/app.css"> <link rel="stylesheet" href="/css/app.css">
</head> </head>
<body> <body>
<header class="site-header">
<div class="site-header-inner">
<h1>Home</h1> <h1>Home</h1>
<button id="logout">Logout</button> <div class="cluster">
<a href="/today">Today's schedule</a> <a class="btn btn-secondary" href="/today">
<ul id="texts-list"> Today's schedule
</ul> </a>
<div id="create-plan-modal" hidden> <button id="logout" class="btn btn-danger">Logout</button>
</div>
</div>
</header>
<main class="container stack-lg">
<ul id="texts-list" class="list-cards"></ul>
</main>
<div id="create-plan-modal" class="modal" hidden>
<div class="modal-content stack">
<h2>Create plan</h2> <h2>Create plan</h2>
<label>Name <label>Name
<input class="plan-name" type="text" /> <input class="plan-name" type="text" />
@ -23,8 +33,11 @@
<label>End date <label>End date
<input class="plan-date-end" type="date" /> <input class="plan-date-end" type="date" />
</label> </label>
<button class="save-plan">Save</button> <div class="cluster cluster-end">
<button class="cancel-plan">Cancel</button> <button class="cancel-plan btn btn-secondary">Cancel</button>
<button class="save-plan btn btn-primary">Save</button>
</div>
</div>
</div> </div>
<script src="/js/auth.js"></script> <script src="/js/auth.js"></script>
<script src="/js/home.js"></script> <script src="/js/home.js"></script>