Merge pull request #9 from flifloo/kybo

last modifs kybo

static/css/style.css

@@ -175,6 +175,12 @@ nav .right {
       -ms-flex-align: center;
           align-items: center;
 }
+nav .right .opennavmobile {
+  display: none;
+  cursor: pointer;
+  font-size: 60px;
+  color: #efefef;
+}
 nav .right img {
   width: 50px;
   cursor: pointer;
@@ -197,6 +203,65 @@ nav .right .search:hover {
   color: #00E8C2;
 }
 
+.navbar-mobile {
+  display: none;
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+  position: fixed;
+  width: 100%;
+  -webkit-transition: all ease-in-out 0.3s;
+  transition: all ease-in-out 0.3s;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 100vh;
+  background: #303030;
+  top: 0;
+  left: 0;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  z-index: 9998;
+}
+.navbar-mobile.open {
+  -webkit-transform: translateX(0) !important;
+          transform: translateX(0) !important;
+}
+.navbar-mobile .closenavmobile {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  color: #efefef;
+  font-size: 70px;
+  cursor: pointer;
+}
+.navbar-mobile a {
+  font-size: 35px;
+  padding: 30px 0;
+}
+.navbar-mobile i {
+  font-size: 50px;
+}
+
+@media all and (max-width: 800px) {
+  .navbar-mobile {
+    display: -webkit-box !important;
+    display: -ms-flexbox !important;
+    display: flex !important;
+  }
+
+  nav .left .submenu, nav .right a {
+    display: none;
+  }
+
+  nav .opennavmobile {
+    display: block !important;
+  }
+}
 .flex-card {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -268,6 +333,7 @@ nav .right .search:hover {
   position: fixed;
   display: none;
   padding: 30px;
+  overflow: auto;
   padding-top: 100px;
   height: 100vh;
   z-index: 9999;
@@ -351,6 +417,8 @@ nav .right .search:hover {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
   -webkit-box-pack: space-evenly;
       -ms-flex-pack: space-evenly;
           justify-content: space-evenly;
@@ -402,6 +470,20 @@ nav .right .search:hover {
   margin-left: 15px;
 }
 
+@media all and (max-width: 1060px) {
+  .search-col, .flex-card .card {
+    -webkit-box-flex: 0 !important;
+        -ms-flex: 0 1 45% !important;
+            flex: 0 1 45% !important;
+  }
+}
+@media all and (max-width: 750px) {
+  .search-col, .flex-card .card {
+    -webkit-box-flex: 0 !important;
+        -ms-flex: 0 1 90% !important;
+            flex: 0 1 90% !important;
+  }
+}
 .personnal-info {
   display: -webkit-box;
   display: -ms-flexbox;

static/scss/layouts/nav.scss

@@ -34,6 +34,12 @@ nav{
     display: flex;
     justify-content: right;
     align-items: center;
+    .opennavmobile{
+      display: none;
+      cursor: pointer;
+      font-size: 60px;
+      color: $light;
+    }
     img{
       width: 50px;
       cursor: pointer;
@@ -54,4 +60,51 @@ nav{
       }
     }
   }
+}
+
+.navbar-mobile{
+  &.open{
+    transform: translateX(0) !important;
+  }
+  display: none;
+  transform: translateX(100%);
+  .closenavmobile{
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    color: $light;
+    font-size: 70px;
+    cursor: pointer;
+  }
+  position: fixed;
+  width: 100%;
+  transition: all ease-in-out 0.3s;
+  align-items: center;
+  height: 100vh;
+  background: $background2;
+  top: 0;
+  left: 0;
+  justify-content: center;
+  flex-direction: column;
+  z-index: 9998;
+  a{
+    font-size: 35px;
+    padding: 30px 0;
+  }
+  i{
+    font-size: 50px;
+  }
+}
+
+@media all and (max-width: 800px){
+  .navbar-mobile{
+    display: flex !important;
+  }
+  nav .left .submenu, nav .right a{
+    display: none;
+  }
+
+  nav .opennavmobile{
+    display: block !important;
+  }
 }

static/scss/layouts/quicksearch.scss

@@ -2,6 +2,7 @@
   position: fixed;
   display: none;
   padding: 30px;
+  overflow: auto;
   padding-top: 100px;
   height: 100vh;
   z-index: 9999;
@@ -57,6 +58,7 @@
     }
     .flex-search{
       display: flex;
+      flex-wrap: wrap;
       justify-content: space-evenly;
       align-items: center;
       .search-col{
@@ -91,4 +93,16 @@
       }
     }
   }
+}
+
+@media all and (max-width: 1060px){
+  .search-col, .flex-card .card{
+        flex: 0 1 45% !important;
+  }
+}
+
+@media all and (max-width: 750px){
+  .search-col, .flex-card .card{
+        flex: 0 1 90% !important;
+  }
 }

templates/article/edit.html

@@ -1,10 +1,34 @@
+{% load static %}
+
 <head>
+    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <script src="{% static 'js/script.js' %}"></script>
     {{ form.media }}
 </head>
+
 <body>
-    <form action="/a/edit/{{ edit_id }}/" method="post">
+{% include 'quicksearch.html' %}
+    <nav>
+        <div class="left">
+            <a href="/" class="logo">LSDD</a>
+            <div class="submenu">
+                <a href="/a/">Sauvetages</a>
+                <a href="/p/">Personnes</a>
+                <a href="/b/">Bateaux</a>
+            </div>
+        </div>
+        <div class="right">
+            <a href="#quicksearch"><i class="material-icons search">search</i></a>
+            <img src="{% static 'images/pesquet.jpg' %}">
+        </div>
+    </nav>
+    <div class="container">
+        <h1>Ajouter un article</h1>
+    <form class="article-form" action="/a/edit/{{ edit_id }}/" method="post">
         {% csrf_token %}
         {{ form }}
         <input type="submit" value="Submit">
     </form>
+    </div>
 </body>

templates/article/submit.html

@@ -15,7 +15,7 @@
             <div class="submenu">
                 <a href="/a/">Sauvetages</a>
                 <a href="/p/">Personnes</a>
-                <a href="">Equipages</a>
+                <a href="/b/">Bateaux</a>
             </div>
         </div>
         <div class="right">

templates/base.html

@@ -25,11 +25,36 @@
                 {% else %}
                     <a href="{% url 'login' %}">Login</a>
                 {% endif %}
+                <i class="material-icons opennavmobile">menu</i>
             </div>
     </nav>
-
+    <div class="navbar-mobile">
+        <i class="material-icons closenavmobile">close</i>
+        <a href="/a/">Sauvetages</a>
+        <a href="/p/">Personnes</a>
+        <a href="/b/">Bateaux</a>
+        <a href="#quicksearch"><i class="material-icons search">search</i></a>
+        {% if user.is_authenticated %}
+            <a href="{% url 'logout' %}"><img src="https://www.gravatar.com/avatar/{{ user.email | lower | md5 }}"></a>
+        {% else %}
+            <a href="{% url 'login' %}">Login</a>
+        {% endif %}
+    </div>
     <div class="container">
     {% block content %}
     {% endblock %}
     </div>
+    <script>
+        let menu = document.querySelector('.opennavmobile');
+        let close = document.querySelector('.closenavmobile');
+        let navmobile = document.querySelector('.navbar-mobile');
+
+        menu.addEventListener('click', function (){
+            navmobile.classList.toggle('open');
+        });
+
+        close.addEventListener('click', function (){
+            navmobile.classList.toggle('open');
+        });
+    </script>
 </body>

templates/boat/boats.html

@@ -1,6 +1,7 @@
 {% extends 'base.html' %}
 {% load static %}
 {% block content %}
+    <a href="/b/submit" class="btn-add">+</a>
     <section>
         <h1>Bateaux</h1>
         <div class="flex-card">

templates/boat/submit.html

@@ -1,10 +1,34 @@
+{% load static %}
+
 <head>
+    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <script src="{% static 'js/script.js' %}"></script>
     {{ form.media }}
 </head>
+
 <body>
-    <form action="/b/submit/" method="post">
+    {% include 'quicksearch.html' %}
+    <nav>
+        <div class="left">
+            <a href="/" class="logo">LSDD</a>
+            <div class="submenu">
+                <a href="/a/">Sauvetages</a>
+                <a href="/p/">Personnes</a>
+                <a href="/b/">Bateaux</a>
+            </div>
+        </div>
+        <div class="right">
+            <a href="#quicksearch"><i class="material-icons search">search</i></a>
+            <img src="{% static 'images/pesquet.jpg' %}">
+        </div>
+    </nav>
+    <div class="container">
+        <h1>Ajouter un bateau</h1>
+    <form class="article-form" action="/b/submit/" method="post">
         {% csrf_token %}
         {{ form }}
-        <input type="submit" value="Submit">
+        <input type="submit" value="Ajouter">
     </form>
+    </div>
 </body>

templates/error.html

@@ -1,6 +1,10 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block content %}
 <h1>Oups, une erreur  est survenue :/</h1>
 
 {% if quote %}
     <h2>Pour nous faire pardonner voici une citation de Thomas Pesquet:</h2>
     <p>{{ quote }}</p>
 {% endif %}
+{% endblock %}