From abadb6944314be766dfb6ba18f0cfc283f1c9c5d Mon Sep 17 00:00:00 2001
From: BNoiZe <roman@schmerold.at>
Date: Sat, 9 Nov 2013 20:46:34 +0100
Subject: [PATCH] Restyling of several components, small bugfixes

---
 .../Sparkle/admin/customers/customers.tpl     |  4 +-
 templates/Sparkle/admin/traffic/index.tpl     |  2 -
 templates/Sparkle/assets/css/main.css         | 77 +++++++++++--------
 templates/Sparkle/assets/js/main.js           |  7 ++
 templates/Sparkle/footer.tpl                  |  2 +
 templates/Sparkle/header.tpl                  |  6 +-
 templates/Sparkle/navigation_element.tpl      |  2 +-
 7 files changed, 60 insertions(+), 40 deletions(-)

diff --git a/templates/Sparkle/admin/customers/customers.tpl b/templates/Sparkle/admin/customers/customers.tpl
index 26383551..2cfefe94 100644
--- a/templates/Sparkle/admin/customers/customers.tpl
+++ b/templates/Sparkle/admin/customers/customers.tpl
@@ -2,8 +2,8 @@ $header
 	<article>
 		<header>
 			<h2>
-				<img src="templates/{$theme}/assets/img/icons/group_edit_big.png" alt="" />&nbsp;
-				{$lng['admin']['customers']}&nbsp;({$customercount})
+				<img src="templates/{$theme}/assets/img/icons/group_edit_big.png" alt="" /> 
+				{$lng['admin']['customers']} ({$customercount})
 			</h2>
 		</header>
 
diff --git a/templates/Sparkle/admin/traffic/index.tpl b/templates/Sparkle/admin/traffic/index.tpl
index eefe9a9b..de7b083e 100644
--- a/templates/Sparkle/admin/traffic/index.tpl
+++ b/templates/Sparkle/admin/traffic/index.tpl
@@ -34,6 +34,4 @@ $header
 			{$stats_tables}
 		</article>
 	</div>
-	<br />
-	<br />
 $footer
diff --git a/templates/Sparkle/assets/css/main.css b/templates/Sparkle/assets/css/main.css
index becb223a..bfb32e8a 100644
--- a/templates/Sparkle/assets/css/main.css
+++ b/templates/Sparkle/assets/css/main.css
@@ -22,6 +22,24 @@ body {
 	padding:0;
 }
 
+.content {
+	background-color: #f7f8fa;
+	margin-top: 53px;
+	min-width: 100%;
+	border-bottom: 1px solid #b6c0cd;
+}
+
+/*
+ * main container
+ */
+.main {
+	margin-left: 230px;
+	padding: 30px;
+	background-color: #fff;
+	border-left: 1px solid #b6c0cd;
+	margin-bottom: 0px;
+}
+
 .dark {
 	background: #f0f2f4;
 	border-bottom:1px solid #d1d5d8;
@@ -39,7 +57,7 @@ h1 {
 }
 
 h2, h3 {
-	margin: 0 0 1em 0;
+	margin: 0 0 10px 0;
 	padding: 0;
 	font-weight: bold;
 }
@@ -67,7 +85,7 @@ td a {
 }
 
 .bradius {
-	border-radius: 5px 5px 5px 5px;
+	border-radius: 3px;
 	box-shadow: rgba(0, 0, 0, 0.34902) 0px 1px 3px 0px;
 }
 
@@ -128,15 +146,6 @@ ul.topheadernav li ul li a:hover {
 	color: #111;
 }
 
-nav {
-	float:left;
-	width:230px;
-	margin: -4px 20px 0 0;
-}
-nav div:first-child {
-	display: none;
-}
-
 .topheadernav img {
 	padding: 0px;
 	margin: -4px 0 0 0;
@@ -161,7 +170,8 @@ footer {
 	text-align:center;
 	color: #888;
 	font-size:10px !important;
-	margin: 10px 0;
+	padding: 10px 0;
+	bottom: 0px;
 }
 
 footer a,footer a:active,footer a:visited {
@@ -476,10 +486,25 @@ a:hover {
 }
 
 /* navigation */
+nav {
+	float: left;
+	width:230px;
+	background-color:#f7f8fa;
+}
+nav div:first-child {
+	display: none;
+}
+nav div:nth-child(2) {
+	border-top: 0 !important;
+}
 .menuelement {
-	margin: 4px 0 10px 10px;
-	padding:10px;
-	background-color:#fff;
+	margin: 0 15px 0 15px;
+	padding:15px 0 15px 5px;
+	border-bottom: 1px solid #e1e7f0;
+	border-top: 1px solid #fff;
+}
+nav div:last-child {
+	border-bottom: 0 !important;
 }
 
 .menuelement h4 {
@@ -487,9 +512,10 @@ a:hover {
 	font-weight: bold;
 	margin:0;
 	padding:0 0 0 20px;
+	color: #626976;
 }
 .menuelement h4 a {
-	color: #000;
+	color: #626976;
 }
 .menuelement ul {
 	list-style:none;
@@ -498,23 +524,10 @@ a:hover {
 }
 
 .menuelement ul li {
-	margin:0 0 0 20px;
+	margin:2px 0 2px 20px;
 	padding:0;
 }
 
-/*
- * main container
- */
-.main {
-	margin-left:240px;
-	margin-right:10px;
-	margin-top:64px;
-	margin-bottom:0;
-	background-color:#fff;
-	padding: 30px 30px 30px 30px;
-	min-height:400px;
-}
-
 .noborder {
 	width:100%;
 	border-spacing:0;
@@ -899,8 +912,8 @@ label.nobr {
     height:40px;
     opacity:0.3;
     position:fixed;
-    bottom:15px;
-    left:100px;
+    bottom:50px;
+    left:95px;
     display:none;
     text-indent:-9999px;
     background: url(../img/top.png) no-repeat;
diff --git a/templates/Sparkle/assets/js/main.js b/templates/Sparkle/assets/js/main.js
index 2f23285c..b49fa3a1 100644
--- a/templates/Sparkle/assets/js/main.js
+++ b/templates/Sparkle/assets/js/main.js
@@ -24,6 +24,13 @@ $(document).ready(function() {
 		parent.history.back();
 		return false;
 	});
+	
+	// Height of divs fix
+	var snheight = $('#sidenavigation').height();
+	var mainheight = $('#maincontent').height();
+	if (snheight > mainheight) {
+		$('#maincontent').height(snheight - 60);
+	}
 
 	// this is necessary for the special setting feature (ref #1010)
 	$.getQueryVariable = function(key) {
diff --git a/templates/Sparkle/footer.tpl b/templates/Sparkle/footer.tpl
index 5a6b6f70..cf7866e8 100644
--- a/templates/Sparkle/footer.tpl
+++ b/templates/Sparkle/footer.tpl
@@ -1,5 +1,7 @@
 <if isset($userinfo['loginname'])>
 	</div>
+	<div style="clear:both;"></div> 
+	</div>
 </if>
 <footer>
 	<span><img src="templates/{$theme}/assets/img/logo_grey.png" alt="Froxlor" /> 
diff --git a/templates/Sparkle/header.tpl b/templates/Sparkle/header.tpl
index d0cc84c7..56004f9b 100644
--- a/templates/Sparkle/header.tpl
+++ b/templates/Sparkle/header.tpl
@@ -78,7 +78,7 @@
 		</ul>
 	</div>
 </header>
-
-	<nav>$navigation</nav>
-	<div class="main bradius">
+<div class="content">
+	<nav id="sidenavigation">$navigation</nav>
+	<div class="main" id="maincontent">
 </if>
diff --git a/templates/Sparkle/navigation_element.tpl b/templates/Sparkle/navigation_element.tpl
index d9c23077..ddfb00af 100644
--- a/templates/Sparkle/navigation_element.tpl
+++ b/templates/Sparkle/navigation_element.tpl
@@ -1,4 +1,4 @@
-<div class="menuelement bradius">
+<div class="menuelement">
 	<h4>{$completeLink}</h4>
 	<ul>
 		{$navigation_links}