PDC-IRAP / pdc-web

Commit a1b5d9b0df9b3a753060cb940debbf9564cfcf3b

Authored by Anais Amato
Committed by hitier
1 parent dfb905cf
Exists in master and in 4 other branches Develop, TEST, dev, othauvin

Add responsive menu (sidebar with hamburger button)

Showing 2 changed files with 15 additions and 10 deletions   Show diff stats
Inline Side-by-side
app/static/css/style.css
  Diff comments   View file @a1b5d9b
... ... @@ -80,3 +80,11 @@ nav.sidebar a.disabled {
80 80 .dev2-icon {
81 81 filter: hue-rotate(100deg) saturate(1000%);
82 82 }
  83 +
  84 +/* Update the navbar for small screens. Replace bootstrap css for small screens only */
  85 +@media (max-width: 600px) {
  86 + .sidebar {
  87 + position: static !important;
  88 + margin-top: 0px !important;
  89 + }
  90 +}
... ...
app/templates/base_page.html
  Diff comments   View file @a1b5d9b
... ... @@ -12,7 +12,7 @@
12 12 <img class="m-0 mr-1 {{config.PDC_SITE_CLASS}}" src="{{ url_for('static', filename='img/pdc-ico.png', version=config.VERSION) }}" height="30" width="30"/>
13 13  
14 14 {{config.PDC_APP_NAME}} - {{config.PDC_SITE_NAME}}</a>
15   - <ul class="navbar-nav ml-auto">
  15 + <ul class="navbar-nav flex-row ml-auto">
16 16 {% if not current_user.is_anonymous %}
17 17 <li class="nav-item">
18 18 <span class="navbar-brand">{{current_user.name}}</span>
... ... @@ -30,16 +30,13 @@
30 30  
31 31 <div class="container-fluid">
32 32 <div class="row">
33   - <nav class="col-md-2 d-none d-md-block bg-light sidebar mt-3">
34   - <div class="sidebar-sticky">
  33 + <nav class="col-md-2 col-sm-auto col-xs-auto navbar-light bg-light navbar-expand-md sidebar mt-5">
  34 + <button id="test" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  35 + <span class="navbar-toggler-icon"></span>
  36 + </button>
  37 + <div class="sidebar-sticky collapse navbar-collapse" id="navbarSupportedContent">
35 38 <ul class="nav flex-column" id="v_menu">
36 39 <li class="nav-item">
37   - <a class="nav-link" href="#">
38   - <span data-feather="home"></span>
39   - accueil
40   - </a>
41   - </li>
42   - <li class="nav-item">
43 40 <a aria-expanded="false" id="agents" class="main-nav nav-link" data-target="#agent" data-toggle="collapse" href="#">
44 41 <span data-feather="user"></span>
45 42 Agent
... ... @@ -122,7 +119,7 @@
122 119 </footer>
123 120 </nav>
124 121  
125   - <main id="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4" role="main">
  122 + <main id="main" class="ml-md-auto ml-sm-5 ml-xs-8 col-xs-4 col-sm-11 col-md-9 col-lg-10 pt-3 px-4" role="main">
126 123 <h2 class="sub-header">{{subtitle}}</h2>
127 124 {% include 'flash-messages.html' %}
128 125 {% block content %}
... ...