모바일이나 HTML5 를 잘 지원하는 환경에서 에디터 컴포넌트 사용 개선

- 폭이 좁은 화면에서도 기본 에디터 컴포넌트를 편하게 사용할 수 있게 개선
- 컬러피커가 내장된 HTML5 지원 브라우저에서는 내장된 컬러피커를 이용하도록 개선(type=color 인 경우)
- input type=number, type=url 등을 지원하는 브라우저에서 조금 더 편리하게 컴포넌트 항목을 다루도록 수정
- 갤러리 컴포넌트가 확장자 대문자인 경우 이미지를 표시하지 못하던 문제 수정.
This commit is contained in:
MinSoo Kim 2016-02-05 23:36:58 +09:00
parent ff87af87a0
commit 8de3dfb4e8
13 changed files with 86 additions and 73 deletions

View file

@ -1,3 +1,5 @@
@charset "utf-8";
@import url(../../../../../modules/admin/tpl/css/admin.css);
@import url(../../../../../common/css/bootstrap.min.css);
@charset "UTF-8";
/* for mobile view */
div.xe_mobile {
display:none!important;
}

View file

@ -1,14 +1,15 @@
<!--%import("popup.js")-->
<!--%import("popup.css")-->
<!--%import("../lang")-->
{@Context::addMetaTag('viewport', 'width=device-width', FALSE);}
<section class="section">
<h1>{$component_info->title} ver. {$component_info->version}</h1>
<h1>{$component_info->title}</h1>
<form action="./" method="get" onSubmit="return false" id="fo" class="x_form-horizontal">
<input type="hidden" name="editor_sequence" value="{$editor_sequence}" />
<div class="x_control-group">
<label for="" class="x_control-label">{$lang->width}</label>
<div class="x_controls">
<input type="text" size="3" id="width" value="400" />px
<input type="number" size="3" id="width" value="400" />px
</div>
</div>
<div class="x_control-group">
@ -33,19 +34,19 @@
<div class="x_control-group">
<label for="" class="x_control-label">{$lang->gallery_border_thickness}</label>
<div class="x_controls">
<input type="text" size="1" id="border_thickness" value="0" />px
<input type="number" size="1" id="border_thickness" value="0" />px
</div>
</div>
<div class="x_control-group">
<label for="" class="x_control-label">{$lang->gallery_border_color}</label>
<div class="x_controls">
<input type="text" id="border_color_input" class="color-indicator" size="7" maxlength="6" value="#000000" />
<input type="color" id="border_color_input" class="color-indicator" size="7" value="#000000" />
</div>
</div>
<div class="x_control-group">
<label for="" class="x_control-label">{$lang->gallery_bg_color}</label>
<div class="x_controls">
<input type="text" id="bg_color_input" class="color-indicator" size="7" maxlength="6" value="#FFFFFF" />
<input type="color" id="bg_color_input" class="color-indicator" size="7" value="#FFFFFF" />
</div>
</div>
<div class="x_control-group">