web-gui/placing login/logout btns. responsive

taskforcesh · Nov 5, 2014 · 6a14a27 · 6a14a27
1 parent 67b4528
commit 6a14a27
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 27 deletions.
diff --git a/lib/GUI/css/responsive.less b/lib/GUI/css/responsive.less
@@ -1,6 +1,11 @@
 @media (max-width: 992px) {
 	.body {
 		.main-header {
+			.npm-logo {
+				width: 100px;
+				float: left;
+			}
+
 			.packages-header {
 				border-bottom: none;
 			}

diff --git a/lib/GUI/css/styles.less b/lib/GUI/css/styles.less
@@ -162,7 +162,7 @@
 }
 
 .white {
-	color: @white;
+	color: @white !important;
 }
 
 .red-bg {
@@ -174,11 +174,11 @@
 }
 
 .no-bg {
-	background: none;
+	background: none !important;
 }
 
 .no-border {
-	border: none;
+	border: none !important;
 }
 .no-rnd-cnr {
 	.border-radius( 0 );
@@ -192,3 +192,11 @@
 	margin-left: 10px;
 	margin-top: 5px;
 }
+
+.pad-right-10 {
+	padding-right: 10px;
+}
+
+.inline-block {
+	display: inline-block;
+}
diff --git a/lib/GUI/index.hbs b/lib/GUI/index.hbs
@@ -12,27 +12,47 @@
 		<header class="main-header">
 			<nav class="navbar navbar-default red-bg white no-border no-rnd-cnr" role="navigation">
 				<div class="container">
-					<div class="npm-logo navbar-left">
-						<a href="{{ baseUrl }}"></a>
-					</div>
-					<div class="navbar-left login-btn">
-						{{#if username}}
-							You're {{username}}
-							<br>
-							<form action="{{ baseUrl }}/-/logout" method="post">
-								<a class="submit white no-bg" href="#">Logout</a>
-							</form>
-						{{else}}
-							&nbsp;
-							<br>
-							<a class="white no-bg" data-toggle="modal" data-target="#login-form" href="#">Login</a>
-						{{/if}}
+					<div class="navbar-header clearfix">
+						<div class="npm-logo brand">
+							<a href="{{ baseUrl }}"></a>
+						</div>
+
+						<!-- login/logout for small devices -->
+						<div class="pull-right visible-xs pad-right-10">
+							<div>
+								{{#if username}}
+								<p class="white no-bg navbar-text pad-right-10 inline-block">Hi {{username}}</p>
+								<button type="submit" class="btn btn-danger inline-block js-userLogoutBtn">Logout</button>
+								{{else}}
+								<p class="white no-bg navbar-text pad-right-10 inline-block">&nbsp;</p>
+								<button type="submit" class="btn btn-danger inline-block" data-toggle="modal" data-target="#login-form" onclick="return false">Login</button>
+								{{/if}}
+							</div>
+						</div>
 					</div>
 
-					<div class="navbar-right setup hidden-xs">
+					<div class="navbar-left hidden-xs">&nbsp;&nbsp;</div>
+
+					<div class="navbar-left setup hidden-xs">
 						<code class="white no-bg">npm set registry {{ baseUrl }}</code><br>
 						<code class="white no-bg">npm adduser --registry {{ baseUrl }}</code>
 					</div>
+
+					<!-- login/logout for large devices -->
+					<div class="navbar-collapse collapse">
+						<div class="navbar-right">
+							<form class="navbar-form navbar-right">
+								{{#if username}}
+								<p class="white no-bg pad-right-10 inline-block">Hi {{username}}</p>
+								<button type="submit" class="btn btn-danger inline-block js-userLogoutBtn">Logout</button>
+								{{else}}
+								<button type="submit" class="btn btn-danger inline-block" data-toggle="modal" data-target="#login-form" onclick="return false">Login</button>
+								{{/if}}
+							</form>
+						</div>
+					</div>
+
+
 				</div>
 			</nav>
 			<header class="sm-registry-info light-red-bg center hidden-sm hidden-lg hidden-md">
@@ -99,6 +119,8 @@
 			</div>
 		</div>
 
+		<form action="{{ baseUrl }}/-/logout" method="post" class="hide" id="userLogoutForm"></form>
+
 		<script src="{{ baseUrl }}/-/static/jquery.min.js"></script>
 		<script type='text/javascript' src='{{ baseUrl }}/-/static/main.js'></script>
 	</body>

diff --git a/lib/GUI/js/main.js b/lib/GUI/js/main.js
@@ -6,7 +6,7 @@ require('./bootstrap-modal')
 require('./search')
 require('./entry')
 
-$(document).on('click', 'a.submit', function() {
-	$(this).parent('form').submit()
+$(document).on('click', '.js-userLogoutBtn', function() {
+	$('#userLogoutForm').submit()
 	return false
 })
diff --git a/lib/static/main.css b/lib/static/main.css
diff --git a/lib/static/main.js b/lib/static/main.js
@@ -395,8 +395,8 @@ require('./bootstrap-modal')
 require('./search')
 require('./entry')
 
-$(document).on('click', 'a.submit', function() {
-	$(this).parent('form').submit()
+$(document).on('click', '.js-userLogoutBtn', function() {
+	$('#userLogoutForm').submit()
 	return false
 })