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

32
views/templates/texts.php
View file

@ -7,14 +7,30 @@
<link rel="stylesheet" href="/css/app.css"> <link rel="stylesheet" href="/css/app.css">
</head> </head>
<body> <body>
<h1>Texts</h1> <header class="site-header">
<a href="/admin" id="back">Back to Admin</a> <div class="site-header-inner">
<ul id="texts-list"> <h1>Texts</h1>
</ul> <div class="cluster">
<form id="texts-form" action="/api/texts" method="POST"> <a class="btn btn-secondary" href="/admin" id="back">
<input id="newTextName" name="name"/> Back to Admin
<button id="submit">submit</button> </a>
</form> </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> <script src="/js/texts.js"></script>
</body> </body>
</html> </html>