Mobile setup for "explorer" page on configurer
This commit is contained in:
parent
093d451f16
commit
b838e78ec4
328
data.json
328
data.json
@ -1,4 +1,5 @@
|
||||
[{
|
||||
[
|
||||
{
|
||||
"type": "tableau",
|
||||
"number": "1",
|
||||
"title": "Paysage Mouilly",
|
||||
@ -205,7 +206,330 @@
|
||||
{
|
||||
"type": "tableau",
|
||||
"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",
|
||||
"month": "septembre",
|
||||
"year": "2006",
|
||||
|
||||
204
explorer.html
204
explorer.html
@ -35,122 +35,142 @@
|
||||
Une ☆ étoile vide dans la colonne photo signifie que nous n'avons pas de photo pour un tableau ; une ★ étoile qu'elle est de mauvaise qualité ; deux ★★ étoiles qu'elle est acceptable ; et trois ★★★ étoiles qu'elle est tout à fait satisfaisante.<br>
|
||||
Le symbole ‼︎ 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> </span></h2>
|
||||
<h2 class="active">Configuration </h2>
|
||||
<form action="">
|
||||
<div class="container">
|
||||
<div class="box years">
|
||||
<h3>Années</h3>
|
||||
<span><input type="checkbox" id="years" name="years" value="all">
|
||||
<label for="years">Toutes</label></span>
|
||||
<span><input type="checkbox" id="50s" name="year" value="50s">
|
||||
<label for="50s">1956-1959</label></span>
|
||||
<span><input type="checkbox" id="60s" name="year" value="60s">
|
||||
<label for="60s">1960-1969</label></span>
|
||||
<span><input type="checkbox" id="70s" name="year" value="70s">
|
||||
<label for="70s">1970-1979</label></span>
|
||||
<span><input type="checkbox" id="80s" name="year" value="80s">
|
||||
<label for="80s">1980-1989</label></span>
|
||||
<span><input type="checkbox" id="90s" name="year" value="90s">
|
||||
<label for="90s">1990-1999</label></span>
|
||||
<span><input type="checkbox" id="00s" name="year" value="00s">
|
||||
<label for="00s">2000-2009</label></span>
|
||||
<span><input type="checkbox" id="10s" name="year" value="10s">
|
||||
<label for="10s">2010-2016</label></span>
|
||||
<div class="box years active">
|
||||
<h3>Années </h3>
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="years" name="years" value="all">
|
||||
<label for="years">Toutes</label></span>
|
||||
<span><input type="checkbox" id="50s" name="year" value="50s">
|
||||
<label for="50s">1956-1959</label></span>
|
||||
<span><input type="checkbox" id="60s" name="year" value="60s">
|
||||
<label for="60s">1960-1969</label></span>
|
||||
<span><input type="checkbox" id="70s" name="year" value="70s">
|
||||
<label for="70s">1970-1979</label></span>
|
||||
<span><input type="checkbox" id="80s" name="year" value="80s">
|
||||
<label for="80s">1980-1989</label></span>
|
||||
<span><input type="checkbox" id="90s" name="year" value="90s">
|
||||
<label for="90s">1990-1999</label></span>
|
||||
<span><input type="checkbox" id="00s" name="year" value="00s">
|
||||
<label for="00s">2000-2009</label></span>
|
||||
<span><input type="checkbox" id="10s" name="year" value="10s">
|
||||
<label for="10s">2010-2016</label></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box months">
|
||||
<h3>Mois</h3>
|
||||
<span><input type="checkbox" id="months" name="months" value="all">
|
||||
<label for="months">Tous</label></span>
|
||||
<span><input type="checkbox" id="01" name="month" value="01">
|
||||
<label for="01">Janvier</label></span>
|
||||
<span><input type="checkbox" id="02" name="month" value="02">
|
||||
<label for="02">Février</label></span>
|
||||
<span><input type="checkbox" id="03" name="month" value="03">
|
||||
<label for="03">Mars</label></span>
|
||||
<span><input type="checkbox" id="04" name="month" value="04">
|
||||
<label for="04">Avril</label></span>
|
||||
<span><input type="checkbox" id="05" name="month" value="05">
|
||||
<label for="05">Mai</label></span>
|
||||
<span><input type="checkbox" id="06" name="month" value="06">
|
||||
<label for="06">Juin</label></span>
|
||||
<span><input type="checkbox" id="07" name="month" value="07">
|
||||
<label for="07">Juillet</label></span>
|
||||
<span><input type="checkbox" id="08" name="month" value="08">
|
||||
<label for="08">Août</label></span>
|
||||
<span><input type="checkbox" id="09" name="month" value="09">
|
||||
<label for="09">Septembre</label></span>
|
||||
<span><input type="checkbox" id="10" name="month" value="10">
|
||||
<label for="10">Octobre</label></span>
|
||||
<span><input type="checkbox" id="11" name="month" value="11">
|
||||
<label for="11">Novembre</label></span>
|
||||
<span><input type="checkbox" id="12" name="month" value="12">
|
||||
<label for="12">Décembre</label></span>
|
||||
<h3>Mois </h3>
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="months" name="months" value="all">
|
||||
<label for="months">Tous</label></span>
|
||||
<span><input type="checkbox" id="01" name="month" value="01">
|
||||
<label for="01">Janvier</label></span>
|
||||
<span><input type="checkbox" id="02" name="month" value="02">
|
||||
<label for="02">Février</label></span>
|
||||
<span><input type="checkbox" id="03" name="month" value="03">
|
||||
<label for="03">Mars</label></span>
|
||||
<span><input type="checkbox" id="04" name="month" value="04">
|
||||
<label for="04">Avril</label></span>
|
||||
<span><input type="checkbox" id="05" name="month" value="05">
|
||||
<label for="05">Mai</label></span>
|
||||
<span><input type="checkbox" id="06" name="month" value="06">
|
||||
<label for="06">Juin</label></span>
|
||||
<span><input type="checkbox" id="07" name="month" value="07">
|
||||
<label for="07">Juillet</label></span>
|
||||
<span><input type="checkbox" id="08" name="month" value="08">
|
||||
<label for="08">Août</label></span>
|
||||
<span><input type="checkbox" id="09" name="month" value="09">
|
||||
<label for="09">Septembre</label></span>
|
||||
<span><input type="checkbox" id="10" name="month" value="10">
|
||||
<label for="10">Octobre</label></span>
|
||||
<span><input type="checkbox" id="11" name="month" value="11">
|
||||
<label for="11">Novembre</label></span>
|
||||
<span><input type="checkbox" id="12" name="month" value="12">
|
||||
<label for="12">Décembre</label></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box dimensions">
|
||||
<h3>Dimensions</h3>
|
||||
<span><input type="checkbox" id="dimensions" name="dimensions" value="all">
|
||||
<label for="dimensions">Toutes</label></span>
|
||||
<h3>Dimensions </h3>
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="dimensions" name="dimensions" value="all">
|
||||
<label for="dimensions">Toutes</label></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box themes">
|
||||
<h3>Thèmes</h3>
|
||||
<span><input type="checkbox" id="themes" name="themes" value="all">
|
||||
<label for="themes">Tous</label></span>
|
||||
<h3>Thèmes </h3>
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="themes" name="themes" value="all">
|
||||
<label for="themes">Tous</label></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box categories">
|
||||
<h3>Catégories</h3>
|
||||
<span><input type="checkbox" id="categories" name="categories" value="all">
|
||||
<label for="categories">Toutes</label></span>
|
||||
<h3>Catégories </h3>
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="categories" name="categories" value="all">
|
||||
<label for="categories">Toutes</label></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box places">
|
||||
<h3>Lieux</h3>
|
||||
<span><input type="checkbox" id="places" name="places" value="all">
|
||||
<label for="places">Tous</label></span>
|
||||
<h3>Lieux </h3>
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="places" name="places" value="all">
|
||||
<label for="places">Tous</label></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box tags">
|
||||
<h3>Tags</h3>
|
||||
<span><input type="checkbox" id="tags" name="tags" value="all">
|
||||
<label for="tags">Tous</label></span>
|
||||
<h3>Tags </h3>
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="tags" name="tags" value="all">
|
||||
<label for="tags">Tous</label></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box photos">
|
||||
<h3>État photo</h3>
|
||||
<span><input type="checkbox" id="photos" name="photos" value="all">
|
||||
<label for="photos">Tout état</label></span>
|
||||
<span><input type="checkbox" id="none" name="photo" value="none">
|
||||
<label for="none">☆ aucune</label></span>
|
||||
<span><input type="checkbox" id="bad" name="photo" value="bad">
|
||||
<label for="bad">★ mauvaise</label></span>
|
||||
<span><input type="checkbox" id="ok" name="photo" value="ok">
|
||||
<label for="ok">★★ acceptable</label></span>
|
||||
<span><input type="checkbox" id="good" name="photo" value="good">
|
||||
<label for="good">★★★ bonne</label></span>
|
||||
<h3>État photo </h3>
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="photos" name="photos" value="all">
|
||||
<label for="photos">Tout état</label></span>
|
||||
<span><input type="checkbox" id="none" name="photo" value="none">
|
||||
<label for="none">☆ aucune</label></span>
|
||||
<span><input type="checkbox" id="bad" name="photo" value="bad">
|
||||
<label for="bad">★ mauvaise</label></span>
|
||||
<span><input type="checkbox" id="ok" name="photo" value="ok">
|
||||
<label for="ok">★★ acceptable</label></span>
|
||||
<span><input type="checkbox" id="good" name="photo" value="good">
|
||||
<label for="good">★★★ bonne</label></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box help">
|
||||
<h3>Aide requise</h3>
|
||||
<span><input type="checkbox" id="helps" name="helps" value="all">
|
||||
<label for="helps">Toute</label></span>
|
||||
<span><input type="checkbox" id="no" name="help" value="no">
|
||||
<label for="no">Non</label></span>
|
||||
<span><input type="checkbox" id="yes" name="help" value="yes">
|
||||
<label for="yes">‼︎ Oui</label></span>
|
||||
<h3>Aide requise </h3>
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="helps" name="helps" value="all">
|
||||
<label for="helps">Toute</label></span>
|
||||
<span><input type="checkbox" id="no" name="help" value="no">
|
||||
<label for="no">Non</label></span>
|
||||
<span><input type="checkbox" id="yes" name="help" value="yes">
|
||||
<label for="yes">‼︎ Oui</label></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="submit" value="Générer">
|
||||
</form>
|
||||
<p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>nº</th>
|
||||
<th>Titre</th>
|
||||
<th>Année</th>
|
||||
<th>Dimension</th>
|
||||
<th>Thème</th>
|
||||
<th>Catégorie</th>
|
||||
<th>Lieu</th>
|
||||
<th>Tags</th>
|
||||
<th>Photo</th>
|
||||
<th>Aide</th>
|
||||
<th>Voir</th>
|
||||
</tr>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>nº</th>
|
||||
<th>Titre</th>
|
||||
<th>Année</th>
|
||||
<th>Dimension</th>
|
||||
<th>Thème</th>
|
||||
<th>Catégorie</th>
|
||||
<th>Lieu</th>
|
||||
<th>Tags</th>
|
||||
<th>Photo</th>
|
||||
<th>Aide</th>
|
||||
<th>Voir</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</article>
|
||||
</body>
|
||||
|
||||
@ -59,31 +59,31 @@ jQuery(document).ready(function($)
|
||||
{
|
||||
html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n';
|
||||
html += '<label for="' + dimension + '">' + dimension + '</label></span>';
|
||||
$(".box.dimensions").append(html);
|
||||
$(".box.dimensions .item-cont").append(html);
|
||||
}
|
||||
for (theme of themes)
|
||||
{
|
||||
html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n';
|
||||
html += '<label for="' + theme + '">' + theme + '</label></span>';
|
||||
$(".box.themes").append(html);
|
||||
$(".box.themes .item-cont").append(html);
|
||||
}
|
||||
for (category of categories)
|
||||
{
|
||||
html = '<span><input type="checkbox" id="' + category + '" name="category" value="' + category + '"></input>\n';
|
||||
html += '<label for="' + category + '">' + category + '</label></span>';
|
||||
$(".box.categories").append(html);
|
||||
$(".box.categories .item-cont").append(html);
|
||||
}
|
||||
for (place of places)
|
||||
{
|
||||
html = '<span><input type="checkbox" id="' + place + '" name="place" value="' + place + '"></input>\n';
|
||||
html += '<label for="'+place+'">' + place + '</label></span>';
|
||||
$(".box.places").append(html);
|
||||
$(".box.places .item-cont").append(html);
|
||||
}
|
||||
for (tag of tags)
|
||||
{
|
||||
html = '<span><input type="checkbox" id="' + tag + '" name="tag" value="' + tag + '"></input>\n';
|
||||
html += '<label for="'+tag+'">' + tag + '</label></span>';
|
||||
$(".box.tags").append(html);
|
||||
$(".box.tags .item-cont").append(html);
|
||||
}
|
||||
|
||||
// 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 **/
|
||||
@ -341,5 +359,19 @@ jQuery(document).ready(function($)
|
||||
}
|
||||
else
|
||||
$("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);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -340,15 +340,15 @@ article.explorer h2 {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
article.explorer h2 span::before {
|
||||
content: "▼︎";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
article.explorer h2::after {
|
||||
content:"▼︎";
|
||||
display:inline-block;
|
||||
position:absolute;
|
||||
transition:transform .2s ease;
|
||||
transform:rotate(-90deg);
|
||||
}
|
||||
|
||||
article.explorer h2.active span::before {
|
||||
article.explorer h2.active::after {
|
||||
transform:rotate(0);
|
||||
}
|
||||
|
||||
@ -361,11 +361,11 @@ article.explorer form h3, article.explorer form span {
|
||||
}
|
||||
|
||||
article.explorer form .container {
|
||||
max-width:80vw;
|
||||
/*max-width:80vw;*/
|
||||
margin:auto;
|
||||
display:flex;
|
||||
align-self:flex-start;
|
||||
justify-content:space-evenly;
|
||||
justify-content:space-around;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
@ -375,7 +375,12 @@ article.explorer form {
|
||||
|
||||
article.explorer form select {
|
||||
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] {
|
||||
@ -393,6 +398,40 @@ article.explorer input[type = submit] {
|
||||
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 {
|
||||
text-align:center;
|
||||
font-size:1.2rem;
|
||||
@ -407,7 +446,7 @@ article.explorer table {
|
||||
width:100%;
|
||||
margin-top:1rem;
|
||||
margin-bottom:1rem;
|
||||
overflow-x:auto;
|
||||
overflow-x:scroll;
|
||||
}
|
||||
|
||||
article.explorer table tr:first-child th:first-child {
|
||||
@ -440,7 +479,7 @@ article.explorer td, article.explorer th {
|
||||
|
||||
article.explorer th {
|
||||
border-top:1px solid #bbb;
|
||||
background:#dddddd;
|
||||
background:#ddd;
|
||||
position:sticky;
|
||||
top:0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user