some styling

This commit is contained in:
Robin Appelman 2025-10-06 21:54:21 +02:00
commit 4c4a9119b3
2 changed files with 50 additions and 5 deletions

View file

@ -79,6 +79,7 @@ const addTextElement = () => {
let textCol = document.createElement('td');
textCol.classList.add('text');
textCol.colSpan = 2;
let textInput = document.createElement('input');
textInput.type = "text";
textInput.addEventListener('input', render);
@ -114,11 +115,20 @@ const addImageElement = () => {
imageCol.classList.add('image');
let imageInput = document.createElement('input');
imageInput.type = 'file';
let imageId = `image-input-${id}`;
imageInput.id = imageId;
imageInput.addEventListener('change', loadImage);
let imageLabel = document.createElement('label');
imageLabel.appendChild(document.createTextNode("Browse..."));
imageLabel.setAttribute('for', imageId);
let thumbCol = document.createElement('td');
thumbCol.classList.add('preview');
let imageThumb = document.createElement('img');
imageCol.appendChild(imageLabel);
imageCol.appendChild(imageInput);
imageCol.appendChild(imageThumb);
thumbCol.appendChild(imageThumb);
row.appendChild(imageCol);
row.appendChild(thumbCol);
addElementControls(row);
elementsTableBody.appendChild(row);

View file

@ -1,5 +1,5 @@
:root {
--background-color: #959595;
--background-color: #ffffff;
--font-color: #000000;
}
@ -11,18 +11,53 @@
}
}
body {
margin: 1em auto;
max-width: 800px;
}
body, input {
background: var(--background-color);
color: var(--font-color);
}
input {
line-height: 24px;
}
#elements {
tr {
line-height: 42px;
}
td {
padding: 0 5px;
}
.pos input {
width: 60px;
}
.image img {
height: 32px;
width: auto;
.image {
input[type="file"] {
opacity: 0;
width: 0;
}
label {
line-height: 32px;
padding: 0 12px;
margin: 5px 0;
border: 1px solid var(--font-color);
border-radius: 7px;
display: inline-block;
cursor: pointer;
}
}
.preview {
img {
height: 42px;
width: auto;
}
}
}