diff --git a/app/Presenters/Admin/OptionFormFieldsPresenter.php b/app/Presenters/Admin/OptionFormFieldsPresenter.php index 8f3d4f7..240935e 100644 --- a/app/Presenters/Admin/OptionFormFieldsPresenter.php +++ b/app/Presenters/Admin/OptionFormFieldsPresenter.php @@ -61,17 +61,34 @@ class OptionFormFieldsPresenter 'value' => $mediaFiledId ], $bastHtmlArgs)); $mediaFieldContentHtml .= $presenter->div([ - 'class' => 'preview', - 'html' => $previewImgHtml + 'class' => 'form-group row', + 'html' => $presenter->div([ + 'class' => 'col-6', + 'html' => $presenter->div([ + 'class' => 'preview', + 'html' => $previewImgHtml + ]) + ]) ]); - $mediaFieldContentHtml .= $presenter->button([ - 'class' => ['btn', 'btn-success', 'select-media'], - 'html' => '選擇' - ]); - $mediaFieldContentHtml .= $presenter->button([ - 'class' => ['btn', 'btn-danger', 'clear-media'], - 'style' => !$mediaFile ? 'display:none;' : '', - 'html' => '清除' + $mediaFieldContentHtml .= $presenter->div([ + 'class' => 'form-group row', + 'html' => [ + $presenter->div([ + 'class' => 'col-3', + 'html' => $presenter->button([ + 'class' => ['btn', 'btn-success', 'select-media'], + 'html' => trans('form.buttons.select') + ]) + ]), + $presenter->div([ + 'class' => 'col-3', + 'html' => $presenter->button([ + 'class' => ['btn', 'btn-danger', 'clear-media'], + 'style' => !$mediaFile ? 'display:none;' : '', + 'html' => trans('form.buttons.remove') + ]) + ]) + ] ]); $html .= $presenter->div([ 'class' => 'option-media-field', diff --git a/resources/js/admin/page/options.js b/resources/js/admin/page/options.js index eb484ba..7e627f1 100644 --- a/resources/js/admin/page/options.js +++ b/resources/js/admin/page/options.js @@ -1,9 +1,10 @@ $('.select-media').on('click', e => { e.preventDefault() let $this = $(e.currentTarget), - $input = $this.siblings('input'), - $preview = $this.siblings('.preview'), - $clearButton = $this.siblings('.clear-media') + $wrapper = $this.closest('.option-media-field'), + $input = $wrapper.find('input'), + $preview = $wrapper.find('.preview'), + $clearButton = $wrapper.find('.clear-media') app.methods.media(true, $input.get(0), true, (data) => { let media = data.medias[0] @@ -17,8 +18,9 @@ $('.select-media').on('click', e => { $('.clear-media').on('click', e => { e.preventDefault() let $this = $(e.currentTarget), - $input = $this.siblings('input'), - $preview = $this.siblings('.preview') + $wrapper = $this.closest('.option-media-field'), + $input = $wrapper.find('input'), + $preview = $wrapper.find('.preview') $input.val(null) $preview.empty() diff --git a/resources/lang/en/form.php b/resources/lang/en/form.php index 1d52aba..4464dd9 100644 --- a/resources/lang/en/form.php +++ b/resources/lang/en/form.php @@ -1,6 +1,8 @@ [ - 'update' => 'Update' + 'update' => 'Update', + 'select' => 'Select', + 'remove' => 'Remove' ] ]; diff --git a/resources/sass/admin/page/options.scss b/resources/sass/admin/page/options.scss index 1408e4b..06bcf5e 100644 --- a/resources/sass/admin/page/options.scss +++ b/resources/sass/admin/page/options.scss @@ -1,7 +1,7 @@ .option-media-field { .preview { img { - max-width: 50%; + max-width: 100%; } } }