diff --git a/scipost/static/scipost/assets/config/preconfig.scss b/scipost/static/scipost/assets/config/preconfig.scss
index 533afb33c65708ff20b884b0869b1ae880a27f2a..fab6e0f9c8376734b4e5028546d55ff677c6521b 100644
--- a/scipost/static/scipost/assets/config/preconfig.scss
+++ b/scipost/static/scipost/assets/config/preconfig.scss
@@ -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;
diff --git a/scipost/static/scipost/assets/css/_nav.scss b/scipost/static/scipost/assets/css/_nav.scss
index ae025f85d60abac7eb200524ce4e31b518e56ed5..acd697e2e3494674bcdea96f2cc5ef361dbf8638 100644
--- a/scipost/static/scipost/assets/css/_nav.scss
+++ b/scipost/static/scipost/assets/css/_nav.scss
@@ -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 {
diff --git a/scipost/static/scipost/assets/css/_navbar.scss b/scipost/static/scipost/assets/css/_navbar.scss
index 09f2ef553b0ba9ff03d29f7d0c0b97e8479cd23b..2edb6eea28f158a50b39c8ac16905bf8d87a5079 100644
--- a/scipost/static/scipost/assets/css/_navbar.scss
+++ b/scipost/static/scipost/assets/css/_navbar.scss
@@ -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;
diff --git a/scipost/templates/scipost/navbar.html b/scipost/templates/scipost/navbar.html
index 127016d37730188ec1d884786cc120250ba5e9ea..181b9fc24d293afc173a6867e34d718185d20881 100644
--- a/scipost/templates/scipost/navbar.html
+++ b/scipost/templates/scipost/navbar.html
@@ -1,46 +1,42 @@
-<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>