調整media設定選項欄位的樣式
This commit is contained in:
parent
be87044080
commit
c68e25de0a
@ -61,17 +61,34 @@ class OptionFormFieldsPresenter
|
||||
'value' => $mediaFiledId
|
||||
], $bastHtmlArgs));
|
||||
$mediaFieldContentHtml .= $presenter->div([
|
||||
'class' => 'form-group row',
|
||||
'html' => $presenter->div([
|
||||
'class' => 'col-6',
|
||||
'html' => $presenter->div([
|
||||
'class' => 'preview',
|
||||
'html' => $previewImgHtml
|
||||
])
|
||||
])
|
||||
]);
|
||||
$mediaFieldContentHtml .= $presenter->button([
|
||||
$mediaFieldContentHtml .= $presenter->div([
|
||||
'class' => 'form-group row',
|
||||
'html' => [
|
||||
$presenter->div([
|
||||
'class' => 'col-3',
|
||||
'html' => $presenter->button([
|
||||
'class' => ['btn', 'btn-success', 'select-media'],
|
||||
'html' => '選擇'
|
||||
]);
|
||||
$mediaFieldContentHtml .= $presenter->button([
|
||||
'html' => trans('form.buttons.select')
|
||||
])
|
||||
]),
|
||||
$presenter->div([
|
||||
'class' => 'col-3',
|
||||
'html' => $presenter->button([
|
||||
'class' => ['btn', 'btn-danger', 'clear-media'],
|
||||
'style' => !$mediaFile ? 'display:none;' : '',
|
||||
'html' => '清除'
|
||||
'html' => trans('form.buttons.remove')
|
||||
])
|
||||
])
|
||||
]
|
||||
]);
|
||||
$html .= $presenter->div([
|
||||
'class' => 'option-media-field',
|
||||
|
||||
12
resources/js/admin/page/options.js
vendored
12
resources/js/admin/page/options.js
vendored
@ -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()
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<?php
|
||||
return [
|
||||
'buttons' => [
|
||||
'update' => 'Update'
|
||||
'update' => 'Update',
|
||||
'select' => 'Select',
|
||||
'remove' => 'Remove'
|
||||
]
|
||||
];
|
||||
|
||||
2
resources/sass/admin/page/options.scss
vendored
2
resources/sass/admin/page/options.scss
vendored
@ -1,7 +1,7 @@
|
||||
.option-media-field {
|
||||
.preview {
|
||||
img {
|
||||
max-width: 50%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user