diff --git a/assets/webui/index.html b/assets/webui/index.html index 2208ec5..0430910 100644 --- a/assets/webui/index.html +++ b/assets/webui/index.html @@ -354,9 +354,11 @@ - +
diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css index 13a6b01..5ec234e 100644 --- a/assets/webui/ofdgo.css +++ b/assets/webui/ofdgo.css @@ -1665,14 +1665,29 @@ button:not(:disabled):hover { width: 600px; } -.create-image-actions { - display: flex; +.create-images-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; align-items: center; - gap: 8px; + gap: 4px; + margin-bottom: 12px; +} + +.create-image-actions { + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: 4px; +} + +@media (max-width: 600px) { + .create-image-actions { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } } #createImageCount { - margin-left: auto; + align-self: start; + line-height: var(--control-height); color: var(--text-muted); } @@ -1847,9 +1862,7 @@ button:not(:disabled):hover { } #createImageOrder { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); - gap: 4px; + display: contents; } #createImageOrder span { @@ -3427,6 +3440,8 @@ button.outline-link:hover { .navigation-tabs[hidden], .page-selection-tools[hidden], .form-row[hidden], +.create-images-row[hidden], +#createImageOrder[hidden], .form-pair[hidden], .form-actions > [hidden], .document-actions > [hidden], diff --git a/assets/webui/ofdgo.js b/assets/webui/ofdgo.js index e459624..dd7b0f6 100644 --- a/assets/webui/ofdgo.js +++ b/assets/webui/ofdgo.js @@ -3854,6 +3854,7 @@ function updateCreateOptions() { el.createSize.querySelector('[value="image"]').hidden = !images; el.createSize.querySelector('[value="image"]').disabled = !images; el.createImageQueue.hidden = !images || !state.createImageQueue?.entries.length; + el.createImageOrder.hidden = el.createImageQueue.hidden; el.createPanel.classList.toggle("create-images", images); el.createImageAdd.disabled = busy; for (const input of el.createImageOrder.querySelectorAll("input")) input.disabled = busy;