Skip to content

Commit 25cdebd

Browse files
SyntaxArchmageSyntaxArchmage
committed
Remove Float and Modal expansion modes, keep only Replace
Simplifies concept interaction to a single paradigm: clicking a concept card replaces the article column with a rich concept page. Removes ~300 lines of dead Float/Modal UI code and toggle controls.
1 parent 65e1cf5 commit 25cdebd

2 files changed

Lines changed: 3 additions & 302 deletions

File tree

‎site/app.js‎

Lines changed: 3 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
const rail = document.getElementById("concept-rail");
55

66
let currentPage = "index";
7-
let expandMode = "float"; // "float" or "read"
87

98
function navigate(pageId) {
109
currentPage = pageId;
@@ -210,11 +209,6 @@
210209
}
211210

212211
let html = `<div class="rail-header">Concept Layer &mdash; ${page.title}</div>`;
213-
html += `<div class="rail-mode-toggle">`;
214-
html += `<button class="rail-mode-btn${expandMode === 'float' ? ' active' : ''}" data-mode="float">Float</button>`;
215-
html += `<button class="rail-mode-btn${expandMode === 'read' ? ' active' : ''}" data-mode="read">Modal</button>`;
216-
html += `<button class="rail-mode-btn${expandMode === 'full' ? ' active' : ''}" data-mode="full">Replace</button>`;
217-
html += `</div>`;
218212

219213
for (const c of page.concepts) {
220214
html += `<div class="concept-card" data-concept="${c.name.toLowerCase()}">`;
@@ -237,101 +231,22 @@
237231

238232
rail.innerHTML = html;
239233

240-
// Mode toggle buttons
241-
rail.querySelectorAll(".rail-mode-btn").forEach((btn) => {
242-
btn.addEventListener("click", () => {
243-
expandMode = btn.dataset.mode;
244-
rail.querySelectorAll(".rail-mode-btn").forEach((b) => b.classList.remove("active"));
245-
btn.classList.add("active");
246-
});
247-
});
248-
249-
// Concept card click → expand
234+
// Concept card click → expand in Replace mode
250235
rail.querySelectorAll(".concept-card").forEach((card) => {
251236
card.style.cursor = "pointer";
252237
card.addEventListener("click", () => {
253238
const name = card.dataset.concept;
254239
const concept = page.concepts.find((c) => c.name.toLowerCase() === name);
255-
if (concept) expandConcept(concept, card);
240+
if (concept) showFullReplace(concept);
256241
});
257242
});
258243

259244
highlightKeywords(page.concepts);
260245
}
261246

262-
function expandConcept(concept, anchorEl) {
263-
if (expandMode === "float") {
264-
showFloatPanel(concept, anchorEl);
265-
} else if (expandMode === "read") {
266-
showReadingMode(concept);
267-
} else {
268-
showFullReplace(concept);
269-
}
270-
}
271-
272-
function showFloatPanel(concept, anchorEl) {
273-
closeExpansions();
274-
const rect = anchorEl.getBoundingClientRect();
275-
const panel = document.createElement("div");
276-
panel.className = "concept-float-panel";
277-
panel.style.top = `${Math.min(rect.top, window.innerHeight - 440)}px`;
278-
panel.style.right = `${window.innerWidth - rect.left + 12}px`;
279-
280-
panel.innerHTML = `
281-
<button class="cfp-close">✕</button>
282-
<div class="cfp-name">${concept.name}</div>
283-
<div class="cfp-role">${concept.role}</div>
284-
<div class="cfp-summary">${concept.summary}</div>
285-
<div class="cfp-section-title">Context</div>
286-
<p style="font-size:0.8125rem;color:var(--c-text-secondary);line-height:1.5;">
287-
This concept appears in the current article. Click keywords in the article body to see how it relates to the surrounding discussion.
288-
</p>
289-
`;
290-
291-
document.body.appendChild(panel);
292-
panel.querySelector(".cfp-close").addEventListener("click", () => panel.remove());
293-
document.addEventListener("keydown", function esc(e) {
294-
if (e.key === "Escape") { panel.remove(); document.removeEventListener("keydown", esc); }
295-
});
296-
}
297-
298-
function showReadingMode(concept) {
299-
closeExpansions();
300-
const overlay = document.createElement("div");
301-
overlay.className = "concept-reading-overlay";
302-
303-
overlay.innerHTML = `
304-
<div class="concept-reading-card">
305-
<button class="crc-close">✕</button>
306-
<div class="crc-name">${concept.name}</div>
307-
<div class="crc-role">${concept.role}</div>
308-
<div class="crc-summary">${concept.summary}</div>
309-
<hr class="crc-divider">
310-
<div class="crc-section-title">About this concept</div>
311-
<div class="crc-meta">
312-
<p>This is a ${concept.role.toLowerCase()} concept in the current knowledge article. In the full knowledge base, concept pages will contain: canonical definitions, notation, related concepts, usage across articles, provenance, and terminology history.</p>
313-
</div>
314-
<hr class="crc-divider">
315-
<div class="crc-section-title">Appears in</div>
316-
<div class="crc-meta"><p>Current article (click keywords to trace usage)</p></div>
317-
</div>
318-
`;
319-
320-
document.body.appendChild(overlay);
321-
overlay.addEventListener("click", (e) => { if (e.target === overlay) overlay.remove(); });
322-
overlay.querySelector(".crc-close").addEventListener("click", () => overlay.remove());
323-
document.addEventListener("keydown", function esc(e) {
324-
if (e.key === "Escape") { overlay.remove(); document.removeEventListener("keydown", esc); }
325-
});
326-
}
327-
328247
function closeExpansions() {
329-
document.querySelectorAll(".concept-float-panel, .concept-reading-overlay").forEach((el) => el.remove());
330-
// Restore article if it was replaced
331248
const placeholder = main.querySelector(".concept-full-replace");
332-
if (placeholder) {
333-
navigate(currentPage);
334-
}
249+
if (placeholder) navigate(currentPage);
335250
}
336251

337252
function showFullReplace(concept) {

‎site/styles.css‎

Lines changed: 0 additions & 214 deletions
Original file line numberDiff line numberDiff line change
@@ -709,220 +709,6 @@ body {
709709
background: #dbeafe;
710710
}
711711

712-
/* === Concept Expansion: Floating Panel (Mode A) === */
713-
714-
.concept-float-panel {
715-
position: fixed;
716-
z-index: 10000;
717-
width: 380px;
718-
max-height: 420px;
719-
overflow-y: auto;
720-
background: var(--c-surface);
721-
border: 1px solid var(--c-accent-muted);
722-
border-radius: var(--radius-lg);
723-
box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
724-
padding: var(--space-lg);
725-
font-family: var(--font-body);
726-
animation: float-in 0.3s ease;
727-
}
728-
729-
@keyframes float-in {
730-
from { opacity: 0; transform: translateY(8px) scale(0.96); }
731-
to { opacity: 1; transform: translateY(0) scale(1); }
732-
}
733-
734-
.concept-float-panel .cfp-close {
735-
position: absolute;
736-
top: var(--space-sm);
737-
right: var(--space-sm);
738-
width: 24px;
739-
height: 24px;
740-
border: none;
741-
background: var(--c-tag-bg);
742-
border-radius: 50%;
743-
cursor: pointer;
744-
font-size: 0.75rem;
745-
color: var(--c-text-secondary);
746-
display: flex;
747-
align-items: center;
748-
justify-content: center;
749-
}
750-
751-
.concept-float-panel .cfp-close:hover {
752-
background: var(--c-border);
753-
}
754-
755-
.concept-float-panel .cfp-name {
756-
font-family: var(--font-ui);
757-
font-size: 1.125rem;
758-
font-weight: 600;
759-
margin-bottom: var(--space-xs);
760-
}
761-
762-
.concept-float-panel .cfp-role {
763-
font-family: var(--font-ui);
764-
font-size: 0.6875rem;
765-
font-weight: 500;
766-
text-transform: uppercase;
767-
letter-spacing: 0.04em;
768-
color: var(--c-accent);
769-
margin-bottom: var(--space-md);
770-
}
771-
772-
.concept-float-panel .cfp-summary {
773-
font-size: 0.9375rem;
774-
line-height: 1.6;
775-
color: var(--c-text);
776-
margin-bottom: var(--space-md);
777-
}
778-
779-
.concept-float-panel .cfp-section-title {
780-
font-family: var(--font-ui);
781-
font-size: 0.6875rem;
782-
font-weight: 600;
783-
text-transform: uppercase;
784-
letter-spacing: 0.05em;
785-
color: var(--c-text-tertiary);
786-
margin-top: var(--space-md);
787-
margin-bottom: var(--space-xs);
788-
}
789-
790-
/* === Concept Expansion: Full Reading Mode (Mode B) === */
791-
792-
.concept-reading-overlay {
793-
position: fixed;
794-
top: 0;
795-
left: 0;
796-
width: 100vw;
797-
height: 100vh;
798-
z-index: 10000;
799-
display: flex;
800-
align-items: center;
801-
justify-content: center;
802-
background: rgba(0, 0, 0, 0.15);
803-
animation: overlay-fade 0.25s ease;
804-
}
805-
806-
@keyframes overlay-fade {
807-
from { opacity: 0; }
808-
to { opacity: 1; }
809-
}
810-
811-
.concept-reading-card {
812-
width: 640px;
813-
max-height: 80vh;
814-
overflow-y: auto;
815-
background: #fffdf7;
816-
border: 1px solid #e8e4d9;
817-
border-radius: var(--radius-lg);
818-
box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.08);
819-
padding: var(--space-2xl) var(--space-xl);
820-
font-family: var(--font-body);
821-
animation: reading-in 0.35s ease;
822-
}
823-
824-
@keyframes reading-in {
825-
from { opacity: 0; transform: scale(0.94); }
826-
to { opacity: 1; transform: scale(1); }
827-
}
828-
829-
.concept-reading-card .crc-close {
830-
float: right;
831-
width: 28px;
832-
height: 28px;
833-
border: 1px solid var(--c-border);
834-
background: var(--c-surface);
835-
border-radius: 50%;
836-
cursor: pointer;
837-
font-size: 0.8rem;
838-
color: var(--c-text-secondary);
839-
display: flex;
840-
align-items: center;
841-
justify-content: center;
842-
margin: -8px -8px 0 var(--space-md);
843-
}
844-
845-
.concept-reading-card .crc-close:hover {
846-
background: var(--c-tag-bg);
847-
}
848-
849-
.concept-reading-card .crc-name {
850-
font-size: 1.5rem;
851-
font-weight: 600;
852-
letter-spacing: -0.02em;
853-
margin-bottom: var(--space-xs);
854-
}
855-
856-
.concept-reading-card .crc-role {
857-
font-family: var(--font-ui);
858-
font-size: 0.6875rem;
859-
font-weight: 600;
860-
text-transform: uppercase;
861-
letter-spacing: 0.05em;
862-
color: var(--c-accent);
863-
margin-bottom: var(--space-lg);
864-
}
865-
866-
.concept-reading-card .crc-summary {
867-
font-size: 1.0625rem;
868-
line-height: 1.7;
869-
color: var(--c-text);
870-
margin-bottom: var(--space-lg);
871-
}
872-
873-
.concept-reading-card .crc-divider {
874-
border: none;
875-
border-top: 1px solid #e8e4d9;
876-
margin: var(--space-lg) 0;
877-
}
878-
879-
.concept-reading-card .crc-section-title {
880-
font-family: var(--font-ui);
881-
font-size: 0.75rem;
882-
font-weight: 600;
883-
text-transform: uppercase;
884-
letter-spacing: 0.05em;
885-
color: var(--c-text-tertiary);
886-
margin-bottom: var(--space-sm);
887-
}
888-
889-
.concept-reading-card .crc-meta {
890-
font-size: 0.875rem;
891-
color: var(--c-text-secondary);
892-
line-height: 1.6;
893-
}
894-
895-
/* Mode toggle in rail */
896-
.rail-mode-toggle {
897-
display: flex;
898-
gap: var(--space-xs);
899-
margin-bottom: var(--space-md);
900-
padding: 3px;
901-
background: var(--c-tag-bg);
902-
border-radius: var(--radius);
903-
}
904-
905-
.rail-mode-btn {
906-
flex: 1;
907-
padding: 4px 8px;
908-
font-family: var(--font-ui);
909-
font-size: 0.625rem;
910-
font-weight: 500;
911-
text-align: center;
912-
border: none;
913-
background: transparent;
914-
color: var(--c-text-secondary);
915-
border-radius: 3px;
916-
cursor: pointer;
917-
transition: background 0.12s, color 0.12s;
918-
}
919-
920-
.rail-mode-btn.active {
921-
background: var(--c-surface);
922-
color: var(--c-text);
923-
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
924-
}
925-
926712
/* === Concept Full Replace (Mode C) === */
927713

928714
.concept-full-replace {

0 commit comments

Comments
 (0)