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

22
webui.dev/style.css
View File

@ -246,6 +246,10 @@ input[type="submit"]
transition: background-color 1s ease, color 1s ease; transition: background-color 1s ease, color 1s ease;
} }
input[type="checkbox"] {
justify-self: baseline;
}
fieldset button { fieldset button {
border-radius: .7em; border-radius: .7em;
} }
@ -363,10 +367,8 @@ form div.wrapper {
} }
label { label {
min-width: 20%;
text-align: right; text-align: right;
display: inline-block; display: inline-block;
padding-right: 1em;
} }
header { header {
@ -405,13 +407,17 @@ input[name="start"]:hover {
color: black; color: black;
} }
span.argument-description { div.arguments {
margin-left: 1em; 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 { p.argument-wrapper {
display: flex; display: flex;
place-items: center;
} }
div.buttons { div.buttons {
@ -500,16 +506,14 @@ div.display {
text-align: left; text-align: left;
margin-bottom: .6em; margin-bottom: .6em;
font-weight: bold; font-weight: bold;
min-width: auto;
} }
p.argument-wrapper { p.argument-wrapper {
flex-direction: column; flex-direction: column;
} }
span.argument-description { div.arguments {
margin-left: 0; grid-template-columns: auto;
margin-top: .6em;
} }
dialog { dialog {