jessikitty/ScratchingPost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Add BackgroundSize dropdown to Create view

Browse Source
This commit is contained in:
jessikitty
2026-05-21 10:15:01 +10:00
parent 58c5f30b0d
commit f4aec96ce0
1 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Views/Slides/Create.cshtml
+16 -11
View File
@@ -62,6 +62,17 @@
<button type="button" class="btn btn-sm btn-outline-secondary mt-1" onclick="uploadBackgroundImage()"><i class="bi bi-upload me-1"></i>Upload</button>
<input type="file" id="bgImageUpload" class="d-none" accept="image/*" />
</div>
<div class="mb-3">
<label asp-for="BackgroundSize" class="form-label">Image Sizing</label>
<select asp-for="BackgroundSize" class="form-select">
<option value="cover">Cover — fill entire slide, crop if needed</option>
<option value="contain">Contain — fit whole image, may show background</option>
<option value="fill">Fill — stretch to fit exactly</option>
<option value="scale-down">Scale Down — shrink to fit, never enlarge</option>
<option value="auto">Auto — original size</option>
</select>
<div class="form-text">How the background image fills the slide area.</div>
</div>
<div class="mb-3">
<label asp-for="CustomCss" class="form-label">Custom CSS</label>
<textarea asp-for="CustomCss" class="form-control font-monospace" rows="4" placeholder="color: white;&#10;font-family: Arial;"></textarea>
@@ -97,14 +108,10 @@
menubar: 'file edit view insert format table',
plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount',
toolbar: 'undo redo | blocks | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media table | removeformat code fullscreen',
images_upload_url: '/api/upload',
images_upload_handler: function (blobInfo, progress) {
images_upload_handler: function (blobInfo) {
return new Promise(function (resolve, reject) {
var formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
fetch('/api/upload', { method: 'POST', body: formData })
.then(r => r.json()).then(data => resolve(data.location))
.catch(err => reject('Upload failed: ' + err));
var fd = new FormData(); fd.append('file', blobInfo.blob(), blobInfo.filename());
fetch('/api/upload', { method: 'POST', body: fd }).then(r => r.json()).then(d => resolve(d.location)).catch(e => reject(e));
});
},
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; color: #fff; background: #1a1a2e; }',
@@ -115,13 +122,11 @@
document.getElementById('bgColorPicker').addEventListener('input', function () { document.getElementById('BackgroundColor').value = this.value; });
function uploadBackgroundImage() { document.getElementById('bgImageUpload').click(); }
document.getElementById('bgImageUpload').addEventListener('change', function () {
if (!this.files[0]) return;
var fd = new FormData(); fd.append('file', this.files[0]);
if (!this.files[0]) return; var fd = new FormData(); fd.append('file', this.files[0]);
fetch('/api/upload', { method: 'POST', body: fd }).then(r => r.json()).then(d => { document.getElementById('BackgroundImage').value = d.location; });
});
document.getElementById('icsFileUpload')?.addEventListener('change', function () {
if (!this.files[0]) return;
var fd = new FormData(); fd.append('file', this.files[0]);
if (!this.files[0]) return; var fd = new FormData(); fd.append('file', this.files[0]);
fetch('/api/uploadfile', { method: 'POST', body: fd }).then(r => r.json()).then(d => { document.getElementById('IcsSource').value = d.url; });
});
</script>