keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Mobile setup for "explorer" page on configurer

Browse Source
This commit is contained in:
Théo Marchal 2021-01-30 13:39:18 +01:00
parent 093d451f16
commit b838e78ec4
4 changed files with 524 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
data.json
View File

@ -1,4 +1,5 @@
[{ [
{
"type": "tableau", "type": "tableau",
"number": "1", "number": "1",
"title": "Paysage Mouilly", "title": "Paysage Mouilly",
@ -205,7 +206,330 @@
{ {
"type": "tableau", "type": "tableau",
"number": "13", "number": "13",
"title": "Paysage neige à Mouilly et bavure d'escargot âpre", "title": "Paysage neige à Mouilly et long texte aléatoire",
"dimension": "99x69",
"month": "septembre",
"year": "2006",
"support": "carton",
"paint": "Aquarelle",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue faucibus velit, eget fringilla metus.",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "14",
"title": "Rep. \"T. de genres\"",
"dimension": "55x46",
"month": "",
"year": "1956",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "bad",
"help": ""
},
{
"type": "tableau",
"number": "15",
"title": "Sérénade à l’enfant",
"dimension": "55x46",
"month": "—",
"year": "1959",
"support": "Toile",
"paint": "Huile",
"theme": "Personnages",
"category": "—",
"place": "—",
"tags": "—",
"comment": "test commentaire",
"photo": "good",
"help": "no"
},
{
"type": "tableau",
"number": "16",
"title": "Mona Lisa",
"dimension": "65x50",
"month": "avril",
"year": "1959",
"support": "Toile",
"paint": "Huile",
"theme": "Personnages",
"category": "—",
"place": "—",
"tags": "chien, chat, cerf, canard, oie",
"comment": "Reproduction de Léonard de Vinci",
"photo": "bad",
"help": "yes"
},
{
"type": "tableau",
"number": "17",
"title": "Paysage Mouilly",
"dimension": "",
"month": "—",
"year": "1980",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "18",
"title": "Paysage Mouilly",
"dimension": "",
"month": "—",
"year": "1985",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "19",
"title": "Paysage Mouilly",
"dimension": "99x32",
"month": "février",
"year": "1987",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "ok",
"help": ""
},
{
"type": "tableau",
"number": "1",
"title": "Paysage Mouilly",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "2",
"title": "Rep. \"Nature Morte\"",
"dimension": "—",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "3",
"title": "Rep. \"Chasse\"",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "Mouilly",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "4",
"title": "Rep. \"Portrait\" (Reynolds)",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "5",
"title": "Rep. \"Paysage\"",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "6",
"title": "Portrait Monique",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "oui",
"place": "",
"tags": "mouche",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "7",
"title": "Rep. \"Portrait\" (Greuze)",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "non",
"place": "",
"tags": "canard",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "8",
"title": "Paysage Mouilly",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "Nancy",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "9",
"title": "Rep. \"Vierge aux raisins\" (Mignard)",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "10",
"title": "Rep. \"Paysage\"",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "11",
"title": "Rep. \"Paysage\"",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "bad",
"help": ""
},
{
"type": "tableau",
"number": "12",
"title": "Rep. \"Paysage\"",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "13",
"title": "Paysage neige à Mouilly et long texte aléatoire",
"dimension": "99x69", "dimension": "99x69",
"month": "septembre", "month": "septembre",
"year": "2006", "year": "2006",

204
explorer.html
View File

@ -35,122 +35,142 @@
Une &#x2606; étoile vide dans la colonne photo signifie que nous n'avons pas de photo pour un tableau ; une &#x2605; étoile qu'elle est de mauvaise qualité ; deux &#x2605;&#x2605; étoiles qu'elle est acceptable ; et trois &#x2605;&#x2605;&#x2605; étoiles qu'elle est tout à fait satisfaisante.<br> Une &#x2606; étoile vide dans la colonne photo signifie que nous n'avons pas de photo pour un tableau ; une &#x2605; étoile qu'elle est de mauvaise qualité ; deux &#x2605;&#x2605; étoiles qu'elle est acceptable ; et trois &#x2605;&#x2605;&#x2605; étoiles qu'elle est tout à fait satisfaisante.<br>
Le symbole &#8252;&#xFE0E; dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que <a href="informations.html">vous pouvez contribuer</a>.</p> Le symbole &#8252;&#xFE0E; dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que <a href="informations.html">vous pouvez contribuer</a>.</p>
<h2 class="active">Configuration <span>&nbsp;</span></h2> <h2 class="active">Configuration&nbsp;</h2>
<form action=""> <form action="">
<div class="container"> <div class="container">
<div class="box years"> <div class="box years active">
<h3>Années</h3> <h3>Années&nbsp;</h3>
<span><input type="checkbox" id="years" name="years" value="all"> <div class="item-cont">
<label for="years">Toutes</label></span> <span><input type="checkbox" id="years" name="years" value="all">
<span><input type="checkbox" id="50s" name="year" value="50s"> <label for="years">Toutes</label></span>
<label for="50s">1956-1959</label></span> <span><input type="checkbox" id="50s" name="year" value="50s">
<span><input type="checkbox" id="60s" name="year" value="60s"> <label for="50s">1956-1959</label></span>
<label for="60s">1960-1969</label></span> <span><input type="checkbox" id="60s" name="year" value="60s">
<span><input type="checkbox" id="70s" name="year" value="70s"> <label for="60s">1960-1969</label></span>
<label for="70s">1970-1979</label></span> <span><input type="checkbox" id="70s" name="year" value="70s">
<span><input type="checkbox" id="80s" name="year" value="80s"> <label for="70s">1970-1979</label></span>
<label for="80s">1980-1989</label></span> <span><input type="checkbox" id="80s" name="year" value="80s">
<span><input type="checkbox" id="90s" name="year" value="90s"> <label for="80s">1980-1989</label></span>
<label for="90s">1990-1999</label></span> <span><input type="checkbox" id="90s" name="year" value="90s">
<span><input type="checkbox" id="00s" name="year" value="00s"> <label for="90s">1990-1999</label></span>
<label for="00s">2000-2009</label></span> <span><input type="checkbox" id="00s" name="year" value="00s">
<span><input type="checkbox" id="10s" name="year" value="10s"> <label for="00s">2000-2009</label></span>
<label for="10s">2010-2016</label></span> <span><input type="checkbox" id="10s" name="year" value="10s">
<label for="10s">2010-2016</label></span>
</div>
</div> </div>
<div class="box months"> <div class="box months">
<h3>Mois</h3> <h3>Mois&nbsp;</h3>
<span><input type="checkbox" id="months" name="months" value="all"> <div class="item-cont">
<label for="months">Tous</label></span> <span><input type="checkbox" id="months" name="months" value="all">
<span><input type="checkbox" id="01" name="month" value="01"> <label for="months">Tous</label></span>
<label for="01">Janvier</label></span> <span><input type="checkbox" id="01" name="month" value="01">
<span><input type="checkbox" id="02" name="month" value="02"> <label for="01">Janvier</label></span>
<label for="02">Février</label></span> <span><input type="checkbox" id="02" name="month" value="02">
<span><input type="checkbox" id="03" name="month" value="03"> <label for="02">Février</label></span>
<label for="03">Mars</label></span> <span><input type="checkbox" id="03" name="month" value="03">
<span><input type="checkbox" id="04" name="month" value="04"> <label for="03">Mars</label></span>
<label for="04">Avril</label></span> <span><input type="checkbox" id="04" name="month" value="04">
<span><input type="checkbox" id="05" name="month" value="05"> <label for="04">Avril</label></span>
<label for="05">Mai</label></span> <span><input type="checkbox" id="05" name="month" value="05">
<span><input type="checkbox" id="06" name="month" value="06"> <label for="05">Mai</label></span>
<label for="06">Juin</label></span> <span><input type="checkbox" id="06" name="month" value="06">
<span><input type="checkbox" id="07" name="month" value="07"> <label for="06">Juin</label></span>
<label for="07">Juillet</label></span> <span><input type="checkbox" id="07" name="month" value="07">
<span><input type="checkbox" id="08" name="month" value="08"> <label for="07">Juillet</label></span>
<label for="08">Août</label></span> <span><input type="checkbox" id="08" name="month" value="08">
<span><input type="checkbox" id="09" name="month" value="09"> <label for="08">Août</label></span>
<label for="09">Septembre</label></span> <span><input type="checkbox" id="09" name="month" value="09">
<span><input type="checkbox" id="10" name="month" value="10"> <label for="09">Septembre</label></span>
<label for="10">Octobre</label></span> <span><input type="checkbox" id="10" name="month" value="10">
<span><input type="checkbox" id="11" name="month" value="11"> <label for="10">Octobre</label></span>
<label for="11">Novembre</label></span> <span><input type="checkbox" id="11" name="month" value="11">
<span><input type="checkbox" id="12" name="month" value="12"> <label for="11">Novembre</label></span>
<label for="12">Décembre</label></span> <span><input type="checkbox" id="12" name="month" value="12">
<label for="12">Décembre</label></span>
</div>
</div> </div>
<div class="box dimensions"> <div class="box dimensions">
<h3>Dimensions</h3> <h3>Dimensions&nbsp;</h3>
<span><input type="checkbox" id="dimensions" name="dimensions" value="all"> <div class="item-cont">
<label for="dimensions">Toutes</label></span> <span><input type="checkbox" id="dimensions" name="dimensions" value="all">
<label for="dimensions">Toutes</label></span>
</div>
</div> </div>
<div class="box themes"> <div class="box themes">
<h3>Thèmes</h3> <h3>Thèmes&nbsp;</h3>
<span><input type="checkbox" id="themes" name="themes" value="all"> <div class="item-cont">
<label for="themes">Tous</label></span> <span><input type="checkbox" id="themes" name="themes" value="all">
<label for="themes">Tous</label></span>
</div>
</div> </div>
<div class="box categories"> <div class="box categories">
<h3>Catégories</h3> <h3>Catégories&nbsp;</h3>
<span><input type="checkbox" id="categories" name="categories" value="all"> <div class="item-cont">
<label for="categories">Toutes</label></span> <span><input type="checkbox" id="categories" name="categories" value="all">
<label for="categories">Toutes</label></span>
</div>
</div> </div>
<div class="box places"> <div class="box places">
<h3>Lieux</h3> <h3>Lieux&nbsp;</h3>
<span><input type="checkbox" id="places" name="places" value="all"> <div class="item-cont">
<label for="places">Tous</label></span> <span><input type="checkbox" id="places" name="places" value="all">
<label for="places">Tous</label></span>
</div>
</div> </div>
<div class="box tags"> <div class="box tags">
<h3>Tags</h3> <h3>Tags&nbsp;</h3>
<span><input type="checkbox" id="tags" name="tags" value="all"> <div class="item-cont">
<label for="tags">Tous</label></span> <span><input type="checkbox" id="tags" name="tags" value="all">
<label for="tags">Tous</label></span>
</div>
</div> </div>
<div class="box photos"> <div class="box photos">
<h3>État photo</h3> <h3>État photo&nbsp;</h3>
<span><input type="checkbox" id="photos" name="photos" value="all"> <div class="item-cont">
<label for="photos">Tout état</label></span> <span><input type="checkbox" id="photos" name="photos" value="all">
<span><input type="checkbox" id="none" name="photo" value="none"> <label for="photos">Tout état</label></span>
<label for="none">&#x2606; aucune</label></span> <span><input type="checkbox" id="none" name="photo" value="none">
<span><input type="checkbox" id="bad" name="photo" value="bad"> <label for="none">&#x2606; aucune</label></span>
<label for="bad">&#x2605; mauvaise</label></span> <span><input type="checkbox" id="bad" name="photo" value="bad">
<span><input type="checkbox" id="ok" name="photo" value="ok"> <label for="bad">&#x2605; mauvaise</label></span>
<label for="ok">&#x2605;&#x2605; acceptable</label></span> <span><input type="checkbox" id="ok" name="photo" value="ok">
<span><input type="checkbox" id="good" name="photo" value="good"> <label for="ok">&#x2605;&#x2605; acceptable</label></span>
<label for="good">&#x2605;&#x2605;&#x2605; bonne</label></span> <span><input type="checkbox" id="good" name="photo" value="good">
<label for="good">&#x2605;&#x2605;&#x2605; bonne</label></span>
</div>
</div> </div>
<div class="box help"> <div class="box help">
<h3>Aide requise</h3> <h3>Aide requise&nbsp;</h3>
<span><input type="checkbox" id="helps" name="helps" value="all"> <div class="item-cont">
<label for="helps">Toute</label></span> <span><input type="checkbox" id="helps" name="helps" value="all">
<span><input type="checkbox" id="no" name="help" value="no"> <label for="helps">Toute</label></span>
<label for="no">Non</label></span> <span><input type="checkbox" id="no" name="help" value="no">
<span><input type="checkbox" id="yes" name="help" value="yes"> <label for="no">Non</label></span>
<label for="yes">&#8252;&#xFE0E;&nbsp;Oui</label></span> <span><input type="checkbox" id="yes" name="help" value="yes">
<label for="yes">&#8252;&#xFE0E;&nbsp;Oui</label></span>
</div>
</div> </div>
</div> </div>
<input type="submit" value="Générer"> <input type="submit" value="Générer">
</form> </form>
<p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p> <p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
<table> <table>
<tr> <thead>
<th>nº</th> <tr>
<th>Titre</th> <th>nº</th>
<th>Année</th> <th>Titre</th>
<th>Dimension</th> <th>Année</th>
<th>Thème</th> <th>Dimension</th>
<th>Catégorie</th> <th>Thème</th>
<th>Lieu</th> <th>Catégorie</th>
<th>Tags</th> <th>Lieu</th>
<th>Photo</th> <th>Tags</th>
<th>Aide</th> <th>Photo</th>
<th>Voir</th> <th>Aide</th>
</tr> <th>Voir</th>
</tr>
</thead>
</table> </table>
</article> </article>
</body> </body>

42
scripts/explorer.js
View File

@ -59,31 +59,31 @@ jQuery(document).ready(function($)
{ {
html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n'; html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n';
html += '<label for="' + dimension + '">' + dimension + '</label></span>'; html += '<label for="' + dimension + '">' + dimension + '</label></span>';
$(".box.dimensions").append(html); $(".box.dimensions .item-cont").append(html);
} }
for (theme of themes) for (theme of themes)
{ {
html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n'; html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n';
html += '<label for="' + theme + '">' + theme + '</label></span>'; html += '<label for="' + theme + '">' + theme + '</label></span>';
$(".box.themes").append(html); $(".box.themes .item-cont").append(html);
} }
for (category of categories) for (category of categories)
{ {
html = '<span><input type="checkbox" id="' + category + '" name="category" value="' + category + '"></input>\n'; html = '<span><input type="checkbox" id="' + category + '" name="category" value="' + category + '"></input>\n';
html += '<label for="' + category + '">' + category + '</label></span>'; html += '<label for="' + category + '">' + category + '</label></span>';
$(".box.categories").append(html); $(".box.categories .item-cont").append(html);
} }
for (place of places) for (place of places)
{ {
html = '<span><input type="checkbox" id="' + place + '" name="place" value="' + place + '"></input>\n'; html = '<span><input type="checkbox" id="' + place + '" name="place" value="' + place + '"></input>\n';
html += '<label for="'+place+'">' + place + '</label></span>'; html += '<label for="'+place+'">' + place + '</label></span>';
$(".box.places").append(html); $(".box.places .item-cont").append(html);
} }
for (tag of tags) for (tag of tags)
{ {
html = '<span><input type="checkbox" id="' + tag + '" name="tag" value="' + tag + '"></input>\n'; html = '<span><input type="checkbox" id="' + tag + '" name="tag" value="' + tag + '"></input>\n';
html += '<label for="'+tag+'">' + tag + '</label></span>'; html += '<label for="'+tag+'">' + tag + '</label></span>';
$(".box.tags").append(html); $(".box.tags .item-cont").append(html);
} }
// populate checkboxes depending on URL // populate checkboxes depending on URL
@ -160,6 +160,24 @@ jQuery(document).ready(function($)
} }
}); });
// menu configurer child on mobile show/hide
if ($(window).width() <= 600)
{
$("article.explorer .box h3").click(function()
{
if ($(this).parent().hasClass("active"))
{
$(this).parent().removeClass("active");
$(this).parent().children(".item-cont").slideUp(200);
}
else
{
$(this).parent().addClass("active");
$(this).parent().children(".item-cont").slideDown(200);
}
});
}
/***********/ /***********/
/** TABLE **/ /** TABLE **/
@ -341,5 +359,19 @@ jQuery(document).ready(function($)
} }
else else
$("article.explorer p.no-result").css("display", "block"); $("article.explorer p.no-result").css("display", "block");
// on mobile, show only the first item slided down
if ($(window).width() <= 600)
{
console.log($(window).width());
$("article.explorer .container .box").each(function()
{
console.log("hi");
if (!$(this).hasClass('active'))
{
$(this).children(".item-cont").slideUp(200);
}
});
}
}); });
}); });

59
styles/main.css
View File

@ -340,15 +340,15 @@ article.explorer h2 {
cursor:pointer; cursor:pointer;
} }
article.explorer h2 span::before { article.explorer h2::after {
content: "▼︎"; content:"▼︎";
display: inline-block; display:inline-block;
position: absolute; position:absolute;
transition:transform .2s ease; transition:transform .2s ease;
transform:rotate(-90deg); transform:rotate(-90deg);
} }
article.explorer h2.active span::before { article.explorer h2.active::after {
transform:rotate(0); transform:rotate(0);
} }
@ -361,11 +361,11 @@ article.explorer form h3, article.explorer form span {
} }
article.explorer form .container { article.explorer form .container {
max-width:80vw; /*max-width:80vw;*/
margin:auto; margin:auto;
display:flex; display:flex;
align-self:flex-start; align-self:flex-start;
justify-content:space-evenly; justify-content:space-around;
flex-wrap:wrap; flex-wrap:wrap;
} }
@ -375,7 +375,12 @@ article.explorer form {
article.explorer form select { article.explorer form select {
display:block; display:block;
margin-right:1rem; margin-right:0.75rem;
}
/* does not seem to work */
article.explorer form .box {
margin:1rem;
} }
article.explorer input[type = submit] { article.explorer input[type = submit] {
@ -393,6 +398,40 @@ article.explorer input[type = submit] {
color:white; color:white;
} }
@media only screen and (max-width:600px) {
article.explorer form .container {
display:block;
}
article.explorer form .container .box span {
display:block;
margin-left:1rem;
font-size:1.05rem;
}
article.explorer form .container h3 {
cursor:pointer;
}
article.explorer form .container h3::after{
content:"▼︎";
display:inline-block;
position:absolute;
transition:transform .2s ease;
transform:rotate(-90deg);
}
article.explorer form .container .box.active h3::after {
transform:rotate(0);
}
}
@media only screen and (max-width:1200px) {
article.explorer form .container {
justify-content:left;
}
}
article.explorer p.no-result { article.explorer p.no-result {
text-align:center; text-align:center;
font-size:1.2rem; font-size:1.2rem;
@ -407,7 +446,7 @@ article.explorer table {
width:100%; width:100%;
margin-top:1rem; margin-top:1rem;
margin-bottom:1rem; margin-bottom:1rem;
overflow-x:auto; overflow-x:scroll;
} }
article.explorer table tr:first-child th:first-child { article.explorer table tr:first-child th:first-child {
@ -440,7 +479,7 @@ article.explorer td, article.explorer th {
article.explorer th { article.explorer th {
border-top:1px solid #bbb; border-top:1px solid #bbb;
background:#dddddd; background:#ddd;
position:sticky; position:sticky;
top:0; top:0;
} }