From 59ec2e19e8ae5cc69688ecda1de16b3ecf062e61 Mon Sep 17 00:00:00 2001 From: Yisroel Baum Date: Fri, 1 May 2026 11:32:49 +0300 Subject: [PATCH] style admin text detail page with node tree 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. --- public/css/app.css | 91 ++++++++++++++++++++++++++++++++++++++++ views/templates/text.php | 12 +++++- 2 files changed, 101 insertions(+), 2 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index 519c7ec..f7d3003 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -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; +} diff --git a/views/templates/text.php b/views/templates/text.php index 477ec12..6d41421 100644 --- a/views/templates/text.php +++ b/views/templates/text.php @@ -7,8 +7,16 @@ - Back to Texts -
+
+
+ + Back to Texts + +
+
+
+
+