jacob1123/forge-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make import export panel collapsible

Browse Source
This commit is contained in:
Jan Bader
2026-06-16 20:32:12 +02:00
parent 5e37706f32
commit e12a58ba1f
2 changed files with 43 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+20 -15
View File
@@ -47,23 +47,28 @@
<button id="resetBuild" type="button" class="secondary">Reset current build</button>
</section>
<section class="card import-export" aria-labelledby="import-export-heading">
<div>
<h2 id="import-export-heading">Import / Export</h2>
<details class="card import-export">
<summary>
<span>
<strong id="import-export-heading">Import / Export</strong>
<small>Back up, share, or restore a build as JSON.</small>
</span>
</summary>
<div class="import-export-body" aria-labelledby="import-export-heading">
<p>Back up or share the current build as JSON. Paste JSON directly or upload a saved file to import.</p>
<div class="io-actions">
<button id="copyExport" type="button">Generate / Copy JSON</button>
<button id="downloadExport" type="button" class="secondary">Download JSON</button>
<label class="file-button secondary">
Upload JSON
<input id="importFile" type="file" accept="application/json,.json" />
</label>
<button id="importJson" type="button">Import pasted JSON</button>
</div>
<textarea id="jsonTransfer" rows="8" spellcheck="false" placeholder="Generated export JSON appears here. You can also paste JSON here and click Import pasted JSON."></textarea>
<p id="importExportStatus" class="status" role="status"></p>
</div>
<div class="io-actions">
<button id="copyExport" type="button">Generate / Copy JSON</button>
<button id="downloadExport" type="button" class="secondary">Download JSON</button>
<label class="file-button secondary">
Upload JSON
<input id="importFile" type="file" accept="application/json,.json" />
</label>
<button id="importJson" type="button">Import pasted JSON</button>
</div>
<textarea id="jsonTransfer" rows="8" spellcheck="false" placeholder="Generated export JSON appears here. You can also paste JSON here and click Import pasted JSON."></textarea>
<p id="importExportStatus" class="status" role="status"></p>
</section>
</details>
<section class="summary-grid" aria-label="Build summary">
<article class="metric"><span>Total damage base</span><strong id="totalDamage">0</strong></article>
styles.css
+23 -1
View File
@@ -115,9 +115,31 @@ h3 { margin-bottom: 0; }
.import-export {
display: grid;
gap: 0.9rem;
margin-bottom: 1rem;
}
.import-export summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.import-export summary::-webkit-details-marker { display: none; }
.import-export summary::after {
content: "▾";
color: var(--accent);
font-size: 1.1rem;
transition: transform 0.18s ease;
}
.import-export:not([open]) summary::after { transform: rotate(-90deg); }
.import-export summary strong { display: block; font-size: 1.15rem; }
.import-export summary small { display: block; color: var(--muted); margin-top: 0.2rem; }
.import-export-body {
display: grid;
gap: 0.9rem;
margin-top: 0.9rem;
}
.import-export p { color: var(--muted); margin-bottom: 0; }
.io-actions {
display: flex;