Skip to content
GitLab
Commit af134fe6 authored by ConstiDami's avatar ConstiDami
Browse files

phone friendly

parent 2d024659
Hide whitespace changes
Inline Side-by-side
Prince2020/prince/static/stylesheets/main.css
View file @ af134fe6
......@@ -5,9 +5,7 @@
@-ms-viewport {
width: device-width ;
}
@media screen and (max-width:415px) {
}
body {
background: #fafafa;
color: #333333;
......@@ -47,14 +45,9 @@ a:hover{
}
/*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.*/
ça bouge tout pour que ça soit quand même tout sur la page.
@media screen and (max-width: 1000px) {
.column {
width: 100%;
}
.column_home {
font-size: 10px;
}
}
/*img petit prince*/
#prince {
......@@ -83,6 +76,9 @@ a:hover{
color: #bc1c03;
border-color: #bc1c03;
}
.btn{
margin: 5px;
}
.btn .btn-light .bg-steel : hover {
background-color: #f6d6bf;
color: #bc1c03;
......@@ -154,6 +150,10 @@ a:hover{
margin-right: 8px;
opacity: 0.7;
}
.legend_map{
height:30px;
width:25px;
}
/*langue*/
.column_langue {
......@@ -169,3 +169,31 @@ a:hover{
display: table;
clear: both;
}
.map_langue{
height: 400px;
width: 400px;
}
@media screen and (max-width:768px) {
.row_home{
display:grid;
}
.column {
width: 100%;
}
.column_home {
font-size: 10px;
}
.row_langue{
display:grid;
}
.column_langue{
width:auto;
}
.map_langue{
height: 300px;
width: 300px;
}
.info-legend{
visibility:hidden;
}
}
Prince2020/prince/templates/langue.html
View file @ af134fe6
......@@ -26,12 +26,12 @@
{% endif %}
<a class="btn btn-light bg-steel" href="/projet_19-20/petit_prince/liste_langues">Retour à la liste des langues</a>
<a class="btn btn-light bg-steel" href="/projet_19-20/petit_prince/carte">Retour à la carte</a>
<a class="btn btn-light bg-steel" href="/projet_19-20/petit_prince/carte">Retour à la carte</a><br><br>
</div>
<div class="column_langue">
<!--leaflet-->
<div id="mapid" style="height: 400px; width: 400px;"></div>
<div id="mapid" class="map_langue"></div>
<script>
/*si les coordonnées ne sont pas 0,0 on affiche une carte*/
{% if langue.geolat != 0 %}
......
Prince2020/prince/templates/liste_langues.html
View file @ af134fe6
......@@ -4,43 +4,62 @@
<!-- 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 %}
{% set phone = False %}
<!-- This section checks if the columns are going to be even or if the last one will have less languages. -->
{% if liste_lang|length%4 == 0 %}
<!-- If liste_lang|length/4 is a float, rounds it up -->
{% else %}
{% set nb_par_col = nb_par_col+1 %}
{% endif %}
<!-- Setting of a table with 4 columns -->
<div class="container-fluid">
<div class="row">
<script type="text/javascript">
if (screen.width < '500') {
{% set phone = True %}
}
</script>
{% if not phone %}
<!-- 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 %}
{% for i in range(nb_par_col) %}
<div class="col-3">
<!-- 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/{{liste_lang[i].french}}">{{liste_lang[i].french|capitalize}} ({{sounds|selectattr("language", "equalto", liste_lang[i].iso)|list|length}})</a>
</div>
<div class="col-3">
<a href="/projet_19-20/petit_prince/langue/{{liste_lang[i+nb_par_col].french}}">{{liste_lang[i+nb_par_col].french|capitalize}} ({{sounds|selectattr("language", "equalto", liste_lang[i+nb_par_col].iso)|list|length}})</a>
</div>
<div class="col-3">
<a href="/projet_19-20/petit_prince/langue/{{liste_lang[i+2*nb_par_col].french}}">{{liste_lang[i+2*nb_par_col].french|capitalize}} ({{sounds|selectattr("language", "equalto", liste_lang[i+2*nb_par_col].iso)|list|length}})</a>
</div>
<!-- Makes sure that the index isn't out of range (deals with the last rows,
when there isn't a fourth column to display) -->
{% if i+3*nb_par_col < liste_lang|length %}
<div class="col-3">
<a href="/projet_19-20/petit_prince/langue/{{liste_lang[i+3*nb_par_col].french}}">{{liste_lang[i+3*nb_par_col].french|capitalize}} ({{sounds|selectattr("language", "equalto", liste_lang[i+3*nb_par_col].iso)|list|length}})</a>
</div>
<!-- This section checks if the columns are going to be even or if the last one will have less languages. -->
{% if liste_lang|length%4 == 0 %}
<!-- If liste_lang|length/4 is a float, rounds it up -->
{% else %}
{% set nb_par_col = nb_par_col+1 %}
{% endif %}
<!-- Closing the row and opening a new one -->
<!-- Setting of a table with 4 columns -->
<div class="container-fluid computer_lang">
<div class="row">
{% for i in range(nb_par_col) %}
<div class="col-sm-3">
<!-- 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/{{liste_lang[i].french}}">{{liste_lang[i].french|capitalize}} ({{sounds|selectattr("language", "equalto", liste_lang[i].iso)|list|length}})</a>
</div>
<div class="col-sm-3">
<a href="/projet_19-20/petit_prince/langue/{{liste_lang[i+nb_par_col].french}}">{{liste_lang[i+nb_par_col].french|capitalize}} ({{sounds|selectattr("language", "equalto", liste_lang[i+nb_par_col].iso)|list|length}})</a>
</div>
<div class="col-sm-3">
<a href="/projet_19-20/petit_prince/langue/{{liste_lang[i+2*nb_par_col].french}}">{{liste_lang[i+2*nb_par_col].french|capitalize}} ({{sounds|selectattr("language", "equalto", liste_lang[i+2*nb_par_col].iso)|list|length}})</a>
</div>
<!-- Makes sure that the index isn't out of range (deals with the last rows,
when there isn't a fourth column to display) -->
{% if i+3*nb_par_col < liste_lang|length %}
<div class="col-sm-3">
<a href="/projet_19-20/petit_prince/langue/{{liste_lang[i+3*nb_par_col].french}}">{{liste_lang[i+3*nb_par_col].french|capitalize}} ({{sounds|selectattr("language", "equalto", liste_lang[i+3*nb_par_col].iso)|list|length}})</a>
</div>
{% endif %}
<!-- Closing the row and opening a new one -->
</div>
<div class="row">
{% endfor %}
<!-- Closing the last row -->
</div>
<div class="row">
</div>
{% else %}
<div class="container-fluid phone_lang">
{%for langue in liste_lang%}
<div class="col-sm">
<!-- 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>
{% endfor %}
<!-- Closing the last row -->
</div>
</div>
{% endif %}
{% endblock content%}
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