Issue 2442 minor fix.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11216 201d5d3c-b55e-5fd7-737f-ddc643e51545

modules/admin/tpl/_footer.html

@@ -1,5 +1,5 @@
 		<!-- GNB -->
-		<nav class="gnb ready" id="gnb">
+		<nav class="gnb" id="gnb">
 			<ul>
 				<li loop="$gnbUrlList=>$key,$value" class="active open"|cond="$parentSrl==$key || $value['href']=='index.php?module=admin' && !$mid && !$act"><a href="{getFullUrl('')}{$value['href']}"><span class="tx">{$value['text']}</span></a>
 					<ul cond="count($value['list'])">

modules/admin/tpl/css/admin.css

@@ -1,6 +1,6 @@
 @charset "utf-8";
 /* Reset */
-html{height:100%}
+html{min-height:100%}
 body{margin:8px;-webkit-text-size-adjust:none}
 body>.x{margin:15px auto;min-width:290px;max-width:1200px}
 @media all and (max-width:480px){
@@ -35,7 +35,7 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.body:after{content:"";display:block;clear:both}
 .x>.body>.content{width:100%;padding:1px 0 0 0;float:right;margin:0 0 30px -100%}
 .x>.body>.content>*:first-child{margin-top:0}
-.x>.body>.gnb{position:relative;left:-240px;float:left;width:220px;margin:0 -220px 0 0}
+.x>.body>.gnb{position:relative;left:-240px;float:left;width:220px;margin:0 -220px 0 0;background:#f4f4f4;box-shadow:2px 0 4px #ddd}
 .x>.body.wide>.gnb{width:36px;margin:0 -36px 0 0;left:-60px}
 @media all and (max-width:1023px){
 .x>.body,
@@ -74,15 +74,15 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.footer>.cache>*{color:#666}
 .x>.footer .vr{color:#ccc !important}
 /* GNB */
+.x>.body>.gnb>.close{background:none;border:0;position:absolute;top:0;left:0;width:100%;height:1px;overflow:hidden;margin:0;padding:0}
 .x>.body>.gnb ul{margin:0 0 15px 0;padding:0;list-style:none}
-.x>.body>.gnb>ul{box-shadow:1px 2px 4px #ddd;border-radius:0 0 5px 0}
+.x>.body>.gnb>ul{box-shadow:0 2px 4px #ddd}
 .x>.body>.gnb a{text-decoration:none;text-shadow:0 1px 0 #fff;color:#000;display:block}
 	/* li */
-.x>.body>.gnb>ul>li{background:#2F96B4;border-top:1px solid #fff;border-bottom:1px solid #ddd;vertical-align:top;white-space:nowrap}
+.x>.body>.gnb>ul>li{background:#94a55c;border-top:1px solid #fff;border-bottom:1px solid #ddd;vertical-align:top;white-space:nowrap}
 .x>.body>.gnb>ul>li.active{background:#222}
 .x>.body>.gnb>ul>li.open,
 .x>.body>.gnb>ul>li.active{border-bottom:0;padding:0 0 1px 0}
-.x>.body>.gnb>ul>li:last-child{border-radius:0 0 5px 0}
 	/* li>a */
 .x>.body>.gnb>ul>li>a{padding:8px 5px 8px 10px;background:#f1f1f1;background:-webkit-gradient(linear,left top,left bottom,from(#F1F1F1),to(#E8E8E8));background:-moz-linear-gradient(top,#F1F1F1,#E8E8E8);background:-o-linear-gradient(top,#F1F1F1,#E8E8E8)}
 .x>.body>.gnb>ul>li>a:before{content:"";display:inline-block;width:14px;height:14px;margin:0 4px 0 0;vertical-align:middle;opacity:.75;filter:alpha(opacity=75)}
@@ -97,11 +97,12 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.body>.gnb>ul>li>a[href="#gnb"]:before{background-position:-432px -119px}
 .x>.body>.gnb>ul>li>a:hover,
 .x>.body>.gnb>ul>li>a:focus{background:#f6f6f6;background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#F1F1F1));background:-moz-linear-gradient(top,#f6f6f6,#F1F1F1);background:-o-linear-gradient(top,#f6f6f6,#F1F1F1)}
-.x>.body>.gnb>ul>li.open>a{font-weight:bold;color:#fff;text-shadow:0 -1px 0 #333;background:#2F96B4;background:-webkit-gradient(linear,left top,left bottom,from(#5BC0DE),to(#2F96B4));background:-moz-linear-gradient(top,#5BC0DE,#2F96B4);background:-o-linear-gradient(top,#5BC0DE,#2F96B4)}
+.x>.body>.gnb>ul>li.open>a{font-weight:bold;color:#fff;text-shadow:0 -1px 0 #333;background:#94a55c;background:-webkit-gradient(linear,left top,left bottom,from(#b3d155),to(#94a55c));background:-moz-linear-gradient(top,#b3d155,#94a55c);background:-o-linear-gradient(top,#b3d155,#94a55c)}
 .x>.body>.gnb>ul>li.active>a{font-weight:bold;color:#fff;text-shadow:none;background:#222;background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#222));background:-moz-linear-gradient(top,#555,#222);background:-o-linear-gradient(top,#555,#222)}
 	/* li>a>span */
 .x>.body.wide>.gnb>ul>li>a>.tx{display:inline-block;width:1px;height:1px;overflow:hidden}
 .x>.body>.gnb>ul>li>a>.closeAll,
+.x>.body.wide>.gnb>ul>li.open>a>.closeAll,
 .x>.body>.gnb>ul>li.open>a>.openAll{display:none}
 .x>.body>.gnb>ul>li.open>a>.closeAll{display:inline}
 	/* li>ul */

modules/admin/tpl/css/admin.min.css

@@ -1,6 +1,6 @@
 @charset "utf-8";
 /* Reset */
-html{height:100%}
+html{min-height:100%}
 body{margin:8px;-webkit-text-size-adjust:none}
 body>.x{margin:15px auto;min-width:290px;max-width:1200px}
 @media all and (max-width:480px){
@@ -35,7 +35,7 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.body:after{content:"";display:block;clear:both}
 .x>.body>.content{width:100%;padding:1px 0 0 0;float:right;margin:0 0 30px -100%}
 .x>.body>.content>*:first-child{margin-top:0}
-.x>.body>.gnb{position:relative;left:-240px;float:left;width:220px;margin:0 -220px 0 0}
+.x>.body>.gnb{position:relative;left:-240px;float:left;width:220px;margin:0 -220px 0 0;background:#f4f4f4;box-shadow:2px 0 4px #ddd}
 .x>.body.wide>.gnb{width:36px;margin:0 -36px 0 0;left:-60px}
 @media all and (max-width:1023px){
 .x>.body,
@@ -74,15 +74,15 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.footer>.cache>*{color:#666}
 .x>.footer .vr{color:#ccc !important}
 /* GNB */
+.x>.body>.gnb>.close{background:none;border:0;position:absolute;top:0;left:0;width:100%;height:1px;overflow:hidden;margin:0;padding:0}
 .x>.body>.gnb ul{margin:0 0 15px 0;padding:0;list-style:none}
-.x>.body>.gnb>ul{box-shadow:1px 2px 4px #ddd;border-radius:0 0 5px 0}
+.x>.body>.gnb>ul{box-shadow:0 2px 4px #ddd}
 .x>.body>.gnb a{text-decoration:none;text-shadow:0 1px 0 #fff;color:#000;display:block}
 	/* li */
-.x>.body>.gnb>ul>li{background:#2F96B4;border-top:1px solid #fff;border-bottom:1px solid #ddd;vertical-align:top;white-space:nowrap}
+.x>.body>.gnb>ul>li{background:#94a55c;border-top:1px solid #fff;border-bottom:1px solid #ddd;vertical-align:top;white-space:nowrap}
 .x>.body>.gnb>ul>li.active{background:#222}
 .x>.body>.gnb>ul>li.open,
 .x>.body>.gnb>ul>li.active{border-bottom:0;padding:0 0 1px 0}
-.x>.body>.gnb>ul>li:last-child{border-radius:0 0 5px 0}
 	/* li>a */
 .x>.body>.gnb>ul>li>a{padding:8px 5px 8px 10px;background:#f1f1f1;background:-webkit-gradient(linear,left top,left bottom,from(#F1F1F1),to(#E8E8E8));background:-moz-linear-gradient(top,#F1F1F1,#E8E8E8);background:-o-linear-gradient(top,#F1F1F1,#E8E8E8)}
 .x>.body>.gnb>ul>li>a:before{content:"";display:inline-block;width:14px;height:14px;margin:0 4px 0 0;vertical-align:middle;opacity:.75;filter:alpha(opacity=75)}
@@ -97,11 +97,12 @@ body>.x,.x table,.x input,.x textarea,.x select,.x button{font-size:13px}
 .x>.body>.gnb>ul>li>a[href="#gnb"]:before{background-position:-432px -119px}
 .x>.body>.gnb>ul>li>a:hover,
 .x>.body>.gnb>ul>li>a:focus{background:#f6f6f6;background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#F1F1F1));background:-moz-linear-gradient(top,#f6f6f6,#F1F1F1);background:-o-linear-gradient(top,#f6f6f6,#F1F1F1)}
-.x>.body>.gnb>ul>li.open>a{font-weight:bold;color:#fff;text-shadow:0 -1px 0 #333;background:#2F96B4;background:-webkit-gradient(linear,left top,left bottom,from(#5BC0DE),to(#2F96B4));background:-moz-linear-gradient(top,#5BC0DE,#2F96B4);background:-o-linear-gradient(top,#5BC0DE,#2F96B4)}
+.x>.body>.gnb>ul>li.open>a{font-weight:bold;color:#fff;text-shadow:0 -1px 0 #333;background:#94a55c;background:-webkit-gradient(linear,left top,left bottom,from(#b3d155),to(#94a55c));background:-moz-linear-gradient(top,#b3d155,#94a55c);background:-o-linear-gradient(top,#b3d155,#94a55c)}
 .x>.body>.gnb>ul>li.active>a{font-weight:bold;color:#fff;text-shadow:none;background:#222;background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#222));background:-moz-linear-gradient(top,#555,#222);background:-o-linear-gradient(top,#555,#222)}
 	/* li>a>span */
 .x>.body.wide>.gnb>ul>li>a>.tx{display:inline-block;width:1px;height:1px;overflow:hidden}
 .x>.body>.gnb>ul>li>a>.closeAll,
+.x>.body.wide>.gnb>ul>li.open>a>.closeAll,
 .x>.body>.gnb>ul>li.open>a>.openAll{display:none}
 .x>.body>.gnb>ul>li.open>a>.closeAll{display:inline}
 	/* li>ul */

modules/admin/tpl/js/admin.js

@@ -11,47 +11,84 @@ jQuery(function($){
 		$($(this).attr('data-toggle')).toggle();
 		return false;
 	});
-// GNB Click
+// GNB Height 100%
 	var $xBody = $('.x>.body');
 	var $xContent = $xBody.find('>.content');
 	var $xGnb = $xBody.find('>.gnb');
-	$xGnb.find('>ul>li>a').click(function(){
+	var $xGnb_li = $xGnb.find('>ul>li');
-		var $xGnbReady = $xGnb.hasClass('ready');
+	$(window).resize(function(){
-		var $this = $(this);
+		setTimeout(function(){
-		var $li = $xGnb.find('>ul>li');
+			if($(window).width() >= 1024){ // Over than 1024px
-		if($xGnbReady && $this.next('ul').length==1){
+				$xGnb.height('auto').height($xBody.height());
-			$li.not($this.parent('li')).removeClass('open');
+			} else { // Less than 1024
-			$this.parent('li').toggleClass('open');
+				$xGnb.height('auto');
-			return false;
+				$xBody.removeClass('wide');
-		} else if(!$xGnbReady && $this.next('ul').length==1){
+			}
-			return false;
+		},100);
-		}
+	}).resize();
-		if($this.attr('href')=='#gnb' && !$this.parent('li').hasClass('open')){
+	// Trigger for GNB height resize
-			$li.addClass('open');
+	$($xBody, $xContent, $xGnb).bind('click mouseenter mouseleave focusin focusout', function(){ 
-			$xGnb.removeClass('ready');
+		$(window).resize();
-		} else {
-			$li.removeClass('open');
-			$xGnb.addClass('ready');
-		}
 	});
-// GNB Hover
+// GNB Click toggle
-	function contentBugFix(){
+	// Add virtual class
+	$xGnb_li.find('>ul').prev('a').addClass('virtual');
+	// Virtual click
+	$xGnb_li.find('>a.virtual')
+		.bind('click focus', function(event){
+			var $this = $(this);
+			// Submenu toggle
+			if(!$xGnb.hasClass('all')) { 
+				$xGnb_li.not($this.parent('li')).removeClass('open');
+				$(this).parent('li').toggleClass('open');
+			} 
+			// GNB Hover
+			$xGnb.trigger('mouseenter');
+			return false;
+		});
+	// Toggle all
+	$xGnb_li.find('>a[href="#gnb"]')
+		.click(function(){
+			if(!$xGnb.hasClass('all')){ // Open All
+				$xGnb_li.addClass('open');
+				$xGnb.addClass('all');
+			} else { // Close All
+				$xGnb_li.removeClass('open');
+				$xGnb.removeClass('all');
+			}
+		})
+		.focus(function(){
+			// GNB Hover
+			$xGnb.trigger('mouseenter');
+		});
+// GNB Hover toggle
+	function contentBugFix(){ // Chrome browser rendering bug fix
 		$xContent.width('99.99%');
 		setTimeout(function(){
 			$xContent.removeAttr('style');
 		}, 0);
 	}
 	$xGnb
-		.bind('mouseenter', function(){
+		.mouseenter(function(){ // Mouseenter
-			if($xGnb.hasClass('ready')){
+			if($(window).width() >= 1024){
-				$xBody.removeClass('wide');
+				setTimeout(function(){
-				contentBugFix();
+					$xBody.removeClass('wide');
+					contentBugFix();
+				}, 200);
 			}
 		})
-		.bind('mouseleave', function(){
+		.mouseleave(function(){ // Mouseleave
-			if($xGnb.hasClass('ready')){
+			if($(window).width() >= 1024){
 				$xBody.addClass('wide');
 				contentBugFix();
 			}
-		})
+		});
+// GNB Close
+	$xGnb
+		.prepend('<button type="button" class="close before" />')
+		.append('<button type="button" class="close after" />');
+	$xGnb.find('>.before, >.after').focus(function(){
+		$xBody.addClass('wide');
+		contentBugFix();
+	});
 });

modules/admin/tpl/js/admin.min.js

@@ -11,24 +11,84 @@ jQuery(function($){
 		$($(this).attr('data-toggle')).toggle();
 		return false;
 	});
-// GNB
+// GNB Height 100%
-	$('.x .gnb>ul>li>a').click(function(){
+	var $xBody = $('.x>.body');
-		var $t = $(this);
+	var $xContent = $xBody.find('>.content');
-		var $gnb = $('.gnb');
+	var $xGnb = $xBody.find('>.gnb');
-		var $li = $('.x .gnb>ul>li');
+	var $xGnb_li = $xGnb.find('>ul>li');
-		if($gnb.hasClass('able') && $t.next('ul').length==1){
+	$(window).resize(function(){
-			$li.not($t.parent('li')).removeClass('open');
+		setTimeout(function(){
-			$t.parent('li').toggleClass('open');
+			if($(window).width() >= 1024){ // Over than 1024px
+				$xGnb.height('auto').height($xBody.height());
+			} else { // Less than 1024
+				$xGnb.height('auto');
+				$xBody.removeClass('wide');
+			}
+		},100);
+	}).resize();
+	// Trigger for GNB height resize
+	$($xBody, $xContent, $xGnb).bind('click mouseenter mouseleave focusin focusout', function(){ 
+		$(window).resize();
+	});
+// GNB Click toggle
+	// Add virtual class
+	$xGnb_li.find('>ul').prev('a').addClass('virtual');
+	// Virtual click
+	$xGnb_li.find('>a.virtual')
+		.bind('click focus', function(event){
+			var $this = $(this);
+			// Submenu toggle
+			if(!$xGnb.hasClass('all')) { 
+				$xGnb_li.not($this.parent('li')).removeClass('open');
+				$(this).parent('li').toggleClass('open');
+			} 
+			// GNB Hover
+			$xGnb.trigger('mouseenter');
 			return false;
-		} else if(!$gnb.hasClass('able') && $t.next('ul').length==1){
+		});
-			return false;
+	// Toggle all
-		}
+	$xGnb_li.find('>a[href="#gnb"]')
-		if($t.attr('href')=='#gnb' && !$t.parent('li').hasClass('open')){
+		.click(function(){
-			$li.addClass('open');
+			if(!$xGnb.hasClass('all')){ // Open All
-			$('.x .gnb').removeClass('able');
+				$xGnb_li.addClass('open');
-		} else {
+				$xGnb.addClass('all');
-			$li.removeClass('open');
+			} else { // Close All
-			$('.x .gnb').addClass('able');
+				$xGnb_li.removeClass('open');
-		}
+				$xGnb.removeClass('all');
+			}
+		})
+		.focus(function(){
+			// GNB Hover
+			$xGnb.trigger('mouseenter');
+		});
+// GNB Hover toggle
+	function contentBugFix(){ // Chrome browser rendering bug fix
+		$xContent.width('99.99%');
+		setTimeout(function(){
+			$xContent.removeAttr('style');
+		}, 0);
+	}
+	$xGnb
+		.mouseenter(function(){ // Mouseenter
+			if($(window).width() >= 1024){
+				setTimeout(function(){
+					$xBody.removeClass('wide');
+					contentBugFix();
+				}, 200);
+			}
+		})
+		.mouseleave(function(){ // Mouseleave
+			if($(window).width() >= 1024){
+				$xBody.addClass('wide');
+				contentBugFix();
+			}
+		});
+// GNB Close
+	$xGnb
+		.prepend('<button type="button" class="close before" />')
+		.append('<button type="button" class="close after" />');
+	$xGnb.find('>.before, >.after').focus(function(){
+		$xBody.addClass('wide');
+		contentBugFix();
 	});
 });