Refine admin layout design

Improvement on #1056 by @misol

- 헤더에 불필요하게 크게 나오는 "Admin" 기본 문구를 톱니바퀴 아이콘으로 대체
- 모바일에서는 톱니바퀴 대신 햄버거 메뉴 아이콘을 표시하여 메뉴 토글 기능 부여
- 현재 선택된 메뉴를 좀더 분명히 구분할 수 있도록 색상 부여
- 색상 대비 개선 및 색상 일관성 개선

modules/admin/tpl/_header.html

@@ -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>

modules/admin/tpl/css/admin.css

@@ -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;
+	font-size: 22px;
-	line-height: 40px;
+	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;
+	margin: 1px 0 0 0;
-	zoom: 1;
-	margin: 14px 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;
+	padding: 10px 10px 10px 8px;
-	background: #fff;
+	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;
+	color: #E65100;
-	background: #78909C;
+	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;
+	top: 7px;
-	right: 5px;
+	right: 3px;
 }
 .x>.body>.gnb>ul>li>ul>li>.remove>.x_close {
+	font-size: 12px;
 	width: 20px;
 	height: 20px;
 }

modules/admin/tpl/js/admin.js

@@ -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');