put nav in the header

reduce custom css, use more bootstrap variables.

Admin link is now in the heading rather than the list of big buttons
This commit is contained in:
Min RK
2017-02-08 14:19:35 +01:00
parent 958ee00efd
commit c2b494f702
4 changed files with 47 additions and 32 deletions

View File

@@ -1,26 +1,15 @@
@logo-height: 28px;
.jpy-logo {
height: 28px;
margin-top: 6px;
height: @logo-height;
margin-top: (@navbar-height - @logo-height) / 2;
}
#header {
border-bottom: 1px solid #e7e7e7;
height: 40px;
}
.hidden {
display: none;
}
.dropdown.navbar-btn{
padding:0 5px 0 0;
}
#login_widget{
& .navbar-btn.btn-sm {
margin-top: 5px;
margin-bottom: 5px;
}
}

View File

@@ -1,7 +1,8 @@
@border-radius-small: 2px;
@border-radius-base: 2px;
@border-radius-large: 3px;
@navbar-height: 20px;
@navbar-height: 40px;
@grid-float-breakpoint: @screen-xs-min;
@jupyter-orange: #F37524;
@jupyter-red: #E34F21;

View File

@@ -20,9 +20,6 @@
{% endif %}
My Server
</a>
{% if user.admin %}
<a id="admin" class="btn btn-lg btn-primary" href="{{base_url}}admin">Admin</a>
{% endif %}
</div>
</div>
</div>

View File

@@ -35,6 +35,8 @@
<link rel="stylesheet" href="{{ static_url("css/style.min.css") }}" type="text/css"/>
{% endblock %}
<script src="{{static_url("components/requirejs/require.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{static_url("components/jquery/jquery.min.js") }}" type="text/javascript" charset="utf-8"></script>
<script src="{{static_url("components/bootstrap/js/bootstrap.min.js") }}" type="text/javascript" charset="utf-8"></script>
<script>
require.config({
{% if version_hash %}
@@ -80,26 +82,52 @@
</div>
</noscript>
<div id="header" class="navbar navbar-static-top">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<span id="jupyterhub-logo" class="pull-left"><a href="{{logo_url or base_url}}"><img src='{{base_url}}logo' alt='JupyterHub' class='jpy-logo' title='Home'/></a></span>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#thenavbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="thenavbar">
{% if user %}
<ul class="nav navbar-nav">
<li><a href="{{base_url}}home">Home</a></li>
<li><a href="{{base_url}}token">Token</a></li>
{% endif %}
{% if user.admin %}
<li><a href="{{base_url}}admin">Admin</a></li>
</ul>
{% endif %}
<ul class="nav navbar-nav navbar-right">
<li>
{% block login_widget %}
<span id="login_widget">
{% if user %}
<a id="logout" class="navbar-btn btn-sm btn btn-default pull-right" href="{{logout_url}}"> <i class="fa fa-sign-out"></i> Logout</a>
<a id="logout" class="navbar-btn btn-sm btn btn-default" href="{{logout_url}}"> <i class="fa fa-sign-out"></i> Logout</a>
{% else %}
<a id="login" class="btn-sm btn navbar-btn btn-default pull-right" href="{{login_url}}">Login</a>
<a id="login" class="btn-sm btn navbar-btn btn-default" href="{{login_url}}">Login</a>
{% endif %}
</span>
{% endblock %}
</li>
</ul>
</div>
{% block header %}
{% endblock %}
</div>
</div>
</nav>
{% block main %}
{% endblock %}