모바일이나 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,7 +1,4 @@
@charset "utf-8";
@import url(../../../../../modules/admin/tpl/css/admin.css);
@import url(../../../../../common/css/bootstrap.min.css);
@charset "UTF-8";
.image_align {
margin:0px 0px 5px 0px;
float:left;
@ -9,3 +6,8 @@
}
li {list-style:none; float:left; margin-right:.5em;}
/* for mobile view */
div.xe_mobile {
display:none!important;
}

View file

@ -1,8 +1,9 @@
<!--%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">
<div class="x_control-group">
<label for="image_url" class="x_control-label">{$lang->image_url}</label>
@ -13,15 +14,15 @@
<div class="x_control-group">
<label class="x_control-label">{$lang->image_scale}</label>
<div class="x_controls">
<input type="text" id="width" value="0" size="4" style="width:80px" /> px
<input type="text" id="height" value="0" size="4" style="width:80px" /> px
<input type="number" id="width" value="0" size="4" style="width:50px" /> px
<input type="number" id="height" value="0" size="4" style="width:50px" /> px
<button type="button" id="get_scale" class="x_btn">{$lang->cmd_get_scale}</button>
</div>
</div>
<div class="x_control-group">
<label for="link_url" class="x_control-label">URL</label>
<div class="x_controls">
<input type="text" id="link_url" value=""/>
<input type="url" id="link_url" value=""/>
</div>
</div>
<div class="x_control-group">
@ -64,13 +65,13 @@
<div class="x_control-group">
<label for="image_border" class="x_control-label">{$lang->image_border}</label>
<div class="x_controls">
<input type="text" id="image_border" value="0" size="2" />px
<input type="number" id="image_border" value="0" size="2" />px
</div>
</div>
<div class="x_control-group">
<label for="image_margin" class="x_control-label">{$lang->image_margin}</label>
<div class="x_controls">
<input type="text" id="image_margin" value="0" size="2" />px
<input type="number" id="image_margin" value="0" size="2" />px
</div>
</div>
<div class="x_clearfix btnArea">