feat: enhance card customization options and UI layout in the editor
This commit is contained in:
Ross
+241
-108
@@ -445,10 +445,69 @@
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
border: 1px solid #bee5eb;
|
||||
.config-section {
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.config-section h4 {
|
||||
margin: 0;
|
||||
padding: 12px 15px;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.config-section h4:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.config-section h4::after {
|
||||
content: "▼";
|
||||
font-size: 12px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.config-section.collapsed h4::after {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.section-controls {
|
||||
padding: 10px 15px;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.position-controls {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.form-group.inline {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-group.inline label {
|
||||
font-size: 12px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.form-group.inline input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading {
|
||||
@@ -607,127 +666,201 @@
|
||||
<div class="section">
|
||||
<h3 id="card-editor-title">Edit Card</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-template-preset">Template Preset</label>
|
||||
<select id="card-template-preset">
|
||||
<option value="">Custom</option>
|
||||
<option value="classic">Classic</option>
|
||||
<option value="frozen">Frozen</option>
|
||||
<option value="minimal">Minimal</option>
|
||||
<option value="vintage">Vintage</option>
|
||||
<option value="comic">Comic</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Background/Style Section -->
|
||||
<div class="config-section">
|
||||
<h4>Style</h4>
|
||||
<div class="section-content">
|
||||
<div class="form-group">
|
||||
<label for="card-template-preset">Template Preset</label>
|
||||
<select id="card-template-preset">
|
||||
<option value="">Custom</option>
|
||||
<option value="classic">Classic</option>
|
||||
<option value="frozen">Frozen</option>
|
||||
<option value="minimal">Minimal</option>
|
||||
<option value="vintage">Vintage</option>
|
||||
<option value="comic">Comic</option>
|
||||
<option value="polaroid">Polaroid</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-background-style">Background Style</label>
|
||||
<select id="card-background-style">
|
||||
<option value="solid">Solid</option>
|
||||
<option value="gradient">Gradient</option>
|
||||
<option value="pattern">Pattern</option>
|
||||
<option value="comic">Comic</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="card-background-style">Background Style</label>
|
||||
<select id="card-background-style">
|
||||
<option value="solid">Solid</option>
|
||||
<option value="gradient">Gradient</option>
|
||||
<option value="pattern">Pattern</option>
|
||||
<option value="comic">Comic</option>
|
||||
<option value="polaroid">Polaroid</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-font-family">Font Family</label>
|
||||
<select id="card-font-family">
|
||||
<option value="Arial">Arial</option>
|
||||
<option value="Georgia">Georgia</option>
|
||||
<option value="Times New Roman">Times New Roman</option>
|
||||
<option value="Comic Sans MS">Comic Sans MS</option>
|
||||
<option value="Impact">Impact</option>
|
||||
<option value="Courier New">Courier New</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="card-font-family">Font Family</label>
|
||||
<select id="card-font-family">
|
||||
<option value="Arial">Arial</option>
|
||||
<option value="Georgia">Georgia</option>
|
||||
<option value="Times New Roman">Times New Roman</option>
|
||||
<option value="Comic Sans MS">Comic Sans MS</option>
|
||||
<option value="Impact">Impact</option>
|
||||
<option value="Courier New">Courier New</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-font-weight">Font Weight</label>
|
||||
<select id="card-font-weight">
|
||||
<option value="normal">Normal</option>
|
||||
<option value="bold">Bold</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-footer-color">Footer Color</label>
|
||||
<div class="color-picker">
|
||||
<input type="color" id="card-footer-color" value="#111111" class="color-input">
|
||||
<input type="text" id="card-footer-color-text" value="#111111" class="color-value" readonly>
|
||||
<div class="form-group">
|
||||
<label for="card-font-weight">Font Weight</label>
|
||||
<select id="card-font-weight">
|
||||
<option value="normal">Normal</option>
|
||||
<option value="bold">Bold</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-title-input">Title</label>
|
||||
<input type="text" id="card-title-input" placeholder="Enter card title">
|
||||
<div class="checkbox-group inline">
|
||||
<input type="checkbox" id="card-show-title" checked>
|
||||
<label for="card-show-title">Show title</label>
|
||||
<!-- Title Section -->
|
||||
<div class="config-section" id="title-section">
|
||||
<h4>Title</h4>
|
||||
<div class="section-controls">
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="card-show-title" checked>
|
||||
<label for="card-show-title">Show title</label>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Title Style</label>
|
||||
<div class="title-style-grid">
|
||||
<div class="title-style-option" data-style="folded">Folded</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-title-color">Title Color</label>
|
||||
<div class="color-picker">
|
||||
<input type="color" id="card-title-color" value="#111111" class="color-input">
|
||||
<input type="text" id="card-title-color-text" value="#111111" class="color-value" readonly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="card-title-shadow">
|
||||
<label for="card-title-shadow">Title shadow</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-title-font-size">Title Font Size (px)</label>
|
||||
<input type="number" id="card-title-font-size" value="20" min="10" max="200" step="5">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Title Position</label>
|
||||
<div class="position-controls">
|
||||
<div class="form-group inline">
|
||||
<label for="card-title-x">X (%)</label>
|
||||
<input type="number" id="card-title-x" value="50" min="0" max="100" step="1">
|
||||
</div>
|
||||
<div class="form-group inline">
|
||||
<label for="card-title-y">Y (%)</label>
|
||||
<input type="number" id="card-title-y" value="20" min="0" max="100" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="card-title-draggable">
|
||||
<label for="card-title-draggable">Enable drag to reposition</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-footer-input">Footer</label>
|
||||
<input type="text" id="card-footer-input" placeholder="Enter footer text">
|
||||
<div class="checkbox-group inline">
|
||||
<input type="checkbox" id="card-show-footer" checked>
|
||||
<label for="card-show-footer">Show footer</label>
|
||||
<!-- Image Section -->
|
||||
<div class="config-section" id="image-section">
|
||||
<h4>Image</h4>
|
||||
<div class="section-content">
|
||||
<div class="form-group">
|
||||
<label>Image</label>
|
||||
<select id="card-image-select">
|
||||
<option value="-1">Use default image</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-image-fit">Image Fit</label>
|
||||
<select id="card-image-fit">
|
||||
<option value="cover">Cover (fill area)</option>
|
||||
<option value="contain">Contain (show all)</option>
|
||||
<option value="fill">Fill (stretch)</option>
|
||||
<option value="none">None (original size)</option>
|
||||
<option value="scale-down">Scale Down</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-image-position">Image Position</label>
|
||||
<select id="card-image-position">
|
||||
<option value="center">Center</option>
|
||||
<option value="top">Top</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="top left">Top Left</option>
|
||||
<option value="top right">Top Right</option>
|
||||
<option value="bottom left">Bottom Left</option>
|
||||
<option value="bottom right">Bottom Right</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="card-full-bleed" checked>
|
||||
<label for="card-full-bleed">Full cover image (full bleed)</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="card-show-accent">
|
||||
<label for="card-show-accent">Show accent overlay</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="accent-color-group" style="display: none;">
|
||||
<label for="card-accent-color">Accent Color</label>
|
||||
<div class="color-picker">
|
||||
<input type="color" id="card-accent-color" value="#f1c40f" class="color-input">
|
||||
<input type="text" id="card-accent-color-text" value="#f1c40f" class="color-value" readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Title Style</label>
|
||||
<div class="title-style-grid">
|
||||
<div class="title-style-option" data-style="classic">Classic</div>
|
||||
<div class="title-style-option" data-style="large">Large</div>
|
||||
<div class="title-style-option" data-style="small">Small</div>
|
||||
<div class="title-style-option selected" data-style="folded">Folded</div>
|
||||
<div class="title-style-option" data-style="condensed">Condensed</div>
|
||||
<div class="title-style-option" data-style="italic">Italic</div>
|
||||
<div class="title-style-option" data-style="bold">Bold</div>
|
||||
<div class="title-style-option" data-style="outlined">Outlined</div>
|
||||
<div class="title-style-option" data-style="shadow">Shadow</div>
|
||||
<!-- Footer Section -->
|
||||
<div class="config-section" id="footer-section">
|
||||
<h4>Footer</h4>
|
||||
<div class="section-controls">
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="card-show-footer" checked>
|
||||
<label for="card-show-footer">Show footer</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="global-title-font-size">Title Font Size (px)</label>
|
||||
<input type="number" id="global-title-font-size" value="20" min="10" max="200" step="5">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-accent-color">Accent Color</label>
|
||||
<div class="color-picker">
|
||||
<input type="color" id="card-accent-color" value="#f1c40f" class="color-input">
|
||||
<input type="text" id="card-accent-color-text" value="#f1c40f" class="color-value" readonly>
|
||||
<div class="form-group">
|
||||
<label for="card-footer-color">Footer Color</label>
|
||||
<div class="color-picker">
|
||||
<input type="color" id="card-footer-color" value="#111111" class="color-input">
|
||||
<input type="text" id="card-footer-color-text" value="#111111" class="color-value" readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="card-title-color">Title Color</label>
|
||||
<div class="color-picker">
|
||||
<input type="color" id="card-title-color" value="#111111" class="color-input">
|
||||
<input type="text" id="card-title-color-text" value="#111111" class="color-value" readonly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="card-full-bleed" checked>
|
||||
<label for="card-full-bleed">Full bleed background</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="card-title-shadow">
|
||||
<label for="card-title-shadow">Title shadow</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Image</label>
|
||||
<select id="card-image-select">
|
||||
<option value="-1">Use default image</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="btn-group" style="margin-top: 15px;">
|
||||
<button class="btn btn-primary" id="update-card">Update Card</button>
|
||||
<button class="btn btn-danger" id="delete-card">Delete Card</button>
|
||||
|
||||
Reference in New Issue
Block a user