medlogic
/
olivetin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feature argument grid layout (#360) 

* feature: Argument form now uses a grid layout, making the input boxes take up available room

* feature: Argument form now uses a grid layout, making the input boxes take up available room

* feature: Argument form now uses a grid layout, making the input boxes take up available room

* feature: Argument form now uses a grid layout, making the input boxes take up available room
This commit is contained in:
James Read 2024-07-15 17:17:08 +01:00 committed by GitHub
parent 31d7168aac
commit a1563b72ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
webui.dev/js/ArgumentForm.js
View File

@ -60,15 +60,10 @@ class ArgumentForm extends window.HTMLElement {
this.argInputs = []
for (const arg of args) {
const domArgumentWrapper = document.createElement('p')
domArgumentWrapper.classList.add('argument-wrapper')
domArgumentWrapper.appendChild(this.createDomLabel(arg))
domArgumentWrapper.appendChild(this.createDomSuggestions(arg))
domArgumentWrapper.appendChild(this.createDomInput(arg))
domArgumentWrapper.appendChild(this.createDomDescription(arg))
this.domArgs.appendChild(domArgumentWrapper)
this.domArgs.appendChild(this.createDomLabel(arg))
this.domArgs.appendChild(this.createDomSuggestions(arg))
this.domArgs.appendChild(this.createDomInput(arg))
this.domArgs.appendChild(this.createDomDescription(arg))
}
}
@ -191,7 +186,7 @@ class ArgumentForm extends window.HTMLElement {
createDomDescription (arg) {
const domArgumentDescription = document.createElement('span')
domArgumentDescription.classList.add('argument-description')
domArgumentDescription.innerText = arg.description
domArgumentDescription.innerHTML = arg.description
return domArgumentDescription
}

22
webui.dev/style.css
View File

@ -246,6 +246,10 @@ input[type="submit"]
transition: background-color 1s ease, color 1s ease;
}
input[type="checkbox"] {
justify-self: baseline;
}
fieldset button {
border-radius: .7em;
}
@ -363,10 +367,8 @@ form div.wrapper {
}
label {
min-width: 20%;
text-align: right;
display: inline-block;
padding-right: 1em;
}
header {
@ -405,13 +407,17 @@ input[name="start"]:hover {
color: black;
}
span.argument-description {
margin-left: 1em;
div.arguments {
display: grid;
grid-template-columns: max-content auto auto; /* We don't want the label or the description to wrap, and the input to take up the rest of the space */
grid-template-rows: repeat(auto-fill, 1fr);
grid-gap: 1em;
align-items: center;
}
p.argument-wrapper {
display: flex;
place-items: center;
}
div.buttons {
@ -500,16 +506,14 @@ div.display {
text-align: left;
margin-bottom: .6em;
font-weight: bold;
min-width: auto;
}
p.argument-wrapper {
flex-direction: column;
}
span.argument-description {
margin-left: 0;
margin-top: .6em;
div.arguments {
grid-template-columns: auto;
}
dialog {