SciPost Code Repository

Skip to content
Snippets Groups Projects
Commit 7ead72a4 authored by Jorran de Wit's avatar Jorran de Wit
Browse files

Make menu's scrollable instead of hamburger-menu

parent d9d412f2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
scipost/static/scipost/assets/config/preconfig.scss
+ 6
− 4
View file @ 7ead72a4
......@@ -16,10 +16,6 @@ $container-max-widths: (
margin-bottom: 1rem;
}
// breadcrumb
//
$breadcrumb-bg: #f9f9f9;
// Cards
//
$card-spacer-x: 0.75rem;
......@@ -37,6 +33,12 @@ $green: #6ebb6e;
$blue: $scipost-lightblue !default;
$body-color: $scipost-darkblue !default;
// breadcrumb
//
$breadcrumb-bg: #f9f9f9;
$breadcrumb-active-color: $scipost-darkblue;
$breadcrumb-divider-color: $scipost-orange;
// Forms
//
$btn-padding-x: .5rem;
......
scipost/static/scipost/assets/css/_nav.scss
+ 4
− 11
View file @ 7ead72a4
......@@ -9,6 +9,10 @@
.tab-nav-container {
border-bottom: 3px solid $scipost-darkblue;
text-align: center;
white-space: nowrap;
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.tab-nav-inner {
display: inline-block;
......@@ -36,17 +40,6 @@
right: 40%;
bottom: 3px;
}
&:after {
border-bottom: 11px solid $white;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
content: "";
display: inline-block;
position: absolute;
right: 40%;
bottom: 0;
}
}
a {
......
scipost/static/scipost/assets/css/_navbar.scss
+ 28
− 4
View file @ 7ead72a4
......@@ -6,8 +6,8 @@
margin-bottom: 0.75rem;
.nav-link {
padding-right: 1rem;
padding-left: 1rem;
padding-right: .5rem;
padding-left: .5rem;
border: 1px solid transparent;
border-radius: 0.1rem;
word-wrap: break-word;
......@@ -21,10 +21,14 @@
}
}
.navbar-collapse.show .nav-item {
margin-bottom: .25rem;
.navbar-nav {
flex-direction: row;
}
// .navbar-collapse.show .nav-item {
// margin-bottom: .25rem;
// }
.active > .nav-link {
border-color: $scipost-darkblue;
}
......@@ -38,6 +42,26 @@
}
}
.navbar-scroll {
white-space: nowrap;
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.navbar-scroll-inner {
display: flex !important;
width: 100%;
}
.form-inline {
min-width: 250px;
.form-control {
width: auto !important;
}
}
}
.navbar-brand {
height: 38px;
margin: 0;
......
scipost/templates/scipost/navbar.html
+ 36
− 40
View file @ 7ead72a4
<nav class="navbar navbar-light navbar-toggleable-sm">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#header-navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"></a>
<div class="collapse navbar-collapse" id="header-navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item{% if request.path == '/' %} active{% endif %}">
<a href="{% url 'scipost:index' %}" class="nav-link">Home</a>
</li>
<li class="nav-item{% if '/journals/' in request.path %} active{% endif %}">
<a href="{% url 'journals:journals' %}" class="nav-link">Journals</a>
</li>
<li class="nav-item{% if '/submissions/' in request.path %} active{% endif %}">
<a class="nav-link" href="{% url 'submissions:submissions' %}">Submissions</a>
</li>
<li class="nav-item{% if '/commentaries/' in request.path %} active{% endif %}">
<a class="nav-link" href="{% url 'commentaries:commentaries' %}">Commentaries</a>
</li>
<li class="nav-item{% if '/theses/' in request.path %} active{% endif %}">
<a class="nav-link" href="{% url 'theses:theses' %}">Theses</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item highlighted">
<span class="nav-link">Logged in as {{ user.username }}</span>
<nav class="navbar navbar-scroll navbar-light">
<div class="navbar-scroll-inner">
<ul class="navbar-nav mr-auto">
<li class="nav-item{% if request.path == '/' %} active{% endif %}">
<a href="{% url 'scipost:index' %}" class="nav-link">Home</a>
</li>
<li class="nav-item{% if '/journals/' in request.path %} active{% endif %}">
<a href="{% url 'journals:journals' %}" class="nav-link">Journals</a>
</li>
<li class="nav-item{% if '/personal_page' in request.path %} active{% endif %}">
<a class="nav-link" href="{% url 'scipost:personal_page' %}">Personal Page</a>
<li class="nav-item{% if '/submissions/' in request.path %} active{% endif %}">
<a class="nav-link" href="{% url 'submissions:submissions' %}">Submissions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'scipost:logout' %}">Logout</a>
<li class="nav-item{% if '/commentaries/' in request.path %} active{% endif %}">
<a class="nav-link" href="{% url 'commentaries:commentaries' %}">Commentaries</a>
</li>
{% else %}
<li class="nav-item{% if request.path == '/login/' %} active{% endif %}">
<a class="nav-link" href="{% url 'scipost:login' %}">Login</a>
<li class="nav-item{% if '/theses/' in request.path %} active{% endif %}">
<a class="nav-link" href="{% url 'theses:theses' %}">Theses</a>
</li>
{% endif %}
</ul>
<form action="{% url 'scipost:search' %}" method="get" class="form-inline">
<input class="form-control mr-0 mb-2 mr-lg-2 mb-lg-0" id="id_q" maxlength="100" name="q" type="text" required="">
<button class="btn btn-outline-secondary text-muted" type="submit">Search</button>
</form>
</div>
{% if user.is_authenticated %}
<li class="nav-item highlighted">
<span class="nav-link">Logged in as {{ user.username }}</span>
</li>
<li class="nav-item{% if '/personal_page' in request.path %} active{% endif %}">
<a class="nav-link" href="{% url 'scipost:personal_page' %}">Personal Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'scipost:logout' %}">Logout</a>
</li>
{% else %}
<li class="nav-item{% if request.path == '/login/' %} active{% endif %}">
<a class="nav-link" href="{% url 'scipost:login' %}">Login</a>
</li>
{% endif %}
</ul>
<form action="{% url 'scipost:search' %}" method="get" class="form-inline">
<input class="form-control mr-2 mb-0" id="id_q" maxlength="100" name="q" type="text" required="">
<button class="btn btn-outline-secondary text-muted" type="submit">Search</button>
</form>
</div>
</nav>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

SciPost Code Repository