a

Prince2020/prince/static/stylesheets/main.css

@@ -44,11 +44,6 @@ a:hover{
   color:#800000;
 }
 
-/*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: 1000px) {
-
-}
 /*img petit prince*/
 #prince {
   float:left;
@@ -131,8 +126,8 @@ a:hover{
   color: #bc1c03 !important; // Define your own color in your CSS
 }
 
-/*carte*/
-#mapid { height: 180px; }
+/*carte
+#mapid { height: 180px; }*/
 .info-legend {
     line-height: 18px;
     color: #555;
@@ -179,7 +174,9 @@ a:hover{
   height: 400px;
   width: 400px;
 }
+/* responsive layout for phone screens*/
 @media screen and (max-width:580px) {
+  /* home: les éléments se placent les uns sous les autres*/
   .row_home{
     display:grid;
   }
@@ -189,12 +186,14 @@ a:hover{
   .column_home {
     font-size: 10px;
   }
+  /* langue: les éléments se placent les uns sous les autres*/
   .row_langue{
     display:grid;
   }
   .column_langue{
     width:auto;
   }
+  /* diminution de la taille de la carte, sans la légende qui prend trop de place */
   .map_langue{
     height: 300px;
     width: 300px;
@@ -202,6 +201,7 @@ a:hover{
   .info-legend{
     visibility:hidden;
   }
+  /* Affichage de la liste des langues sur une colonne ou sur 4 */
   .phone_lang{
     display: block;
   }

Prince2020/prince/templates/langue.html

@@ -99,6 +99,7 @@
 
                      markers = ['{{ url_for('static', filename='img/marker/blue.png')}}', '{{ url_for('static', filename='img/marker/prince_pink.png')}}','{{ url_for('static', filename='img/marker/prince_yellow.png')}}', '{{ url_for('static', filename='img/marker/prince_green.png')}}'];
 
+
                  for (var i = 0; i < types.length; i++) {
                      div.innerHTML +=
                           ("<img src=" + markers[i] + " height='30' width='25'>") +  types[i] + '<br>';

Prince2020/prince/templates/liste_langues.html

@@ -2,8 +2,8 @@
 {% block content %}
   <h1>Liste des langues</h1>
 
-  <!-- Sorting by alphabetical order in french -->
-  {% set liste_lang = prince_language|list|sort(attribute='french')%}
+    <!-- Sorting by alphabetical order in french -->
+    {% set liste_lang = prince_language|list|sort(attribute='french')%}
 
     <!-- Defines the number of languages to display by column, in order to know the range of the loop for -->
     {% set nb_par_col = liste_lang|length//4 %}
@@ -15,6 +15,7 @@
       {% set nb_par_col = nb_par_col+1 %}
     {% endif %}
     <!-- Setting of a table with 4 columns -->
+    <!-- The computer_lang class is hidden with css when the screen size is small, displayed when it is a computer screen -->
     <div class="container-fluid computer_lang">
       <div class="row computer_lang">
 
@@ -45,10 +46,10 @@
     </div>
   </div>
 
+<!-- The phone_lang class is hidden with css when the screen size is big, and displayed for a phone screen -->
 <div class="container-fluid phone_lang">
   {%for langue in liste_lang%}
   <div class="col-sm phone_lang">
-    <!-- liste_lang[i] refers to the current language -->
     <!-- Displays also the number of recordings for this current language -->
     <a href="/projet_19-20/petit_prince/langue/{{langue.french}}">{{langue.french|capitalize}} ({{sounds|selectattr("language", "equalto", langue.iso)|list|length}})</a>
   </div>

Prince2020/prince/templates/liste_langues_phone.html

-{% extends "layout.html" %}
-{% block content %}
-  <h1>Liste des langues</h1>
-
-{% set liste_lang = prince_language|list|sort(attribute='french')%}
-
-  <div class="container-fluid">
-    {% for i in range(list_lang) %}
-
-    <div class="row">
-      <div class="col">
-          <a href="/projet_19-20/petit_prince/langue/{{liste_lang[i].french}}">{{liste_lang[i].french|capitalize}} ({{sounds|selectattr("language", "equalto", liste_lang[i].iso)|list|length}})</a>
-      </div>
-    </div>
-    {% endfor %}
-
-  </div>
-
-{% endblock content%}