Merge pull request #3103 from kinow/responsive-issues

Hide hamburger button menu in mobile/responsive mode and fix other minor issues
This commit is contained in:
Min RK
2020-08-27 11:15:50 +02:00
committed by GitHub
2 changed files with 28 additions and 4 deletions

View File

@@ -1,8 +1,30 @@
@import "../components/bootstrap/less/variables.less";
@logo-height: 28px;
.jpy-logo {
height: @logo-height;
margin-top: (@navbar-height - @logo-height) / 2;
#jupyterhub-logo {
@media (max-width: @grid-float-breakpoint) {
// same length as the navbar-toggle element, displayed on responsive mode
margin-left: 15px;
}
.jpy-logo {
height: @logo-height;
margin-top: (@navbar-height - @logo-height) / 2;
}
}
.navbar-right {
li {
span {
// same as .nav > li > a from bootstrap, but applied to the span[id="login_widget"]
// or any other span that matches .nav > li > span, but only in responsive mode
@media (max-width: @grid-float-breakpoint) {
position: relative;
display: block;
padding: 10px 15px;
}
}
}
}
#header {

View File

@@ -106,12 +106,14 @@
<a href="{{logo_url or base_url}}"><img src='{{base_url}}logo' alt='JupyterHub' class='jpy-logo' title='Home'/></a>
</span>
{% endblock %}
{% if user %}
<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>
{% endif %}
</div>
<div class="collapse navbar-collapse" id="thenavbar">
@@ -142,7 +144,7 @@
{% block login_widget %}
<span id="login_widget">
{% if user %}
<p class="navbar-text">{{user.name}}</p>
<p class="navbar-text">{{user.name}}</p>
<a id="logout" role="button" class="navbar-btn btn-sm btn btn-default" href="{{logout_url}}"> <i aria-hidden="true" class="fa fa-sign-out"></i> Logout</a>
{% else %}
<a id="login" role="button" class="btn-sm btn navbar-btn btn-default" href="{{login_url}}">Login</a>