Merge pull request #7 from flifloo/kybo

Merge branch kybo

static/css/style.css

@@ -8,7 +8,6 @@ body {
 
 h1, h2 {
   font-family: "Courgette", cursive;
-  color: #efefef;
 }
 
 a {
@@ -19,10 +18,12 @@ h1 {
   font-size: 60px;
   text-align: center;
   margin: 10px 0;
+  color: #00E8C2;
 }
 
 h2 {
   font-size: 40px;
+  color: #efefef;
 }
 
 img {
@@ -73,7 +74,7 @@ input::-ms-input-placeholder {
   color: #efefef;
 }
 
-a, p, span, input, input::placeholder {
+a, p, span, input, input::placeholder, label {
   font-family: "Play", sans-serif;
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
@@ -139,7 +140,7 @@ nav .logo {
   cursor: pointer;
   font-size: 50px;
   font-family: "Courgette", cursive;
-  color: #efefef;
+  color: #00E8C2;
   margin-right: 30px;
 }
 nav .left {
@@ -248,6 +249,21 @@ nav .right .search:hover {
   margin-top: 30px;
 }
 
+.btn-add {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  font-size: 75px;
+  color: black;
+  cursor: pointer;
+  background: #00E8C2;
+  padding: 0 24px;
+  border-radius: 50%;
+}
+.btn-add:hover {
+  color: black !important;
+}
+
 #quicksearch {
   position: fixed;
   display: none;
@@ -562,4 +578,106 @@ nav .right .search:hover {
   border: 2px solid #00E8C2;
   font-size: 25px;
 }
+
+.article-detail .date {
+  margin: 0;
+  font-size: 20px;
+  text-align: center;
+  font-style: italic;
+  color: #efefef;
+}
+.article-detail .desc {
+  text-align: center;
+  margin-top: 20px;
+}
+.article-detail .pic-flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 30px 0;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.article-detail .pic-flex img {
+  width: 300px;
+}
+.article-detail .save {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background: #303030;
+  padding: 30px;
+  padding-top: 0;
+}
+.article-detail .save div {
+  text-align: center;
+}
+.article-detail .save h2 {
+  color: #00E8C2;
+}
+
+.article-form label {
+  display: block;
+}
+.article-form select {
+  margin-bottom: 20px;
+}
+.article-form .django-quill-widget-container {
+  background: white;
+  margin: 25px 0;
+}
+.article-form .django-quill-widget-container span {
+  color: #444;
+}
+.article-form .django-quill-widget-container .ql-editor {
+  background: #414142;
+}
+.article-form .django-quill-widget-container .ql-container {
+  max-height: 40vh;
+}
+.article-form input {
+  background: transparent;
+  color: #efefef;
+  display: block;
+  font-size: 20px;
+  width: 100%;
+  border: 2px solid white;
+  margin-bottom: 30px;
+}
+.article-form input::-webkit-input-placeholder {
+  color: #d3d2d2;
+}
+.article-form input::-moz-placeholder {
+  color: #d3d2d2;
+}
+.article-form input:-ms-input-placeholder {
+  color: #d3d2d2;
+}
+.article-form input::-ms-input-placeholder {
+  color: #d3d2d2;
+}
+.article-form input::placeholder {
+  color: #d3d2d2;
+}
+.article-form input[type=submit] {
+  width: -webkit-fit-content;
+  width: fit-content;
+  width: -moz-fit-content;
+  padding: 10px 20px;
+  display: block;
+  margin: auto;
+  color: #00E8C2;
+  border: 2px solid #00E8C2;
+  font-size: 25px;
+}
 /*# sourceMappingURL=style.css.map */

static/scss/layouts/article-detail.scss

@@ -0,0 +1,80 @@
+.article-detail{
+  .date{
+    margin: 0;
+    font-size: 20px;
+    text-align: center;
+    font-style: italic;
+    color: $light;
+  }
+  .desc{
+    text-align: center;
+    margin-top: 20px;
+  }
+  .pic-flex{
+    display: flex;
+    margin: 30px 0;
+    justify-content: space-evenly;
+    align-items: center;
+    img{
+      width: 300px;
+    }
+  }
+  .save{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    background: $background2;
+    padding: 30px;
+    padding-top: 0;
+    div{
+      text-align: center;
+    }
+    h2{
+      color: $accent;
+    }
+  }
+}
+
+.article-form{
+  label{
+    display: block;
+  }
+  select{
+    margin-bottom: 20px;
+  }
+  .django-quill-widget-container{
+    background: white;
+    margin: 25px 0;
+    span{
+      color: #444;
+    }
+    .ql-editor{
+      background: $background;
+    }
+    .ql-container{
+      max-height: 40vh;
+    }
+  }
+  input{
+    background: transparent;
+    color: $light;
+    display: block;
+    font-size: 20px;
+    width: 100%;
+    border: 2px solid white;
+    margin-bottom: 30px;
+    &::placeholder{
+      color: $light2;
+    }
+  }
+  input[type="submit"]{
+    width: fit-content;
+    width: -moz-fit-content;
+    padding: 10px 20px;
+    display: block;
+    margin: auto;
+    color: $accent;
+    border: 2px solid $accent;
+    font-size: 25px;
+  }
+}

static/scss/layouts/cards.scss

@@ -41,3 +41,18 @@
     }
   }
 }
+
+.btn-add{
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  font-size: 75px;
+  color: black;
+  cursor: pointer;
+  background: $accent;
+  padding: 0 24px;
+  border-radius: 50%;
+  &:hover{
+    color: black !important;
+  }
+}

static/scss/layouts/global.scss

@@ -6,7 +6,6 @@ body{
 
 h1, h2{
     @include font-courgette;
-    color: $light;
 }
 
 a{
@@ -17,10 +16,12 @@ h1{
     font-size: 60px;
     text-align: center;
     margin: 10px 0;
+    color: $accent;
 }
 
 h2{
     font-size: 40px;
+    color: $light;
 }
 
 img{
@@ -45,7 +46,7 @@ p{
     margin: 5px 0;
 }
 
-a, p, span, input, input::placeholder{
+a, p, span, input, input::placeholder, label{
     @include font-play;
     transition-duration: 0.3s;
     color: $light;

static/scss/layouts/nav.scss

@@ -14,7 +14,7 @@ nav{
     cursor: pointer;
     font-size: 50px;
     @include font-courgette;
-    color: $light;
+    color: $accent;
     margin-right: 30px;
   }
   .left{

static/scss/style.scss

@@ -8,4 +8,5 @@
 @import "layouts/quicksearch.scss";
 @import "layouts/personnes.scss";
 @import "layouts/regilog.scss";
+@import "layouts/article-detail.scss";
 

templates/article/article.html

@@ -1,3 +1,38 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block content %}
+    {% include 'quicksearch.html' %}
+    <section class="article-detail">
+        <h1>{{ rescue.name }}</h1>
+        <p class="date">{{ rescue.date }}</p>
+        <p class="desc">{{ rescue.resume }}</p>
+        <div class="pic-flex">
+            <img src="{% static 'images/bateau.jpg' %}">
+            <img src="{% static 'images/sauvetage.png' %}">
+        </div>
+        <div class="content">
+            {{ rescue.description.html | safe }}
+        </div>
+        <div class="save">
+            <div class="saver">
+                <h2>Sauveteurs :</h2>
+                {% for people in rescue.rescuers.all %}
+                    <a href="/p/{{ people.pk }}">{{ people }}</a>
+                {% endfor %}
+            </div>
+            <div class="saved">
+                <h2>Personnes sauvées :</h2>
+                {% for people in rescue.saved.all %}
+                    <a href="/p/{{ people.pk }}">{{ people }}</a>
+                {% endfor %}
+            </div>
+        </div>
+
+
+    </section>
+{% endblock %}
+
+
 {% if not rescue.validated %}
     {% if rescue.pending_edit_of %}
         <h1>This edit is not validated !</h1>
@@ -6,23 +41,12 @@
     {% endif %}
 {% endif %}
 
-{{ rescue.name }} <br />
-{{ rescue.date }} <br />
-<br />
 {{ rescue.location_long }} {{ rescue.location_lat }} <br />
-<br />
+
-{{ rescue.resume.html | safe }} <br />
-{{ rescue.description.html | safe }} <br />
-<br />
 {{ rescue.testimonials.html | safe }} <br />
 {{ rescue.sources.html | safe }}
 
-<h3>Saved</h3>
+
-{% for people in rescue.saved.all %}
-    <a href="/p/{{ people.pk }}">{{ people }}</a>
-{% endfor %}
 
 <h3>Rescuers</h3>
-{% for people in rescue.rescuers.all %}
+
-    <a href="/p/{{ people.pk }}">{{ people }}</a>
-{% endfor %}

templates/article/articles.html

@@ -1,26 +1,29 @@
 {% extends 'base.html' %}
 {% load static %}
 {% block content %}
+    <a href="/a/submit" class="btn-add">+</a>
     <section>
-        <h1>Articles</h1>
+        <h1>Sauvetages</h1>
         <div class="flex-card">
             {% for rescue in rescues %}
             <div class="card">
                 <div class="inner">
                     <div class="img-container">
-                        <img src="{% static 'images/sauvetage.png' %}">
+                        <a href="/a/{{ rescue.pk }}/">
+                            <img src="{% static 'images/sauvetage.png' %}">
+                        </a>
                     </div>
                     <div class="content">
                         <p class="date">{{ rescue.date }}</p>
                         <p class="titre">{{ rescue.name }}</p>
-                        <a class="btn" href="/a/{{ rescue.pk }}/">Voir l'article</a>
+                        <a class="btn" href="/a/{{ rescue.pk }}/">Voir le sauvetage</a>
                     </div>
                 </div>
 
             </div>
             {% endfor %}
         </div>
-        <a class="btn btn--blue" href="">Charger plus d'articles</a>
+        <a class="btn btn--blue" href="">Charger plus de sauvetages</a>
     </section>
     {% include 'quicksearch.html' %}
 {% endblock %}

templates/article/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="/a/submit/" method="post">
+    {% include 'quicksearch.html' %}
-        {% csrf_token %}
+    <nav>
-        {{ form }}
+        <div class="left">
-        <input type="submit" value="Submit">
+            <a href="/" class="logo">LSDD</a>
-    </form>
+            <div class="submenu">
+                <a href="/a/">Sauvetages</a>
+                <a href="/p/">Personnes</a>
+                <a href="">Equipages</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/submit/" method="post">
+            {% csrf_token %}
+            {{ form }}
+            <input type="submit" value="Ajouter">
+        </form>
+    </div>
 </body>

templates/base.html

@@ -4,17 +4,18 @@
 <head>
     <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
     <script src="{% static 'js/script.js' %}"></script>
 </head>
 
 <body>
     <nav>
         <div class="left">
-            <a href="" class="logo">LSDD</a>
+            <a href="/" class="logo">LSDD</a>
             <div class="submenu">
-                <a href="/a/">Articles</a>
+                <a href="/a/">Sauvetages</a>
                 <a href="/p/">Personnes</a>
-                <a href="/c/">Equipages</a>
+                <a href="/b/">Bateaux</a>
             </div>
         </div>
             <div class="right">

templates/index.html

@@ -4,7 +4,8 @@
     <h1>Les sauveteurs du Dunkerquois</h1>
     <section>
         <h2>Carte dynamique</h2>
-        <img class="map" src="{% static 'images/map.png' %}">
+        <div id="map" style="width:100%; height:60%"></div>
+        <!-- <img class="map" src="{% static 'images/map.png' %}"> -->
     </section>
     <section>
         <h2>Articles récents</h2>
@@ -25,5 +26,18 @@
             {% endfor %}
         </div>
     </section>
+    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
+    <script>
+        let map = L.map('map').setView([51.127, 2.253], 7);
+
+        let osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors',
+            maxZoom: 19
+        });
+
+        L.marker([48.5, -0.09]).addTo(map).bindPopup('<a href="/a/1/">Sauvetage de mer</a>');
+
+        map.addLayer(osmLayer);
+     </script>
     {% include 'quicksearch.html' %}
 {% endblock %}

templates/quicksearch.html

@@ -30,7 +30,7 @@
                 </div>
             </div>
             <div class="search-col">
-                <p class="titre">Articles</p>
+                <p class="titre">Sauvetages</p>
                 <div class="search-card">
                     <img src="{% static 'images/sauvetage.png' %}">
                     <p class="name">Sauvetage risqué en côte d'Ivoire</p>