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

bugfix: Argument form on smaller screens (#209)

This commit is contained in:
James Read 2023-12-28 23:47:02 +00:00 committed by GitHub
parent 4ce5b0e645
commit 3f72b7cc0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
webui/js/ArgumentForm.js
View File

@ -60,13 +60,14 @@ class ArgumentForm extends window.HTMLElement {
this.argInputs = [] this.argInputs = []
for (const arg of args) { for (const arg of args) {
const domFieldWrapper = document.createElement('p') const domArgumentWrapper = document.createElement('p')
domArgumentWrapper.classList.add('argument-wrapper')
domFieldWrapper.appendChild(this.createDomLabel(arg)) domArgumentWrapper.appendChild(this.createDomLabel(arg))
domFieldWrapper.appendChild(this.createDomInput(arg)) domArgumentWrapper.appendChild(this.createDomInput(arg))
domFieldWrapper.appendChild(this.createDomDescription(arg)) domArgumentWrapper.appendChild(this.createDomDescription(arg))
this.domArgs.appendChild(domFieldWrapper) this.domArgs.appendChild(domArgumentWrapper)
} }
} }

26
webui/style.css
View File

@ -319,7 +319,7 @@ form div.wrapper {
} }
label { label {
width: 20%; min-width: 20%;
text-align: right; text-align: right;
display: inline-block; display: inline-block;
padding-right: 1em; padding-right: 1em;
@ -367,6 +367,10 @@ span.argument-description {
margin-left: 1em; margin-left: 1em;
} }
p.argument-wrapper {
display: flex;
}
form div.buttons { form div.buttons {
text-align: right; text-align: right;
} }
@ -411,6 +415,24 @@ div.toolbar * {
margin-right: 1em; margin-right: 1em;
} }
@media screen and (width <= 600px) {
label {
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;
}
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
background-color: #333; background-color: #333;
@ -479,7 +501,7 @@ div.toolbar * {
tr:hover td { tr:hover td {
background-color: #666; background-color: #666;
} }
div.toolbar { div.toolbar {
background-color: black; background-color: black;
} }