last modifs kybo
This commit is contained in:
parent
046e52ecd3
commit
3d73c66332
10 changed files with 233 additions and 6 deletions
|
@ -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;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
|
@ -55,3 +61,50 @@ 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;
|
||||
}
|
||||
}
|
|
@ -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{
|
||||
|
@ -92,3 +94,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in a new issue