adding stuff
This commit is contained in:
Kybo09
parent
92184d5633
commit
363c37b8a4
13 changed files with 316 additions and 35 deletions
|
|
@ -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 */
|
||||
File diff suppressed because one or more lines are too long
80
static/scss/layouts/article-detail.scss
Normal file
80
static/scss/layouts/article-detail.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -40,4 +40,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ nav{
|
|||
cursor: pointer;
|
||||
font-size: 50px;
|
||||
@include font-courgette;
|
||||
color: $light;
|
||||
color: $accent;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.left{
|
||||
|
|
|
|||
|
|
@ -8,4 +8,5 @@
|
|||
@import "layouts/quicksearch.scss";
|
||||
@import "layouts/personnes.scss";
|
||||
@import "layouts/regilog.scss";
|
||||
@import "layouts/article-detail.scss";
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -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">
|
||||
{% csrf_token %}
|
||||
{{ form }}
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
{% 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="">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>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,17 @@
|
|||
<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="">Articles</a>
|
||||
<a href="">Personnes</a>
|
||||
<a href="/a/">Sauvetages</a>
|
||||
<a href="/p/">Personnes</a>
|
||||
<a href="">Equipages</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -47,5 +48,18 @@
|
|||
</div>
|
||||
</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 %}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue