0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2025-01-27 22:59:51 -05:00

web-gui/placing login/logout btns. responsive

This commit is contained in:
Alex Vernacchia 2014-11-05 14:02:21 +00:00
parent 67b4528643
commit 6a14a277b2
6 changed files with 72 additions and 27 deletions

View file

@ -1,6 +1,11 @@
@media (max-width: 992px) {
.body {
.main-header {
.npm-logo {
width: 100px;
float: left;
}
.packages-header {
border-bottom: none;
}

View file

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

View file

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

View file

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

File diff suppressed because one or more lines are too long

View file

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