nathan/project-friction-design
1
0
Fork 0
Code Pull Requests Packages Projects Activity

Updated layout, added ability to make new sections, added new block types, increased layout size by 30%

Browse Source
This commit is contained in:
nathan
2026-05-01 14:37:36 -04:00
parent a472255a94
commit d0200f3975
7 changed files with 841 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
builder.html
View File

@@ -147,6 +147,24 @@
.tab-icon { font-size: 16px; }
.new-section-btn {
width: 100%;
margin-top: 0.5rem;
padding: 0.5rem 0.7rem;
border: 1px dashed #3498db;
border-radius: 6px;
background: #f5fbff;
color: #2b6ea4;
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
}
.new-section-btn:hover {
background: #eaf4fb;
border-color: #2f8dd8;
}
/* ── Block Palette ───────────────────────────────────────────────── */
.palette-blocks {
display: flex;
@@ -321,18 +339,33 @@
.canvas-block-preview {
padding: 1rem 1.25rem;
pointer-events: none;
pointer-events: auto;
max-height: 280px;
overflow: hidden;
position: relative;
}
.canvas-block-preview button,
.canvas-block-preview a,
.canvas-block-preview input,
.canvas-block-preview select,
.canvas-block-preview textarea {
pointer-events: none;
}
.canvas-block-preview [data-gallery-prev],
.canvas-block-preview [data-gallery-next],
.canvas-block-preview [data-gallery-dot] {
pointer-events: auto;
}
.canvas-block-preview::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 30px;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.8));
pointer-events: none;
}
/* ── Insert Strip ────────────────────────────────────────────────── */
@@ -412,7 +445,8 @@
color: #2c3e50;
}
#modalClose {
#modalClose,
#sectionWizardClose {
background: none;
border: none;
font-size: 20px;
@@ -422,7 +456,8 @@
padding: 0 0.2rem;
}
#modalClose:hover { color: #2c3e50; }
#modalClose:hover,
#sectionWizardClose:hover { color: #2c3e50; }
.modal-body {
padding: 1.25rem;
@@ -482,6 +517,12 @@
gap: 0.75rem;
}
.form-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
/* Gallery / Stats item rows */
.item-row {
display: flex;
@@ -595,6 +636,7 @@
<div class="palette-section">
<div class="palette-title">Sections</div>
<div id="sectionTabs"></div>
<button id="newSectionBtn" class="new-section-btn">+ New Section</button>
</div>
<!-- Block Palette -->
@@ -605,6 +647,8 @@
<button class="palette-block" data-type="paragraph"> ¶ Paragraph</button>
<button class="palette-block" data-type="image"> 🖼 Image</button>
<button class="palette-block" data-type="quote"> " Quote</button>
<button class="palette-block" data-type="fact-panel"> ▸ Fact Briefing Panel</button>
<button class="palette-block" data-type="timeline-card"> 🗓 Timeline Card</button>
<button class="palette-block" data-type="gallery"> ⊞ Gallery</button>
<button class="palette-block" data-type="grid4"> ▦ 4-Image Grid</button>
<button class="palette-block" data-type="statistics"> # Statistics</button>
@@ -646,6 +690,59 @@
</div>
</div>
<!-- ── New Section Wizard ─────────────────────────────────────────────── -->
<div id="sectionWizardModal" class="builder-modal hidden">
<div class="modal-overlay"></div>
<div class="modal-dialog">
<div class="modal-header">
<h3>Create New Section</h3>
<button id="sectionWizardClose" title="Close">&#x2715;</button>
</div>
<div class="modal-body" id="sectionWizardBody">
<div class="form-group">
<label>Title</label>
<input type="text" id="wizardTitle" placeholder="e.g. Intelligence & Reconnaissance">
</div>
<div class="form-group">
<label>Subtitle</label>
<input type="text" id="wizardSubtitle" placeholder="Short subheading shown on the card">
</div>
<div class="form-group">
<label>Description</label>
<textarea id="wizardDescription" rows="4" placeholder="Card preview description for visitors"></textarea>
</div>
<div class="form-row-2">
<div class="form-group">
<label>Icon (emoji)</label>
<input type="text" id="wizardIcon" value="&#x1F4DA;" maxlength="4">
</div>
<div class="form-group">
<label>Theme Color</label>
<input type="text" id="wizardColor" value="#7f8c8d" placeholder="#3498db">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>Articles</label>
<input type="number" id="wizardArticles" value="0" min="0">
</div>
<div class="form-group">
<label>Story Maps</label>
<input type="number" id="wizardStoryMaps" value="0" min="0">
</div>
<div class="form-group">
<label>Images</label>
<input type="number" id="wizardImages" value="0" min="0">
</div>
</div>
</div>
<div class="modal-footer">
<button id="sectionWizardSave" class="btn btn-primary">Create Section</button>
<button id="sectionWizardCancel" class="btn btn-secondary">Cancel</button>
</div>
</div>
</div>
<script src="js/block-renderer.js"></script>
<script src="js/builder.js"></script>
</body>