fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-14 00:39:57 +09:00
Code Issues Projects Releases Packages Wiki Activity

Issue 2444. site_design.html UI created.

Browse source 
git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11399 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2012-09-20 08:14:13 +00:00
parent 89f8dd5709
commit 80849b95a7
1 changed files with 308 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

309
modules/menu/tpl/site_design.html
View file

@ -1 +1,308 @@
<h1>Site Design</h1>
<div class="x_page-header">
<h1>{$lang->menu_gnb_sub['siteMap']}</h1>
</div>
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
<p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
<div id="site">
<div class="col" id="design">
<fieldset>
<h1>디자인</h1>
<div class="x_tabbable">
<ul class="x_nav x_nav-tabs">
<li class="x_active"><a href="#pc">PC</a></li>
<li><a href="#mobile">모바일</a></li>
</ul>
<div class="x_tabcontent">
<div class="x_tab-pane x_active" id="pc">
<img src="http://naradesign.net/photo/DSCN0687.JPG" alt="현재 설정된 PC 레이아웃">
<a href="#" target="_blank" class="x_icon-zoom-in" title="새창">크게 보기</a>
</div>
<div class="x_tab-pane" id="mobile">
<img src="http://naradesign.net/photo/DSCN0810.JPG" alt="현재 설정된 모바일 레이아웃">
<a href="#" target="_blank" class="x_icon-zoom-in" title="새창">크게 보기</a>
</div>
</div>
</div>
<ul class="nav">
<li><a href="#layout" data-show="#layout">레이아웃 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#skin" data-show="#skin">{게시판} <i class="x_icon-circle-arrow-right"></i></a></li>
</ul>
<div class="btnBoth">
<button type="reset" class="x_btn x_btn-small x_pull-left">취소</button>
<button type="button" class="x_btn x_btn-small x_btn-primary x_pull-right">저장</button>
</div>
</fieldset>
<button type="button" class="x_close" data-hide="#design">&times;</button>
</div>
<div class="col theme" id="layout">
<form action="">
<h1>레이아웃</h1>
<div class="list">
<h2>사용할 수 있는 레이아웃 목록</h2>
<ul>
<li>
<button type="button" class="item" title="클릭하면 레이아웃이 적용됩니다." onClick="alert('\'XE 소개\' 메뉴에 \'엔터프라이즈\' 레이아웃이 적용 됐습니다.')">
<img src="http://naradesign.net/photo/DSCN0687.JPG" alt="엔터프라이즈 레이아웃">
<i class="x_icon-ok"></i>
</button>
<ul>
<li><a href="#layoutSetup">설정 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#layoutHTML">HTML/CSS <i class="x_icon-circle-arrow-right"></i></a></li>
<li><button type="button" onClick="alert('\'엔터프라이즈[2]\' 레이아웃이 생성 됐습니다.')">복사본 생성</button></li>
<li><button type="button" onClick="confirm('\'엔터프라이즈\' 레이아웃을 정말 삭제하시겠습니까? \'고급기능\'에서 다시 생성할 수 있습니다.')">삭제</button></li>
</ul>
</li>
<li>
<button type="button" class="item" title="클릭하면 레이아웃이 적용됩니다." onClick="alert('\'XE 소개\' 메뉴에 \'엔터프라이즈\' 레이아웃이 적용 됐습니다.')">
<img src="http://naradesign.net/photo/DSCN0687.JPG" alt="엔터프라이즈 레이아웃">
<i class="x_icon-ok"></i>
</button>
<ul>
<li><a href="#layoutSetup">설정 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#layoutHTML">HTML/CSS <i class="x_icon-circle-arrow-right"></i></a></li>
<li><button type="button" onClick="alert('\'엔터프라이즈[2]\' 레이아웃이 생성 됐습니다.')">복사본 생성</button></li>
<li><button type="button" onClick="confirm('\'엔터프라이즈\' 레이아웃을 정말 삭제하시겠습니까? \'고급기능\'에서 다시 생성할 수 있습니다.')">삭제</button></li>
</ul>
</li>
</ul>
<div class="x_btn-group">
<a href="#downloadLayout" data-show="#downloadLayout" class="x_btn x_btn-small x_btn-inverse x_pull-right"><i class="x_icon-plus x_icon-white"></i> 다른 레이아웃 설치</a>
</div>
</div>
</form>
<button type="button" class="x_close" data-hide="#layout">&times;</button>
</div>
<div class="col download" id="downloadLayout">
<section>
<h1>다른 레이아웃 설치</h1>
<div class="list">
<script id="tmpl_downloadableMenuTypeItem" type="text/x-jquery-tmpl">
<div class="item">
<img src="http://www.xpressengine.com/files/attach/images/18322904/188/195/021/de5626ccf0bb28ca223fbbeabd891462.jpg" alt="">
<h2>${MenuType}</h2>
<p>${MenuTypeDesc}</p>
<p>별점 ${Score}/${TotalVotes} <i>|</i> 최근 업데이트 ${LastUpdated} <i>|</i> 전체 다운로드 : ${TotalDownloads}</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
</script>
</div>
<div class="x_pagination x_pagination-centered">
<ul>
<li class="x_disabled"><a href="#">&laquo;</a></li>
<li class="x_active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
</section>
<button type="button" class="x_close" data-hide="#downloadLayout">&times;</button>
</div>
<div class="col theme" id="skin">
<form action="">
<h1>스킨</h1>
<div class="list">
<h2>사용할 수 있는 스킨 목록</h2>
<ul>
<li>
<button type="button" class="item" title="클릭하면 스킨이 적용됩니다." onClick="alert('\'XE 소개\' 메뉴에 \'엔터프라이즈\' 스킨이 적용 됐습니다.')">
<img src="http://naradesign.net/photo/DSCN0687.JPG" alt="엔터프라이즈 스킨">
<i class="x_icon-ok"></i>
</button>
<ul>
<li><a href="#skinSetup">설정 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><button type="button" onClick="confirm('\'엔터프라이즈\' 스킨을 정말 삭제하시겠습니까? \'고급기능\'에서 다시 생성할 수 있습니다.')">삭제</button></li>
</ul>
</li>
<li>
<button type="button" class="item" title="클릭하면 스킨이 적용됩니다." onClick="alert('\'XE 소개\' 메뉴에 \'엔터프라이즈\' 스킨이 적용 됐습니다.')">
<img src="http://naradesign.net/photo/DSCN0687.JPG" alt="엔터프라이즈 스킨">
<i class="x_icon-ok"></i>
</button>
<ul>
<li><a href="#skinSetup">설정 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><button type="button" onClick="confirm('\'엔터프라이즈\' 스킨을 정말 삭제하시겠습니까? \'고급기능\'에서 다시 생성할 수 있습니다.')">삭제</button></li>
</ul>
</li>
</ul>
<div class="x_btn-group">
<a href="#downloadSkin" data-show="#downloadSkin" class="x_btn x_btn-small x_btn-inverse x_pull-right"><i class="x_icon-plus x_icon-white"></i> 다른 스킨 설치</a>
</div>
</div>
</form>
<button type="button" class="x_close" data-hide="#skin">&times;</button>
</div>
<div class="col download" id="downloadSkin">
<section>
<h1>다른 스킨 설치</h1>
<div class="list">
<script id="tmpl_downloadableMenuTypeItem" type="text/x-jquery-tmpl">
<div class="item">
<img src="http://www.xpressengine.com/files/attach/images/18322904/188/195/021/de5626ccf0bb28ca223fbbeabd891462.jpg" alt="">
<h2>${MenuType}</h2>
<p>${MenuTypeDesc}</p>
<p>별점 ${Score}/${TotalVotes} <i>|</i> 최근 업데이트 ${LastUpdated} <i>|</i> 전체 다운로드 : ${TotalDownloads}</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
</script>
</div>
<div class="x_pagination x_pagination-centered">
<ul>
<li class="x_disabled"><a href="#">&laquo;</a></li>
<li class="x_active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
</section>
<button type="button" class="x_close" data-hide="#downloadSkin">&times;</button>
</div>
<div class="col" id="details">
{설정}
<button type="button" class="x_close" data-hide="#details">&times;</button>
</div>
<div class="col" id="html">
{HTML/CSS}
<button type="button" class="x_close" data-hide="#html">&times;</button>
</div>
</div>
<style>
/* Site */
#site{position:relative;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
#site .btnBoth,
#site .x_btn-group{text-align:right;padding:10px 0;margin:15px 0;border-top:1px solid #ccc}
#site .btnBoth:after{content:"";display:block;clear:both}
.col{display:inline-block;vertical-align:top;position:relative;white-space:normal;height:100%;min-width:220px;padding:10px 25px 10px 10px;margin:0 4px 0 0;overflow-y:auto;overflow-x:hidden;border:1px solid #ddd}
.col>*>h1{line-height:30px;font-size:16px;border-bottom:2px solid #666;margin:0;color:#333}
.col>*>ul{margin:0;padding:0;list-style:none}
.col>.x_close{position:absolute;top:0;right:0;width:32px;height:32px}
.col input[type="checkbox"],
.col input[type="radio"]{margin:0}
.col label{cursor:pointer}
/* Nav */
.col .nav li{border-bottom:1px solid #ddd;position:relative;white-space:nowrap}
.col .nav li:first-child{border-top:0}
.col .nav li>a,
.col .nav li>button{text-align:left;color:#000;background-color:transparent;border:0;display:block;padding:5px 15px 5px 8px;color:#333;text-decoration:none;background:#fff;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
.col .nav li>button{width:100%}
.col .nav li>a:hover,
.col .nav li>a:focus,
.col .nav li.active>a,
.col .nav li>button:hover,
.col .nav li>button:focus{background:#666;color:#fff}
.col .nav li>a>i{position:absolute;top:50%;right:5px;margin:-7px 0 0 0;opacity:.5;filter:alpha(opacity=50)}
.col .nav li>a:hover>i,
.col .nav li>a:focus>i,
.col .nav li.active>a>i{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png);background-repeat:no-repeat;opacity:1;filter:alpha(opacity=100)}
.col input[type="file"]{ width:1px;height:1px;overflow:hidden;font-size:0;line-height:0;opacity:0;filter:alpha(opacity=0)}
/* Download */
.download.col{max-width:600px}
.download .list{padding:1px 0;border-bottom:1px solid #ccc;}
.download .item{border-top:1px solid #ddd;padding:1px 0 1px 95px;position:relative}
.download .item:first-child{border:0}
.download .item>img{position:absolute;top:15px;left:0;width:80px;height:80px}
.download h2{font-size:14px}
.download a.x_icon-download-alt{width:24px;height:24px;background-color:#94A55C;position:absolute;top:7px;right:0;border-radius:3px;background-position:-90px -19px}
.download a.x_icon-download-alt:hover,
.download a.x_icon-download-alt:focus{background-color:#333}
.download p>i{font-style:normal;color:#ccc}
/* Theme(layout|skin) */
.theme img{width:220px}
.theme h2{font-size:14px;border-bottom:1px solid #ddd;margin:0;padding:15px 0 8px 0}
.theme ul button{background-color:transparent;border:0;padding:0;margin:0;overflow:visible;}
.theme ul{margin:0;padding:0;list-style:none}
.theme li{zoom:1}
.theme li:after{content:"";display:block;clear:both}
.theme .list>ul>li{height:146px;padding:8px 0 8px 230px;border-top:1px dashed #ddd;position:relative}
.theme .list>ul>li:first-child{border:0}
.theme .item{position:absolute;margin:0 -220px 0 0;left:0;top:8px}
.theme .item>i{display:none}
.theme .item:hover>i,
.theme .item:focus>i{display:block;position:absolute;bottom:0;right:0;background-color:#fff;width:24px;height:24px;opacity:.75;filter:alpha(opacity=75);background-position:-283px 5px}
.theme ul ul{white-space:nowrap}
.theme ul ul a>i{position:absolute;top:2px;right:2px}
.theme ul ul>li>*{display:block;text-align:left;position:relative;text-decoration:none;padding:0 24px 0 5px;border-radius:3px;color:#000;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
.theme ul ul>li>*:hover,
.theme ul ul>li>*:focus{background:#666;color:#fff}
.theme ul ul>li>a:hover>i,
.theme ul ul>li>a:focus>i{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png)}
.theme ul ul>li>button{width:100%;}
/* Design */
#design ul{margin-top:8px}
#design .btnBoth{border:0;margin-top:0}
#design img{width:220px}
#design .x_tab-pane{position:relative}
#design .x_icon-zoom-in{position:absolute;right:0;bottom:0;width:24px;height:24px;background-color:#fff;opacity:.75;filter:alpha(opacity:75);background-position:-331px 5px}
#design .x_icon-zoom-in:after{content:normal}
</style>
<!--[if IE 7]>
<script>
jQuery(function($){
// IE .col width bug fix
$('.col').each(function(){
var $this = $(this);
setTimeout(function(){
var childW = $this.children().width();
$this.width(childW);
},0);
});
});
</script>
<![endif]-->
<script>
//<![CDATA[
jQuery(function($){
// TARGET toggle
$(document.body).on("click", ".x [data-toggle]", function(ev){
$($(ev.srcElement).attr('data-toggle')).toggle();
return false;
});
// TARGET show
$(document.body).on("click", ".x [data-show]", function(ev){
var $target = $($(ev.srcElement).attr('data-show'));
if($target.hasClass("col")){
$target.nextAll().hide();
}
$target.show();
});
// TARGET hide
$(document.body).on("click", ".x [data-hide]", function(ev){
var $target = $($(ev.srcElement).attr('data-hide'));
if($target.hasClass("col")){
$target.nextAll().hide();
// $target.prevUntilAnd(".shown").find('li.active').removeClass('active');
}
$target.hide();
});
// Set #site height fix
$(window).resize(function(){
var wHeigh = $(window).height();
$('#site').height(wHeigh - 270).children('.col').height(wHeigh - 315);
}).resize();
// Navigation a active/inactive
var $navAnchor = $('a>i.x_icon-circle-arrow-right').parent('a');
$navAnchor.click(function(){
$(this).parent('li').addClass('active').siblings('li').removeClass('active');
});
$('.x_close[data-hide]').click(function(){
var inactiveTarget = $(this).attr('data-hide');
$navAnchor.each(function(){
var href = $(this).attr('href');
if(href == inactiveTarget){
$(this).parent('li').removeClass('active');
}
});
});
});
//]]>
</script>