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

style admin text detail page with node tree

Browse source 
apply the page shell to the text detail page and add a scoped
.node-tree style block to app.css. the tree dom rendered by text.js
must keep ul/li with buttons and inputs as direct children of each
li (cypress relies on > selectors), so styling is applied entirely
via descendant selectors without wrapping the rendered nodes.
This commit is contained in:
Yisroel Baum 2026-05-01 11:32:49 +03:00
parent 5be645f4e5
commit 59ec2e19e8
Signed by: yisroelbaum
GPG key ID: 0FA60884F75520A9
2 changed files with 101 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

91
public/css/app.css
View file

@ -416,3 +416,94 @@ form {
[hidden] {
display: none !important;
}
/* -------------------------------------------------------------------------
7. Page-specific: node tree (text detail)
-------------------------------------------------------------------------
The tree DOM is rendered as plain ul/li with buttons and inputs as
direct children of each li. Cypress assertions rely on this exact
structure, so we style it via descendant selectors only - no wrapper
elements added.
*/
.node-tree > ul {
border-left: 2px solid var(--color-border);
padding-left: var(--space-4);
}
.node-tree ul ul {
border-left: 1px solid var(--color-border);
margin-top: var(--space-2);
margin-left: var(--space-2);
padding-left: var(--space-4);
}
.node-tree li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) 0;
}
.node-tree li > ul {
flex-basis: 100%;
margin-top: var(--space-2);
}
.node-tree li > span {
font-weight: 500;
}
.node-tree li > button {
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-sm);
background-color: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
}
.node-tree li > button.toggle-children {
padding: var(--space-1) var(--space-2);
background-color: transparent;
border-color: transparent;
color: var(--color-text-muted);
font-size: var(--font-size-base);
}
.node-tree li > button.toggle-children:hover,
.node-tree li > button.toggle-children:focus {
color: var(--color-text);
background-color: var(--color-surface-alt);
}
.node-tree li > button.add-child {
color: var(--color-primary);
border-color: var(--color-primary);
}
.node-tree li > button.add-child:hover,
.node-tree li > button.add-child:focus {
background-color: var(--color-primary);
color: #ffffff;
}
.node-tree li > button.bulk-add-children {
color: var(--color-accent);
border-color: var(--color-accent);
}
.node-tree li > button.bulk-add-children:hover,
.node-tree li > button.bulk-add-children:focus {
background-color: var(--color-accent);
color: #ffffff;
}
.node-tree li > input {
width: auto;
margin-top: 0;
}
.node-tree li > input.bulk-count {
max-width: 6rem;
}

12
views/templates/text.php
View file

@ -7,8 +7,16 @@
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<a href="/admin/texts" id="back">Back to Texts</a>
<div id="text-detail"></div>
<header class="site-header">
<div class="site-header-inner">
<a class="btn btn-secondary" href="/admin/texts" id="back">
Back to Texts
</a>
</div>
</header>
<main class="container container-wide stack">
<div id="text-detail" class="node-tree stack"></div>
</main>
<script src="/js/text.js"></script>
</body>
</html>