mirror of
https://codeberg.org/icewind/ptouch-api.git
synced 2026-06-03 10:54:07 +02:00
some styling
This commit is contained in:
parent
25f9e9b0a1
commit
4c4a9119b3
2 changed files with 50 additions and 5 deletions
12
web/label.js
12
web/label.js
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue