ross/yoto-covers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add panel settings and footer customization options in the editor

Browse Source
This commit is contained in:
Ross
2026-01-04 22:17:51 +00:00
parent 279ed2ff6f
commit 554075a3a9
2 changed files with 412 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+91 -2
View File
@@ -496,6 +496,13 @@
align-items: end;
}
.panel-controls {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: end;
}
.form-group.inline {
flex: 1;
margin-bottom: 0;
@@ -716,6 +723,64 @@
</div>
</div>
<!-- Panel Section -->
<div class="config-section" id="panel-section">
<h4>Panel Settings</h4>
<div class="section-controls">
<div class="checkbox-group">
<input type="checkbox" id="card-panel-mode">
<label for="card-panel-mode">Enable panel mode</label>
</div>
</div>
<div class="section-content">
<div class="form-group">
<label>Title Panel</label>
<div class="panel-controls">
<div class="form-group inline">
<label for="card-title-panel-border">Border Width</label>
<input type="number" id="card-title-panel-border" value="0" min="0" max="10" step="1">
</div>
<div class="form-group inline">
<label for="card-title-panel-rotation">Rotation (°)</label>
<input type="number" id="card-title-panel-rotation" value="0" min="-10" max="10" step="1">
</div>
<div class="checkbox-group inline">
<input type="checkbox" id="card-title-panel-expand">
<label for="card-title-panel-expand">Expandable</label>
</div>
</div>
</div>
<div class="form-group">
<label>Image Panel</label>
<div class="panel-controls">
<div class="form-group inline">
<label for="card-image-panel-border">Border Width</label>
<input type="number" id="card-image-panel-border" value="0" min="0" max="10" step="1">
</div>
<div class="form-group inline">
<label for="card-image-panel-rotation">Rotation (°)</label>
<input type="number" id="card-image-panel-rotation" value="0" min="-10" max="10" step="1">
</div>
</div>
</div>
<div class="form-group">
<label>Footer Panel</label>
<div class="panel-controls">
<div class="form-group inline">
<label for="card-footer-panel-border">Border Width</label>
<input type="number" id="card-footer-panel-border" value="0" min="0" max="10" step="1">
</div>
<div class="form-group inline">
<label for="card-footer-panel-rotation">Rotation (°)</label>
<input type="number" id="card-footer-panel-rotation" value="0" min="-10" max="10" step="1">
</div>
</div>
</div>
</div>
</div>
<!-- Title Section -->
<div class="config-section" id="title-section">
<h4>Title</h4>
@@ -728,7 +793,7 @@
<div class="section-content">
<div class="form-group">
<label for="card-title-input">Title Text</label>
<input type="text" id="card-title-input" placeholder="Enter card title">
<textarea id="card-title-input" placeholder="Enter card title" rows="2"></textarea>
</div>
<div class="form-group">
@@ -738,6 +803,7 @@
<div class="title-style-option" data-style="condensed">Condensed</div>
<div class="title-style-option" data-style="outlined">Outlined</div>
<div class="title-style-option selected" data-style="classic">Classic</div>
<div class="title-style-option" data-style="split">Split</div>
</div>
</div>
@@ -848,7 +914,7 @@
<div class="section-content">
<div class="form-group">
<label for="card-footer-input">Footer Text</label>
<input type="text" id="card-footer-input" placeholder="Enter footer text">
<textarea id="card-footer-input" placeholder="Enter footer text" rows="2"></textarea>
</div>
<div class="form-group">
@@ -858,6 +924,29 @@
<input type="text" id="card-footer-color-text" value="#111111" class="color-value" readonly>
</div>
</div>
<div class="form-group">
<label for="card-footer-font-size">Footer Font Size (px)</label>
<input type="number" id="card-footer-font-size" value="12" min="8" max="100" step="2">
</div>
<div class="form-group">
<label>Footer Position</label>
<div class="position-controls">
<div class="form-group inline">
<label for="card-footer-x">X (%)</label>
<input type="number" id="card-footer-x" value="50" min="0" max="100" step="1">
</div>
<div class="form-group inline">
<label for="card-footer-y">Y (%)</label>
<input type="number" id="card-footer-y" value="90" min="0" max="100" step="1">
</div>
</div>
<div class="checkbox-group">
<input type="checkbox" id="card-footer-draggable">
<label for="card-footer-draggable">Enable drag to reposition</label>
</div>
</div>
</div>
</div>