Nicer pages

hitier
2 parents b8338b91 fcef2d7b
Showing 5 changed files with 22 additions and 12 deletions Show diff stats
CHANGELOG.md
VERSION.txt
app/main/static/css/charges.css
app/static/css/style.css
app/templates/base_page.html
@@ -24,6 +24,10 @@ or major refactoring improvments.
 ## Unreleased
+## [0.3.pre-6] - 2021-04-30 - Nicer Display
+### Changed
+Layout responsive on tables and menus
+
 ## [0.3.pre-5] - 2021-04-30 - Import Irap CSV
 ### New
 Db models
-0.3.pre-5
+0.3.pre-6
@@ -29,7 +29,7 @@
 }
 #charge_table, .charge_chart{
-    width: 95%;
+    width: 100%;
 }
 #charge_table,
@@ -49,6 +49,7 @@
     background-color: #fAfAfA;
     border: 1pt solid black;
     display: inline-block;
+    width: 100%;
 }
 text.legend {
@@ -80,3 +80,11 @@ nav.sidebar a.disabled {
 .dev2-icon {
     filter: hue-rotate(100deg) saturate(1000%);
 }
+
+/* Update the navbar for small screens. Replace bootstrap css for small screens only */
+@media (max-width: 600px) {
+    .sidebar {
+        position: static !important;
+        margin-top: 0px !important;
+    }
+}
@@ -12,7 +12,7 @@
       <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"/>
       {{config.PDC_APP_NAME}} - {{config.PDC_SITE_NAME}}</a>
-    <ul class="navbar-nav ml-auto">
+    <ul class="navbar-nav flex-row ml-auto">
       {% if not current_user.is_anonymous %}
       <li class="nav-item">
         <span class="navbar-brand">{{current_user.name}}</span>
@@ -30,16 +30,13 @@
   <div class="container-fluid">
     <div class="row">
-      <nav class="col-md-2 d-none d-md-block bg-light sidebar mt-3">
-        <div class="sidebar-sticky">
+      <nav class="col-md-2 col-sm-auto col-xs-auto navbar-light bg-light navbar-expand-md sidebar mt-5">
+          <button id="test" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="sidebar-sticky collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="nav flex-column" id="v_menu">
             <li class="nav-item">
-              <a class="nav-link" href="#">
-                <span data-feather="home"></span>
-                accueil
-              </a>
-            </li>
-            <li class="nav-item">
               <a aria-expanded="false" id="agents" class="main-nav nav-link" data-target="#agent" data-toggle="collapse" href="#">
                 <span data-feather="user"></span>
                 Agent
@@ -122,7 +119,7 @@
         </footer>
       </nav>
-      <main id="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4" role="main">
+      <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">
         <h2 class="sub-header">{{subtitle}}</h2>
         {% include 'flash-messages.html' %}
         {% block content %}