mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-09 11:44:10 +09:00
Refine admin layout design
Improvement on #1056 by @misol - 헤더에 불필요하게 크게 나오는 "Admin" 기본 문구를 톱니바퀴 아이콘으로 대체 - 모바일에서는 톱니바퀴 대신 햄버거 메뉴 아이콘을 표시하여 메뉴 토글 기능 부여 - 현재 선택된 메뉴를 좀더 분명히 구분할 수 있도록 색상 부여 - 색상 대비 개선 및 색상 일관성 개선
This commit is contained in:
Kijin Sung
parent
4ca3bdccc6
commit
e804a43b4e
3 changed files with 79 additions and 64 deletions
|
|
@ -18,7 +18,9 @@
|
|||
<a href="{getUrl('module', 'admin', 'act', $act, 'module_srl', $module_info->module_srl, 'mid', '')}" cond="$this->user->isAdmin()">Admin Panel</a>
|
||||
<!--@else-->
|
||||
<h1>
|
||||
<a href="{getUrl('','module','admin')}"><img cond="$gnb_title_info->adminLogo" src="{getUrl('')}{$gnb_title_info->adminLogo}" alt="{$gnb_title_info->adminTitle}" /> {$gnb_title_info->adminTitle}</a>
|
||||
<a class="custom_header" href="{getUrl('','module','admin')}" cond="$gnb_title_info->adminLogo"><img src="{getUrl('')}{$gnb_title_info->adminLogo}" alt="{$gnb_title_info->adminTitle}" /> {$gnb_title_info->adminTitle}</a>
|
||||
<a class="default_header" href="{getUrl('','module','admin')}" cond="!$gnb_title_info->adminLogo"><i class="xi xi-cog"></i></a>
|
||||
<a class="mobile_menu_open" href="#gnbNav"><i class="xi xi-bars"></i></a>
|
||||
</h1>
|
||||
<p class="site"><a href="{$xe_default_url}">{$xe_default_url}</a></p>
|
||||
<!--@end-->
|
||||
|
|
@ -43,21 +45,8 @@
|
|||
<div class="body <!--@if($_COOKIE['__xe_admin_gnb_status'] == 'close')-->wide<!--@end-->" style="padding-left:0"|cond="$module_manager">
|
||||
<!-- GNB -->
|
||||
<nav class="gnb <!--@if($_COOKIE['__xe_admin_gnb_status'] == 'open')-->open<!--@end-->" id="gnb" cond="!$module_manager">
|
||||
|
||||
<a href="#gnbNav"><i class="x_icon-align-justify x_icon-white"></i><b></b> Menu Open/Close</a>
|
||||
<ul id="gnbNav" class="ex">
|
||||
<!--@foreach($gnbUrlList as $key=>$value)-->
|
||||
<block loop="$value['list']=>$key2,$value2" cond="$subMenuTitle != '' && $value2['text'] == $subMenuTitle">
|
||||
<li class="active active_clone">
|
||||
<a href="{getFullUrl('')}{$value2['href']}"|cond="$subMenuTitle"><span class="tx">{$subMenuTitle}</span></a>
|
||||
</li>
|
||||
</block>
|
||||
<block cond="!$subMenuTitle && $value['href']=='index.php?module=admin'">
|
||||
<li class="active active_clone">
|
||||
<a href="{getFullUrl('')}{$value['href']}" cond="!$subMenuTitle"><span class="tx">{$value['text']}</span></a>
|
||||
</li>
|
||||
</block>
|
||||
<!--@end-->
|
||||
<script>
|
||||
var __xe_admin_gnb_txs = new Array();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -747,7 +747,7 @@ margin-bottom: 10px;
|
|||
padding: 10px 15px;
|
||||
zoom: 1;
|
||||
box-shadow: 0 2px 3px rgba(0,0,0,0.19), 0 1px 1px rgba(0,0,0,0.23);
|
||||
background-color: #455A64;
|
||||
background-color: #263238;
|
||||
}
|
||||
.x>.header:after {
|
||||
content: "";
|
||||
|
|
@ -761,7 +761,6 @@ margin-bottom: 10px;
|
|||
left: 1px;
|
||||
right: 1px;
|
||||
height: 1px;
|
||||
box-shadow: 0 2px 3px #e0e0e0;
|
||||
}
|
||||
.x>.body {
|
||||
position: relative;
|
||||
|
|
@ -780,7 +779,7 @@ margin-bottom: 10px;
|
|||
.x>.body>.content {
|
||||
box-sizing:border-box;
|
||||
width: 100%;
|
||||
padding: 1px 5px 0 5px;
|
||||
padding: 5px 5px 0 5px;
|
||||
float: right;
|
||||
margin: 0 0 0 -100%;
|
||||
outline: none;
|
||||
|
|
@ -838,27 +837,44 @@ margin-bottom: 10px;
|
|||
/* Header */
|
||||
.x>.header>h1 {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
margin: 0 15px 0 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.x>.header>h1>a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
font-size: 22px;
|
||||
line-height: 33px;
|
||||
margin-top: -11px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.x>.header>h1>a>img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media all and (max-width: 799px) {
|
||||
.x>.header>h1>a {
|
||||
display: none;
|
||||
}
|
||||
.x>.header>h1>a.mobile_menu_open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 800px) {
|
||||
.x>.header>h1>a {
|
||||
display: block;
|
||||
}
|
||||
.x>.header>h1>a.mobile_menu_open {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.x>.header>.site {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
margin: 14px 0 0 0;
|
||||
margin: 1px 0 0 0;
|
||||
font-size: 11px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.x>.header>.site>a {
|
||||
text-decoration: none;
|
||||
|
|
@ -869,10 +885,17 @@ margin-bottom: 10px;
|
|||
.x>.header>.site>a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media all and (max-width: 799px) {
|
||||
.x>.header>.site {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.x>.header>.account {
|
||||
float: right;
|
||||
position: relative;
|
||||
margin: 13px 0 0 0;
|
||||
margin: 1px 0 0 0;
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.x>.header>.account>ul {
|
||||
list-style: none;
|
||||
|
|
@ -974,18 +997,18 @@ margin-bottom: 10px;
|
|||
font-size: 0;
|
||||
top: 50%;
|
||||
right: -14px;
|
||||
background: #eee;
|
||||
background: #ECEFF1;
|
||||
width: 12px;
|
||||
height: 50px;
|
||||
margin: -25px 0 0 0;
|
||||
border: 1px solid #e0e0e0;
|
||||
border: 1px solid #CFD8DC;
|
||||
border-left: 0;
|
||||
overflow: hidden;
|
||||
text-indent: 20px;
|
||||
}
|
||||
.x>.body.wide>.gnb>a[href="#gnbNav"]>b {
|
||||
border-color: transparent;
|
||||
border-left-color: #666;
|
||||
border-left-color: #78909C;
|
||||
margin: -4px 0 0 -2px;
|
||||
}
|
||||
.x>.body>.gnb>a[href="#gnbNav"]>b {
|
||||
|
|
@ -997,7 +1020,7 @@ margin-bottom: 10px;
|
|||
margin: -4px 0 0 -6px;
|
||||
border: 4px solid;
|
||||
border-color: transparent;
|
||||
border-right-color: #666;
|
||||
border-right-color: #78909C;
|
||||
}
|
||||
.x>.body>.gnb>a>i {
|
||||
display: none;
|
||||
|
|
@ -1035,7 +1058,6 @@ margin-bottom: 10px;
|
|||
display: none;
|
||||
}
|
||||
@media all and (max-width: 800px) {
|
||||
|
||||
.x>.body>.gnb>ul {
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -1048,21 +1070,6 @@ margin-bottom: 10px;
|
|||
.x>.body>.gnb>ul>li:first-child {
|
||||
display: block !important;
|
||||
}
|
||||
.x>.body>.gnb>a[href="#gnbNav"],
|
||||
.x>.body.wide>.gnb>a[href="#gnbNav"] {
|
||||
top: 0;
|
||||
right: 0;
|
||||
line-height: 40px;
|
||||
width: 40px;
|
||||
height: auto;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
.x>.body>.gnb>a[href="#gnbNav"]>b {
|
||||
display: none;
|
||||
}
|
||||
.x>.body>.gnb>a>i {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -1070,12 +1077,14 @@ margin-bottom: 10px;
|
|||
left: 50%;
|
||||
margin: -7px 0 0 -7px;
|
||||
}
|
||||
|
||||
.x>.body>.gnb>a[href="#gnbNav"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* li */
|
||||
.x>.body>.gnb>ul>li {
|
||||
background: #546E7A;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
border-bottom: 1px solid #CFD8DC;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1083,7 +1092,7 @@ margin-bottom: 10px;
|
|||
border-bottom: none;
|
||||
}
|
||||
.x>.body>.gnb>ul>li.active {
|
||||
background: #78909C;
|
||||
background: #CFD8DC;
|
||||
}
|
||||
.x>.body>.gnb>ul>li.open,
|
||||
.x>.body>.gnb>ul>li.active {
|
||||
|
|
@ -1093,18 +1102,23 @@ margin-bottom: 10px;
|
|||
/* li>a */
|
||||
.x>.body>.gnb>ul>li>a {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
padding: 10px 10px 10px 8px;
|
||||
background: #ECEFF1;
|
||||
}
|
||||
.x>.body>.gnb>ul>li>a>i {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: -4px 4px 0 0;
|
||||
margin: -4px 6px 0 0;
|
||||
vertical-align: middle;
|
||||
opacity: .75;
|
||||
filter: alpha(opacity=75);
|
||||
}
|
||||
@media all and (min-width: 800px) {
|
||||
.x>.body.wide>.gnb>ul>li>a>i {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
.x>.body>.gnb>ul>li>a>b {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
|
|
@ -1192,8 +1206,8 @@ margin-bottom: 10px;
|
|||
}
|
||||
.x>.body>.gnb>ul>li.active>a {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background: #78909C;
|
||||
color: #E65100;
|
||||
background: #FFF8E1;
|
||||
}
|
||||
@media all and (max-width: 800px) {
|
||||
.x>.body>.gnb>ul>li:first-child>a {
|
||||
|
|
@ -1209,11 +1223,16 @@ margin-bottom: 10px;
|
|||
height: 1px;
|
||||
overflow: hidden;
|
||||
line-height: 13px;
|
||||
}
|
||||
@media all and (min-width: 800px) {
|
||||
.x>.body.wide>.gnb>ul>li>a>.tx {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* li>ul */
|
||||
.x>.body>.gnb>ul>li>ul {
|
||||
display: none;
|
||||
margin: 0 1px 1px;
|
||||
margin: 0 1px 0;
|
||||
}
|
||||
.x>.body>.gnb>ul>li.active>ul {
|
||||
display: block!important;
|
||||
|
|
@ -1230,33 +1249,31 @@ margin-bottom: 10px;
|
|||
border: 0;
|
||||
}
|
||||
.x>.body>.gnb>ul>li>ul>li.active_ {
|
||||
box-shadow: 0 0 3px #9E9E9E;
|
||||
z-index: 99;
|
||||
border: 1px solid #666;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
/* li>ul>li>a */
|
||||
.x>.body>.gnb>ul>li>ul>li>a {
|
||||
padding: 7px 7px 7px 20px;
|
||||
padding: 7px 7px 7px 27px;
|
||||
background: #fff;
|
||||
}
|
||||
.x>.body>.gnb>ul>li>ul#favorite>li>a {
|
||||
padding: 7px 25px 7px 20px;
|
||||
padding: 7px 25px 7px 27px;
|
||||
}
|
||||
.x>.body>.gnb>ul>li>ul>li>a:hover,
|
||||
.x>.body>.gnb>ul>li>ul>li>a:active,
|
||||
.x>.body>.gnb>ul>li>ul>li.active_>a {
|
||||
font-weight: bold;
|
||||
color: #546E7A;
|
||||
color: #E65100;
|
||||
background: #FFF8E1;
|
||||
}
|
||||
/* li>ul>li>.action */
|
||||
.x>.body>.gnb>ul>li>ul>li>.remove {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 5px;
|
||||
top: 7px;
|
||||
right: 3px;
|
||||
}
|
||||
.x>.body>.gnb>ul>li>ul>li>.remove>.x_close {
|
||||
font-size: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -142,8 +142,17 @@ jQuery(function($){
|
|||
}
|
||||
});
|
||||
// GNB Mobile Toggle
|
||||
$("a.mobile_menu_open").click(function(){
|
||||
$xGnb.toggleClass('open');
|
||||
if($(this).parent('.gnb').hasClass('open')){
|
||||
setCookie('__xe_admin_gnb_status', 'open', d365);
|
||||
}else{
|
||||
setCookie('__xe_admin_gnb_status', 'close', d365);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
$xGnb.find('>a[href="#gnbNav"]').click(function(){
|
||||
$(this).parent('.gnb').toggleClass('open');
|
||||
$xGnb.toggleClass('open');
|
||||
$xBody.toggleClass('wide');
|
||||
if($(window).width() <= 980 && !$xGnb.hasClass('open')){
|
||||
$('#gnbNav').removeClass('ex');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue