From abd949b9d6789a47dd3dbbeccaee81fd530cdb23 Mon Sep 17 00:00:00 2001
From: Jorran de Wit <jorrandewit@outlook.com>
Date: Sat, 4 Nov 2017 16:24:30 +0100
Subject: [PATCH] Restore (mobile) menu structure
---
scipost/static/scipost/assets/css/_nav.scss | 22 +++++--------------
.../static/scipost/assets/css/_navbar.scss | 11 ++++++----
scipost/templates/scipost/navbar.html | 3 +--
3 files changed, 14 insertions(+), 22 deletions(-)
diff --git a/scipost/static/scipost/assets/css/_nav.scss b/scipost/static/scipost/assets/css/_nav.scss
index d2057d423..a5e59525e 100644
--- a/scipost/static/scipost/assets/css/_nav.scss
+++ b/scipost/static/scipost/assets/css/_nav.scss
@@ -80,29 +80,19 @@ nav.submenu {
border-radius: 0;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
+ display: flex;
+ flex-wrap: nowrap;
+ flex-direction: row;
+ overflow-x: scroll;
.item {
- padding: 0.1rem 0.5rem;
+ padding: 0 0.5rem;
white-space: nowrap;
display: block;
+ border-right: 2px solid #fff;
}
.item:first-child,
.item:last-child {
border-right: 0;
}
}
-
-@media (min-width: 768px) {
- nav.submenu {
- display: flex;
- flex-wrap: nowrap;
- flex-direction: row;
-
- .item {
- padding-top: 0;
- padding-bottom: 0;
- display: inline;
- border-right: 2px solid #fff;
- }
- }
-}
diff --git a/scipost/static/scipost/assets/css/_navbar.scss b/scipost/static/scipost/assets/css/_navbar.scss
index cf73379ea..dc38e17d6 100644
--- a/scipost/static/scipost/assets/css/_navbar.scss
+++ b/scipost/static/scipost/assets/css/_navbar.scss
@@ -4,8 +4,9 @@
*/
.navbar {
margin-bottom: 1.5rem;
- display: block;
+ display: flex;
flex-wrap: nowrap;
+ overflow-x: scroll;
&.main-nav {
border-bottom: 1px solid #ddd;
@@ -35,16 +36,18 @@
.highlighted > .nav-link {
background-color: rgba(255, 255, 255, 0.6);
}
+
+ .navbar-nav {
+ display: flex;
+ flex-direction: row;
+ }
}
@media (min-width: 768px) {
.navbar {
- display: flex;
.navbar-nav {
margin-right: auto;
- display: flex;
- flex-direction: row;
}
.nav-item {
diff --git a/scipost/templates/scipost/navbar.html b/scipost/templates/scipost/navbar.html
index ff16f034b..9136679e4 100644
--- a/scipost/templates/scipost/navbar.html
+++ b/scipost/templates/scipost/navbar.html
@@ -4,7 +4,7 @@
<nav class="navbar navbar-light main-nav navbar-expand-lg">
- <ul id="menu-navbar" class="navbar-nav collapse">
+ <ul id="menu-navbar" class="navbar-nav">
<li class="nav-item{% if request.path == '/' %} active{% endif %}">
<a href="{% url 'scipost:index' %}" class="nav-link">Home</a>
</li>
@@ -69,7 +69,6 @@
{% endif %}
</ul>
- <a class="btn btn-block my-2" data-toggle="collapse" href="#menu-navbar" aria-expanded="false" aria-controls="menu-navbar">Show menu <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<form action="{% url 'scipost:search' %}" method="get" class="form-inline search-nav-form">
<input class="form-control" id="id_q" maxlength="100" name="q" type="text" required="required" value="{{search_query|default:''}}">
<input class="btn btn-secondary" type="submit" value="Search">
--
GitLab