diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css index 3ee030f..5b2c8cf 100644 --- a/engine/app/assets/stylesheets/coplan/application.css +++ b/engine/app/assets/stylesheets/coplan/application.css @@ -4,7 +4,9 @@ color-scheme: light; /* Colors */ - --color-bg: #fafafa; + /* Slightly cool and dark for a page background: white cards need + something to stand out against, or light mode reads as fog. */ + --color-bg: #eef0f5; --color-bg-muted: #f3f4f6; --color-surface: #ffffff; --color-surface-muted: #f9fafb; @@ -108,7 +110,11 @@ --glass-edge: rgba(255, 255, 255, 0.75); --glass-blur: blur(16px) saturate(1.6); --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.08); - --surface-translucent: rgba(255, 255, 255, 0.6); + --surface-translucent: rgba(255, 255, 255, 0.75); + /* Card outline. The white --glass-edge reads as a specular highlight on + dark backdrops but disappears white-on-white — cards and rows use this + faintly dark line instead so light mode has real definition. */ + --card-edge: rgba(24, 33, 54, 0.10); } @media (prefers-color-scheme: dark) { @@ -184,6 +190,7 @@ --glass-blur: blur(16px) saturate(1.4); --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4); --surface-translucent: rgba(21, 32, 51, 0.55); + --card-edge: rgba(148, 163, 184, 0.16); } } @@ -260,6 +267,7 @@ --glass-blur: blur(16px) saturate(1.4); --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4); --surface-translucent: rgba(21, 32, 51, 0.55); + --card-edge: rgba(148, 163, 184, 0.16); } /* Forced light theme — overrides system dark preference */ @@ -669,7 +677,7 @@ img, svg { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); - border: 1px solid var(--glass-edge); + border: 1px solid var(--card-edge); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-glass); @@ -2093,6 +2101,12 @@ img.avatar { width: 220px; flex-shrink: 0; max-height: calc(100vh - var(--nav-height) - var(--space-xl) * 2); + /* The nav is the scroll container — a long outline must not push the + back-matter links (References/Attachments) below the sticky bound + where no amount of page scrolling reaches them. */ + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--color-border) transparent; transition: width 0.2s ease, opacity 0.2s ease; margin-right: var(--space-lg); } @@ -2141,10 +2155,8 @@ img.avatar { list-style: none; padding: 0; margin: 0; - overflow-y: auto; - max-height: calc(100vh - var(--nav-height) - 8rem); - scrollbar-width: thin; - scrollbar-color: var(--color-border) transparent; + /* No inner scroll region: the whole nav scrolls (see .content-nav), so + the outline and the back-matter links share one scroll. */ } .content-nav__item { @@ -2538,27 +2550,26 @@ img.avatar { /* Plan document + footnotes: one page, no tabs. The document is the main glass card; references and attachments follow like back matter — same page, quieter surface. */ +/* Back matter lives inside the content column, closing out the document + after a rule — no card-within-card, no space below the sidebar. Empty + sections are a single quiet line. */ .plan-footnotes { - margin-top: var(--space-xl); + margin-top: var(--space-2xl); + padding-top: var(--space-lg); + border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-lg); } .plan-footnote { - /* Set apart from the document proper: flatter, edge-lit, no heavy card. */ - background: var(--surface-translucent); - border: 1px solid var(--glass-edge); - border-left: 3px solid var(--color-border); - border-radius: var(--radius); - scroll-margin-top: var(--space-lg); + scroll-margin-top: calc(var(--nav-height) + var(--space-lg)); } .plan-footnote__header { display: flex; align-items: center; gap: var(--space-sm); - padding: var(--space-md) var(--space-lg) 0; } .plan-footnote__title { @@ -2737,8 +2748,17 @@ img.avatar { } /* References section */ -.references-section { - padding: var(--space-lg); +/* Section bodies hang under the header, indented past the round "+" so + content lines up with the section title. */ +.references-section, +.attachments-section { + padding: 0 0 0 calc(24px + var(--space-sm)); +} + +.plan-footnote__empty { + margin: var(--space-xs) 0 0; + font-size: var(--text-sm); + color: var(--color-text-muted); } .references-list { @@ -2942,10 +2962,6 @@ img.avatar { } /* Attachments section */ -.attachments-section { - padding: var(--space-lg); -} - .attachments-section__header { margin-bottom: var(--space-md); } @@ -4539,6 +4555,12 @@ img.avatar { top: calc(var(--nav-height) + var(--space-md)); font-size: var(--text-sm); min-width: 0; + /* A sticky sidebar taller than the viewport pins its overflow below the + fold forever — page scroll can't reach it. Scroll the sidebar itself. */ + max-height: calc(100vh - var(--nav-height) - var(--space-md) * 2); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--color-border) transparent; } .workspace__sidebar-sections { @@ -4900,17 +4922,18 @@ img.avatar { history, quieter than the warning-toned attention strip. */ .recent-updates { margin-bottom: var(--space-lg); - padding: var(--space-sm) var(--space-md); - border: 1px solid var(--glass-edge); + padding: var(--space-md); + border: 1px solid var(--card-edge); border-radius: var(--radius); background: var(--surface-translucent); + box-shadow: var(--shadow); } .recent-updates__heading { display: flex; align-items: center; gap: var(--space-xs); - margin: 0 0 var(--space-xs); + margin: 0 0 var(--space-sm); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; @@ -4924,7 +4947,8 @@ img.avatar { padding: 0; display: flex; flex-direction: column; - gap: 2px; + /* Roomy enough to scan — this read as one bunched block at 2px. */ + gap: var(--space-sm); } .recent-updates__item { @@ -5014,9 +5038,10 @@ img.avatar { gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--surface-translucent); - border: 1px solid var(--glass-edge); + border: 1px solid var(--card-edge); border-radius: var(--radius); margin-bottom: var(--space-xs); + box-shadow: var(--shadow); color: var(--color-text); text-decoration: none; transition: background 0.12s ease, box-shadow 0.12s ease; @@ -5058,9 +5083,10 @@ img.avatar { /* Translucent without backdrop blur — rows are numerous and per-row blur is a GPU tax; the mesh still glows through faintly. */ background: var(--surface-translucent); - border: 1px solid var(--glass-edge); + border: 1px solid var(--card-edge); border-radius: var(--radius); margin-bottom: var(--space-xs); + box-shadow: var(--shadow); transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; /* Selectable text hijacks press-and-drag: the browser starts a text selection instead of the row drag, and the mouseup then *navigates* @@ -5148,8 +5174,15 @@ img.avatar { text-decoration: none; } -.plan-row__spacer { - flex: 1; +/* Byline pinned to the card's top-right corner: it must not ride along + with wrapping titles or drift to a second line mid-card. */ +.plan-row__meta { + display: flex; + align-items: center; + gap: var(--space-sm); + margin-left: auto; + align-self: flex-start; + flex-shrink: 0; } .plan-row__time { @@ -5171,40 +5204,6 @@ img.avatar { overflow: hidden; } -/* Row bookmark — the keyboard/no-drag door into the folder navigator. */ -.plan-row__save { - display: inline-flex; - align-items: center; - padding: 4px; - background: none; - border: none; - border-radius: var(--radius); - color: var(--color-text-muted); - cursor: pointer; - opacity: 0; - transition: opacity 0.12s ease, color 0.12s ease; -} - -.plan-row:hover .plan-row__save, -.plan-row__save:focus-visible, -.plan-row__save--saved { - opacity: 1; -} - -.plan-row__save:hover { - color: var(--color-primary); - background: var(--color-bg-muted); -} - -.plan-row__save--saved { - color: var(--color-primary); -} - -/* Saved = a second click removes; hint at that on hover. */ -.plan-row__save--saved:hover { - color: var(--color-danger, #e0637a); -} - /* Toasts (drag & drop feedback) */ .toasts { position: fixed; @@ -5232,6 +5231,8 @@ img.avatar { tap to expand, out of the way otherwise. */ .workspace__sidebar { position: static; + max-height: none; + overflow: visible; } .workspace__sidebar-toggle { @@ -5326,10 +5327,13 @@ img.avatar { overflow-wrap: anywhere; } - .plan-document, + .plan-document { + padding: var(--space-md); + } + .references-section, .attachments-section { - padding: var(--space-md); + padding-left: 0; } .plan-actions { diff --git a/engine/app/views/coplan/plans/_attachments.html.erb b/engine/app/views/coplan/plans/_attachments.html.erb index 89d730d..b478702 100644 --- a/engine/app/views/coplan/plans/_attachments.html.erb +++ b/engine/app/views/coplan/plans/_attachments.html.erb @@ -72,8 +72,7 @@ <% end %> <% else %> -
No attachments yet.<% if can_add %> Upload files to share diagrams, screenshots, or documents alongside the plan.<% end %>
-None yet<% if can_add %> — use the + to add screenshots, diagrams, or files<% end %>.
<% end %> diff --git a/engine/app/views/coplan/plans/_footnotes.html.erb b/engine/app/views/coplan/plans/_footnotes.html.erb new file mode 100644 index 0000000..fa1e1b7 --- /dev/null +++ b/engine/app/views/coplan/plans/_footnotes.html.erb @@ -0,0 +1,32 @@ +<%# Back matter: references and attachments close out the document inside + the content column — separated from the prose by a rule, not banished + below the sidebar where long outlines made them collide. Each section + is one quiet header line (+, title, count); empty sections stay one + line tall. %> +<%= summary %>
<% end %> + <%# Byline, anchored to the card's top-right corner regardless of how the + title wraps — a floating "author · when" would read as misalignment. %> + diff --git a/engine/app/views/coplan/plans/_references.html.erb b/engine/app/views/coplan/plans/_references.html.erb index 770d93d..1e54daf 100644 --- a/engine/app/views/coplan/plans/_references.html.erb +++ b/engine/app/views/coplan/plans/_references.html.erb @@ -55,8 +55,7 @@ <% end %> <% else %> -No references yet. Links in the plan content are auto-extracted, or add one manually.
-None yet — links in the document are picked up automatically.
<% end %> diff --git a/engine/app/views/coplan/plans/index.html.erb b/engine/app/views/coplan/plans/index.html.erb index 66feddc..601ebfd 100644 --- a/engine/app/views/coplan/plans/index.html.erb +++ b/engine/app/views/coplan/plans/index.html.erb @@ -5,9 +5,10 @@ <% end %> -This plan has no content yet.