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

style admin texts page with card list and form

Browse source 
apply the page shell to the admin texts page and present each
existing text as a card-link plus the new-text form as a card with
a primary submit button. ids (#texts-list, #newTextName, #submit,
#back) and the name attribute on the input are preserved so the
existing cypress flows continue to work.
This commit is contained in:
Yisroel Baum 2026-05-01 11:32:21 +03:00
parent 2349e69c4f
commit 5be645f4e5
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
2 changed files with 29 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

5
public/js/texts.js
View file

@ -8,7 +8,8 @@ document.addEventListener('DOMContentLoaded', () => {
});
const texts = await res.json();
textsList.innerHTML = texts.map(text =>
'<li><a href=/admin/texts/'
'<li class="card"><a class="card-link"'
+ ' href=/admin/texts/'
+ text.id
+ '>'
+ text.name
@ -26,7 +27,9 @@ document.addEventListener('DOMContentLoaded', () => {
if (res.ok) {
const text = await res.json();
const li = document.createElement('li');
li.className = 'card';
const a = document.createElement('a');
a.className = 'card-link';
a.href = '/admin/texts/' + text.id;
a.textContent = text.name;
li.appendChild(a);

34
views/templates/texts.php
View file

@ -7,14 +7,30 @@
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<h1>Texts</h1>
<a href="/admin" id="back">Back to Admin</a>
<ul id="texts-list">
</ul>
<form id="texts-form" action="/api/texts" method="POST">
<input id="newTextName" name="name"/>
<button id="submit">submit</button>
</form>
<header class="site-header">
<div class="site-header-inner">
<h1>Texts</h1>
<div class="cluster">
<a class="btn btn-secondary" href="/admin" id="back">
Back to Admin
</a>
</div>
</div>
</header>
<main class="container stack-lg">
<ul id="texts-list" class="list-cards"></ul>
<form id="texts-form" action="/api/texts" method="POST"
class="card stack">
<label>New text name
<input id="newTextName" name="name" type="text" />
</label>
<div class="cluster cluster-end">
<button id="submit" class="btn btn-primary" type="submit">
Add text
</button>
</div>
</form>
</main>
<script src="/js/texts.js"></script>
</body>
</html>
</html>