Djeex/lumeex
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 8 Wiki Activity

Better form

Browse Source
This commit is contained in:
Djeex
2025-08-18 12:29:45 +02:00
parent 8cb81a74cf
commit 7a7876e5ef
3 changed files with 52 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/webui/js/site-info.js
View File

@ -28,7 +28,7 @@ document.addEventListener("DOMContentLoaded", () => {
div.style.marginBottom = "6px"; div.style.marginBottom = "6px";
div.innerHTML = ` div.innerHTML = `
<input type="text" placeholder="Label" value="${item.label || ""}" style="flex:1;" data-idx="${idx}" data-type="label"> <input type="text" placeholder="Label" value="${item.label || ""}" style="flex:1;" data-idx="${idx}" data-type="label">
<input type="text" placeholder="URL" value="${item.href || ""}" style="flex:2;" data-idx="${idx}" data-type="href"> <input type="text" placeholder="?=tag1,tag2" value="${item.href || ""}" style="flex:2;" data-idx="${idx}" data-type="href">
<button type="button" class="remove-menu-item" data-idx="${idx}">🗑</button> <button type="button" class="remove-menu-item" data-idx="${idx}">🗑</button>
`; `;
menuList.appendChild(div); menuList.appendChild(div);
@ -120,7 +120,7 @@ document.addEventListener("DOMContentLoaded", () => {
const result = await res.json(); const result = await res.json();
if (result.status === "ok") { if (result.status === "ok") {
if (thumbnailInput) thumbnailInput.value = result.filename; if (thumbnailInput) thumbnailInput.value = result.filename;
updateThumbnailPreview(`/photos/${result.filename}`); updateThumbnailPreview(`/photos/${result.filename}?t=${Date.now()}`);
showToast("Thumbnail uploaded!", "success"); showToast("Thumbnail uploaded!", "success");
} else { } else {
showToast("Error uploading thumbnail", "error"); showToast("Error uploading thumbnail", "error");
@ -199,7 +199,7 @@ document.addEventListener("DOMContentLoaded", () => {
form.elements["info.author"].value = data.info?.author || ""; form.elements["info.author"].value = data.info?.author || "";
form.elements["social.instagram_url"].value = data.social?.instagram_url || ""; form.elements["social.instagram_url"].value = data.social?.instagram_url || "";
if (thumbnailInput) thumbnailInput.value = data.social?.thumbnail || ""; if (thumbnailInput) thumbnailInput.value = data.social?.thumbnail || "";
updateThumbnailPreview(data.social?.thumbnail ? `/photos/${data.social.thumbnail}` : ""); updateThumbnailPreview(data.social?.thumbnail ? `/photos/${data.social.thumbnail}?t=${Date.now()}` : "");
form.elements["footer.copyright"].value = data.footer?.copyright || ""; form.elements["footer.copyright"].value = data.footer?.copyright || "";
form.elements["footer.legal_label"].value = data.footer?.legal_label || ""; form.elements["footer.legal_label"].value = data.footer?.legal_label || "";
if (themeSelect) { if (themeSelect) {

48
src/webui/site-info/index.html
View File

@ -39,7 +39,7 @@
</div> </div>
</div> </div>
<!-- Toast container for notifications --> <!-- Toast container for notifications -->
<div class="content-inner"> <div id="site-info" class="content-inner">
<div id="toast-container"></div> <div id="toast-container"></div>
<h1>Edit Site Info</h1> <h1>Edit Site Info</h1>
<form id="site-info-form"> <form id="site-info-form">
@ -48,28 +48,28 @@
<legend>Info</legend> <legend>Info</legend>
<div class="fields"> <div class="fields">
<div class="input-field"> <div class="input-field">
<label>Title:</label> <label>Title</label>
<input type="text" name="info.title"> <input type="text" name="info.title" placeholder="Your site title">
</div> </div>
<div class="input-field"> <div class="input-field">
<label>Subtitle:</label> <label>Subtitle</label>
<input type="text" name="info.subtitle"> <input type="text" name="info.subtitle" placeholder="Your site subtitle">
</div> </div>
<div class="input-field"> <div class="input-field">
<label>Description:</label> <label>Description</label>
<input type="text" name="info.description"></input> <input type="text" name="info.description" placeholder="Your site description">
</div> </div>
<div class="input-field"> <div class="input-field">
<label>Canonical URL:</label> <label>Canonical URL</label>
<input type="text" name="info.canonical"> <input type="text" name="info.canonical" placeholder="https://yoursite.com">
</div> </div>
<div class="input-field"> <div class="input-field">
<label>Keywords (comma separated):</label> <label>Keywords (comma separated)</label>
<input type="text" name="info.keywords"> <input type="text" name="info.keywords" placeholder="photo, gallery, photography">
</div> </div>
<div class="input-field"> <div class="input-field">
<label>Author:</label> <label>Author</label>
<input type="text" name="info.author"> <input type="text" name="info.author" placeholder="Your Name">
</div> </div>
</div> </div>
</fieldset> </fieldset>
@ -78,13 +78,15 @@
<legend>Social</legend> <legend>Social</legend>
<div class="fields"> <div class="fields">
<div class="input-field"> <div class="input-field">
<label>Instagram URL:</label> <label>Instagram URL</label>
<input type="text" name="social.instagram_url"> <input type="text" name="social.instagram_url" placeholder="https://instagram.com/yourprofile">
<label>Upload Thumbnail:</label> <label class="thumbnail-form-label">Upload Thumbnail</label>
<input type="file" id="thumbnail-upload" accept="image/png,image/jpeg,image/webp" style="display:none;"> <input type="file" id="thumbnail-upload" accept="image/png,image/jpeg,image/webp" style="display:none;">
<button type="button" id="choose-thumbnail-btn" class="up-btn">Choose a photo</button> <button type="button" id="choose-thumbnail-btn" class="up-btn">Choose a photo</button>
<div class="thumbnail-form">
<img id="thumbnail-preview" src="" alt="Thumbnail preview" style="max-width:100px;display:none;"> <img id="thumbnail-preview" src="" alt="Thumbnail preview" style="max-width:100px;display:none;">
<button type="button" id="remove-thumbnail-btn" class="up-btn danger" style="display:none;">Remove</button> <button type="button" id="remove-thumbnail-btn" class="up-btn danger" style="display:none;">Remove</button>
</div>
</div> </div>
</div> </div>
</fieldset> </fieldset>
@ -103,11 +105,11 @@
<legend>Footer</legend> <legend>Footer</legend>
<div class="fields"> <div class="fields">
<div class="input-field"> <div class="input-field">
<label>Copyright:</label> <label>Copyright</label>
<input type="text" name="footer.copyright"> <input type="text" name="footer.copyright">
</div> </div>
<div class="input-field"> <div class="input-field">
<label>Legal Label:</label> <label>Legal Label</label>
<input type="text" name="footer.legal_label"> <input type="text" name="footer.legal_label">
</div> </div>
</div> </div>
@ -117,19 +119,19 @@
<legend>Legals</legend> <legend>Legals</legend>
<div class="fields"> <div class="fields">
<div class="input-field"> <div class="input-field">
<label>Hoster Name:</label> <label>Hoster Name</label>
<input type="text" name="legals.hoster_name"> <input type="text" name="legals.hoster_name">
</div> </div>
<div class="input-field"> <div class="input-field">
<label>Hoster Address:</label> <label>Hoster Address</label>
<input type="text" name="legals.hoster_adress"> <input type="text" name="legals.hoster_adress">
</div> </div>
<div class="input-field"> <div class="input-field">
<label>Hoster Contact:</label> <label>Hoster Contact</label>
<input type="text" name="legals.hoster_contact"> <input type="text" name="legals.hoster_contact">
</div> </div>
<div class="input-field" style="flex: 1 1 100%;"> <div class="input-field" style="flex: 1 1 100%;">
<label>Intellectual Property:</label> <label>Intellectual Property</label>
<div id="ip-list"></div> <div id="ip-list"></div>
<button type="button" id="add-ip-paragraph">+ Add paragraph</button> <button type="button" id="add-ip-paragraph">+ Add paragraph</button>
</div> </div>
@ -140,7 +142,7 @@
<legend>Build</legend> <legend>Build</legend>
<div class="fields"> <div class="fields">
<div class="input-field"> <div class="input-field">
<label>Theme:</label> <label>Theme</label>
<select name="build.theme" id="theme-select"></select> <select name="build.theme" id="theme-select"></select>
<label> <label>
<input type="checkbox" name="build.convert_images" id="convert-images-checkbox"> <input type="checkbox" name="build.convert_images" id="convert-images-checkbox">

28
src/webui/style/style.css
View File

@ -364,7 +364,7 @@ h1, h2 {
text-align: center; text-align: center;
transition: all 0.1s ease; transition: all 0.1s ease;
user-select: none; user-select: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.25); /* box-shadow: 0 4px 10px rgba(0,0,0,0.25);*/
font-size: 14px; font-size: 14px;
border: none; border: none;
} }
@ -469,10 +469,15 @@ h1, h2 {
/* --- Site Info --- */ /* --- Site Info --- */
/* --- Site Info Form --- */ /* --- Site Info Form --- */
#site-info-form {
max-width: 950px; #site-info.content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1140px;
padding-bottom: 40px;
} }
#site-info-form fieldset { #site-info-form fieldset {
border: none; border: none;
margin-bottom: 28px; margin-bottom: 28px;
@ -533,6 +538,12 @@ h1, h2 {
box-shadow: 0 2px 8px rgba(0,0,0,0.07); box-shadow: 0 2px 8px rgba(0,0,0,0.07);
} }
#site-info-form input::placeholder,
#site-info-form textarea::placeholder {
color: #83a8b7be;
font-style: italic;
}
#site-info-form input:focus, #site-info-form input:focus,
#site-info-form textarea:focus, #site-info-form textarea:focus,
#site-info-form select:focus { #site-info-form select:focus {
@ -587,7 +598,6 @@ h1, h2 {
font-size: 0.98em; font-size: 0.98em;
margin-top: 8px; margin-top: 8px;
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 8px rgba(38,196,255,0.09);
transition: background 0.2s; transition: background 0.2s;
} }
@ -609,4 +619,14 @@ h1, h2 {
min-width: 100%; min-width: 100%;
margin-bottom: 12px; margin-bottom: 12px;
} }
}
#site-info-form button.remove-menu-item{
margin-top: 0px;
margin-bottom: 4px;
border-radius: 30px;
}
#site-info-form .thumbnail-form-label {
margin-top: 10px;
} }