From 5c7bbe41f795c5b5098828732818ec997285e8e5 Mon Sep 17 00:00:00 2001
From: hyung-hwan <hyunghwan.chung@gmail.com>
Date: Mon, 19 Dec 2016 16:48:16 +0000
Subject: [PATCH] switched to use the flex css element for taskbar layout

---
 codepot/src/codepot/views/login.php       |  6 ++--
 codepot/src/codepot/views/project_map.php |  2 +-
 codepot/src/codepot/views/taskbar.php     | 41 ++++++++++++-----------
 codepot/src/css/common.css                | 37 ++++++++++++++++++--
 4 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/codepot/src/codepot/views/login.php b/codepot/src/codepot/views/login.php
index 6073c9d7..616900e9 100644
--- a/codepot/src/codepot/views/login.php
+++ b/codepot/src/codepot/views/login.php
@@ -20,15 +20,15 @@
 <!---------------------------------------------------------------------------->
 
 <div class='taskbar'>
-	<div class="boxb">
-	</div>
-
 	<div class="boxa">
 		<ul>
 		<li><?php print  anchor ('site/home', $this->lang->line('Home')); ?></li>
 		<li><?php print  anchor ('project/catalog', $this->lang->line('Projects')); ?></li>
 		</ul>
 	</div>
+
+	<div class="boxb">
+	</div>
 </div>
 
 
diff --git a/codepot/src/codepot/views/project_map.php b/codepot/src/codepot/views/project_map.php
index 8fcfa417..90191f82 100644
--- a/codepot/src/codepot/views/project_map.php
+++ b/codepot/src/codepot/views/project_map.php
@@ -283,7 +283,7 @@ var GraphApp = (function()
 	{
 		if (this.graph !== null)
 		{
-			// make it low so that the footer gets places at the right place.
+			// make it small so that the footer gets places at the right place.
 			this.graph.setSize (300, 300);
 
 			var hoff = this.header.offset();
diff --git a/codepot/src/codepot/views/taskbar.php b/codepot/src/codepot/views/taskbar.php
index ab0afcac..3d1d2ec3 100644
--- a/codepot/src/codepot/views/taskbar.php
+++ b/codepot/src/codepot/views/taskbar.php
@@ -5,6 +5,26 @@ function show_taskbar ($con, $login)
 	print '<div class="taskbar">';
 	print "\n";
 
+	print '<div class="boxa">';
+	print '<ul>';
+	print '<li>';
+	print anchor ('site/home', $con->lang->line('Home'));
+	print '</li>';
+	print '<li>';
+	print anchor ('project/catalog', $con->lang->line('Projects'));
+	print '</li>';
+	print '<li><span class="ui-widget">';
+	print " <input id='taskbar_project_to_find' placeholder='{$con->lang->line('Project ID')}' size=40>";
+	print '</span></li>';
+	if ($login['sysadmin?'])
+	{
+		print '<li>';
+		print anchor ('site/catalog', $con->lang->line('Administration'));
+		print '</li>';
+	}
+	print '</ul>';
+
+	print '</div>'; // boxa
 	print '<div class="boxb">';
 
 	if (isset($login['id']) && $login['id'] != '')
@@ -66,26 +86,7 @@ function show_taskbar ($con, $login)
 	}
 	print '</div>'; // boxb
 
-	print '<div class="boxa">';
-	print '<ul>';
-	print '<li>';
-	print anchor ('site/home', $con->lang->line('Home'));
-	print '</li>';
-	print '<li>';
-	print anchor ('project/catalog', $con->lang->line('Projects'));
-	print '</li>';
-	print '<li><span class="ui-widget">';
-	print " <input id='taskbar_project_to_find' placeholder='{$con->lang->line('Project ID')}' size=40>";
-	print '</span></li>';
-	if ($login['sysadmin?'])
-	{
-		print '<li>';
-		print anchor ('site/catalog', $con->lang->line('Administration'));
-		print '</li>';
-	}
-	print '</ul>';
-
-	print '</div>'; // boxa
+	
 
 	print '</div>';
 }
diff --git a/codepot/src/css/common.css b/codepot/src/css/common.css
index ecfb9225..b9f0e0a9 100644
--- a/codepot/src/css/common.css
+++ b/codepot/src/css/common.css
@@ -132,15 +132,46 @@ pre, code, tt {
 
 	line-height: 2em;
 	vertical-align: middle;
+
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: flex;
+
+	-webkit-flex-wrap: nowrap;
+	-moz-flex-wrap: nowrap;
+	flex-wrap: nowrap;
+
+	-webkit-justify-content: space-between;
+	-moz-justify-content: space-between;
+	justify-content: space-between;
 }
 
 .content .taskbar .boxa {
-	/*vertical-align: bottom;*/
-	float: none;
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: flex;
+
+	-webkit-flex: 0 0 auto;
+	-moz-flex: 0 0 auto;
+	flex: 0 0 auto;
+
+	-webkit-justify-content: flex-start;
+	-moz-justify-content: flex-start;
+	justify-content: flex-start;
 }
 
 .content .taskbar .boxb {
-	float: right;
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: flex;
+
+	-webkit-flex: 0 0 auto;
+	-moz-flex: 0 0 auto;
+	flex: 0 0 auto;
+
+	-webkit-justify-content: flex-end;
+	-moz-justify-content: flex-end;
+	justify-content: flex-end;
 }
 
 .content .taskbar .boxa a {