Commit bdaa0c57 authored by Naoeltanuki's avatar Naoeltanuki
Browse files

Ajout mini carte sur la page langue avec un seul marqueur

J'ai fait 2 colonnes avec les audios + boutons et la carte pour que ça soit plus agréable à regarder, dis-moi si tu changerais quelque chose.
PS: il y a un petit problème avec le footer, ça laisse un espace blanc en dessous et je sais pas comment corriger ça? J'ai bidouillé avec le css mais pour l'instant ça donne rien...
parent d064e1aa
......@@ -2,18 +2,27 @@ body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
padding-bottom: 50px;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
footer {
bottom: 0;
}
.footer p {
margin-bottom: 0;
}
div.about p {
text-align: center;
padding: 10px;
width:400px;
font-size: 20px;
}
buttons {
text-align: center;
}
div.column {
float: left;
width: 33.33%;
......@@ -24,6 +33,7 @@ div.column {
.row{
margin:10px;
}
/*marche pas mais j'essaie de faire en sorte que quand on change la taille de la fenêtre
ça bouge tout pour que ça soit quand même tout sur la page.*/
@media screen and (max-width: 600px) {
......@@ -108,3 +118,18 @@ div.column {
margin-right: 8px;
opacity: 0.7;
}
/*langue*/
.column_langue {
float: left;
width: 50%;
}
.row_langue{
display: flex;
}
/* Clear floats after the columns */
.row_langue:after {
content: "";
display: table;
clear: both;
}
......@@ -19,12 +19,14 @@
...and counting...
</p>
</div>
<div class="buttons">
<a class="btn btn-dark bg-steel" href="/liste_langues">Afficher la liste des langues</a>
<br>
<br>
<a class="btn btn-dark bg-steel" href="/carte">Afficher la carte du monde</a>
</div>
</div>
</div>
<div class="buttons">
<a class="btn btn-dark bg-steel" href="/liste_langues">Afficher la liste des langues</a>
<a class="btn btn-dark bg-steel" href="/carte">Afficher la carte du monde</a>
<a class="btn btn-dark bg-steel">Afficher l'arbre hiérarchique des groupes de langues</a>
</div>
{% endblock content%}
......@@ -13,18 +13,49 @@
<!-- Use of the |safe filter in order to display the text taking account of <br> -->
<p>{{langue.text|safe}}</p>
<div class="row_langue">
<div class="column_langue">
<!-- If there is at least one recording in this language, displays the list of recordings -->
{% if sounds.first() is not none %}
<p><b>Liste des enregistrements</b></p>
{% for sound in sounds %}
<audio controls src="{{ url_for('static', filename='audio/') }}{{sound.filename}}">
Your browser does not support the <code>audio</code> element.</audio> {{sound.date}}<br>
{% endfor %}
<br>
{% endif %}
<a class="btn btn-dark bg-steel" href="/liste_langues">Retour à la liste des langues</a>
<a class="btn btn-dark bg-steel" href="/carte">Retour à la carte</a>
</div>
<div class="column_langue">
<!--leaflet-->
<div id="mapid" style="height: 400px; width: 400px;"></div>
<script>
/*setView(lat et lng du centre, combien de zoom - 1 = minimum qui affiche carte en entier)*/
var mymap = L.map('mapid').setView(['{{langue.geolat}}','{{langue.geolng}}'], 3);
//instanciation couche carte avec paramètres zoom
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 8,
maxNativeZoom: 8,
minZoom: 2,
wheelPxPerZoomLevel: 100,
panBy: 10,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
L.marker(['{{langue.geolat}}','{{langue.geolng}}']).addTo(mymap).bindPopup( '{{langue.french}}');
</script>
</div>
</div>
<!-- If there is at least one recording in this language, displays the list of recordings -->
{% if sounds.first() is not none %}
<p><b>Liste des enregistrements</b></p>
{% for sound in sounds %}
<audio controls src="{{ url_for('static', filename='audio/') }}{{sound.filename}}">
Your browser does not support the <code>audio</code> element.</audio> {{sound.date}}<br>
{% endfor %}
<br>
{% endif %}
<a class="btn btn-dark bg-steel" href="/liste_langues">Retour à la liste des langues</a>
<a class="btn btn-dark bg-steel" href="/carte">Retour à la carte</a>
<br>
<br>
......
......@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/main.css') }}">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
{% if title %}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment