From c97eb1c661fe01b6a35679f0b2a73a616115aa70 Mon Sep 17 00:00:00 2001 From: Bryan Brancotte <bryan.brancotte@pasteur.fr> Date: Mon, 2 Sep 2019 15:49:01 +0200 Subject: [PATCH] first nav-bar being responsive WIP #2 --- .../css/basetheme_bootstrap4_pasteur.css | 22 +++++++++++++++++-- .../basetheme_bootstrap/basePasteur.html | 19 ++++++++-------- setup.py | 2 +- .../templates/test_app_1/upper_nav_bar.html | 3 +++ 4 files changed, 34 insertions(+), 12 deletions(-) create mode 100644 test_app_1/templates/test_app_1/upper_nav_bar.html diff --git a/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css b/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css index bcce8b1..65d76ce 100644 --- a/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css +++ b/basetheme_bootstrap/static/css/basetheme_bootstrap4_pasteur.css @@ -78,12 +78,20 @@ header .navbar-brand { font-size: 16px; font-family: "BrandonGrotesqueBld"; } +.header__top.navbar>.navbar-collapse>div{ + flex-grow:1; +} +.header__top>.form-inline>.form-control{ + display: inline-block; + width: auto; + vertical-align: middle; +} header nav.header__top nav-item.active{ background: #FFFFFF30; } -header .header__top .form-inline input:not(:focus) { +header .header__top .form-inline input:not(:focus):not(:hover) { background-color:#000; } @@ -93,6 +101,7 @@ header .header__top .form-inline .form-control { header .header__top .dropdown-menu a, header .header__top .form-inline .btn, +header .header__top .navbar-nav a.nav-link, header .header__top a { display: block; color: #fff; @@ -103,6 +112,15 @@ header .header__top a { text-decoration: none; font-family: "BrandonGrotesqueReg"; } +.header__top .form-inline{ + flex-shrink:0; +} + +.navbar-dark .navbar-brand:hover, +.navbar-dark .navbar-nav .nav-link:hover:not([aria-expanded=true]), +header .header__top a:hover:not([aria-expanded=true]) { + color: #2d80e2; +} header { border-bottom: 1px solid #aeb7c0; @@ -220,7 +238,7 @@ header .dropdown.show>a { } header *{ - transition: all 0.2s ease-out; + transition: all 0.2s ease-out, color 0s ease-out, background-color 0s ease-out; } /*header.scrolled .main-nav a { diff --git a/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html b/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html index b28f118..2881be5 100644 --- a/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html +++ b/basetheme_bootstrap/templates/basetheme_bootstrap/basePasteur.html @@ -28,20 +28,17 @@ {% include_if_exists "fork_me.html"|localize_template "basetheme_bootstrap/fork_me.example.html" %} <header class="main-header fixed-top"> <!-- Fixed navbar --> - <nav class="header__top navbar navbar-expand-md"> + <nav class="header__top navbar navbar-expand-sm navbar-dark"> <a class="navbar-brand" href="{% url 'home'%}">{% block project_name %}{% endblock %}</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" - aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> <div class="collapse navbar-collapse" id="navbarCollapse"> - <ul class="navbar-nav mr-auto"> + <ul class="navbar-nav {% block upper_nav_bar_css_classes %}d-sm-none d-md-flex{% endblock %}"> {% include_if_exists "upper_nav_bar.html"|localize_template "basetheme_bootstrap/upper_nav_bar.example.html" %} </ul> + <div></div> {% block form_in_nav_bar %} - <form class="form-inline mt-2 mt-md-0" action="search/" method="post"> - <input class="form-control mr-sm-2" type="text" placeholder="{%trans 'Type your search here'%}" aria-label="Search"> - <button class="form-control btn my-2 my-sm-0" type="submit">Search</button> + <form class="form-inline" action="search/" method="post"> + <input class="form-control " type="text" placeholder="{%trans 'Type your search here'%}" aria-label="Search"> + <button class="form-control btn" type="submit"><span class="d-sm-none">{% trans 'Search'%} </span><i class="fa fa-search"></i></button> </form> {% endblock %} <ul class="nav navbar-nav navbar-right"> @@ -68,6 +65,10 @@ {%endif%} </ul> </div> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" + aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> </nav> <nav class="header__middle navbar navbar-expand-md navbar-light"> <div class="header__logo-wrapper"> diff --git a/setup.py b/setup.py index 7c295d5..8171a21 100644 --- a/setup.py +++ b/setup.py @@ -7,7 +7,7 @@ readme = open('README.rst').read() setup( name='django-basetheme-bootstrap', - version='0.2.13', + version='0.2.14', description='Django Basetheme Bootstrap', long_description=readme, author='Bryan Brancotte', diff --git a/test_app_1/templates/test_app_1/upper_nav_bar.html b/test_app_1/templates/test_app_1/upper_nav_bar.html new file mode 100644 index 0000000..0c57d7e --- /dev/null +++ b/test_app_1/templates/test_app_1/upper_nav_bar.html @@ -0,0 +1,3 @@ +{% load i18n %} +<li class="nav-item "><a href="https://www.pasteur.fr/" target="_blank" class="nav-link">{%trans "L'Institut Pasteur"%}</a></li> +<li class="nav-item "><a href="https://www.pasteur.fr/" target="_blank" class="nav-link">{%trans "L'Institut Pasteur"%}</a></li> \ No newline at end of file -- GitLab