diff --git a/public/css/admin.css b/public/css/admin.css index 6be934e2..9f3d97c7 100644 --- a/public/css/admin.css +++ b/public/css/admin.css @@ -34,7 +34,7 @@ color: #fff; } #crop_editor input[type=number] { - width: 75px; + width: 85px; background: #555; color: #fff; } @@ -44,6 +44,7 @@ .crop_position { background: rgba(0, 0, 0, 1.0); border: none; + display: flex; padding: 5px; text-align: center; } diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js index e1e33297..5aa64c60 100644 --- a/public/js/crop_editor.js +++ b/public/js/crop_editor.js @@ -16,6 +16,7 @@ class CropEditor { initDOM() { this.container = document.createElement("div"); + this.container.className = 'container-fluid'; this.container.id = "crop_editor"; this.initPositionForm(); @@ -27,19 +28,30 @@ class CropEditor { initPositionForm() { this.position = document.createElement("fieldset"); - this.position.className = "crop_position"; + this.position.className = "crop_position flex-row justify-content-center"; this.container.appendChild(this.position); const addNumericControl = (label, changeEvent) => { - const labelEl = document.createTextNode("div"); - this.position.appendChild(labelEl); + const column = document.createElement('div'); + column.className = 'col-auto'; + this.position.appendChild(column); + + const group = document.createElement('div'); + group.className = 'input-group'; + column.appendChild(group); + + const labelEl = document.createElement("span"); + labelEl.className = 'input-group-text'; + labelEl.textContent = label; + group.appendChild(labelEl); const control = document.createElement("input"); - control.className = 'form-control d-inline'; + control.className = 'form-control'; control.type = 'number'; control.addEventListener("change", changeEvent); control.addEventListener("keyup", changeEvent); - this.position.appendChild(control); + group.appendChild(control); + return control; }; @@ -48,28 +60,38 @@ class CropEditor { this.crop_width = addNumericControl("Crop width:", this.positionBoundary); this.crop_height = addNumericControl("Crop height:", this.positionBoundary); - this.crop_constrain_label = document.createElement("label"); - this.position.appendChild(this.crop_constrain_label); + const otherColumn = document.createElement('div'); + otherColumn.className = 'col-auto text-nowrap'; + this.position.appendChild(otherColumn); + + const constrainContainer = document.createElement("div"); + constrainContainer.className = 'form-checkbox d-inline'; + otherColumn.appendChild(constrainContainer); this.crop_constrain = document.createElement("input"); this.crop_constrain.checked = true; + this.crop_constrain.className = 'form-check-input'; + this.crop_constrain.id = 'check_constrain'; this.crop_constrain.type = 'checkbox'; - this.crop_constrain_label.appendChild(this.crop_constrain); + constrainContainer.appendChild(this.crop_constrain); - this.crop_constrain_text = document.createTextNode('Constrain proportions'); - this.crop_constrain_label.appendChild(this.crop_constrain_text); + this.crop_constrain_label = document.createElement("label"); + this.crop_constrain_label.className = 'form-check-label'; + this.crop_constrain_label.htmlFor = 'check_constrain'; + this.crop_constrain_label.textContent = 'Constrain proportions'; + constrainContainer.appendChild(this.crop_constrain_label); this.save_button = document.createElement("span"); this.save_button.className = "btn btn-light"; this.save_button.textContent = "Save"; this.save_button.addEventListener('click', this.save.bind(this)); - this.position.appendChild(this.save_button); + otherColumn.appendChild(this.save_button); this.abort_button = document.createElement("span"); this.abort_button.className = "btn btn-danger"; this.abort_button.textContent = "Abort"; this.abort_button.addEventListener('click', this.hide.bind(this)); - this.position.appendChild(this.abort_button); + otherColumn.appendChild(this.abort_button); } initImageContainer() { @@ -153,7 +175,7 @@ class CropEditor { this.source_x.max = source.naturalWidth - 1; this.source_y.max = source.naturalHeight - 1; - this.crop_constrain_text.textContent = `Constrain proportions (${current.crop_width} × ${current.crop_height})`; + this.crop_constrain_label.textContent = `Constrain proportions (${current.crop_width} × ${current.crop_height})`; } showContainer() {