From b838e78ec4aa507a4d00f9c24a30f3447742139a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Marchal?= Date: Sat, 30 Jan 2021 13:39:18 +0100 Subject: [PATCH] Mobile setup for "explorer" page on configurer --- data.json | 328 +++++++++++++++++++++++++++++++++++++++++++- explorer.html | 204 ++++++++++++++------------- scripts/explorer.js | 42 +++++- styles/main.css | 59 ++++++-- 4 files changed, 524 insertions(+), 109 deletions(-) diff --git a/data.json b/data.json index ea01ace..fa1f43d 100644 --- a/data.json +++ b/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", diff --git a/explorer.html b/explorer.html index 5de65be..4cdead4 100644 --- a/explorer.html +++ b/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.
Le symbole ‼︎ dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que vous pouvez contribuer.

-

Configuration  

+

Configuration 

-
-

Années

- - - - - - - - - - - - - - - - +
+

Années 

+
+ + + + + + + + + + + + + + + + +
-

Mois

- - - - - - - - - - - - - - - - - - - - - - - - - - +

Mois 

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
-

Dimensions

- - +

Dimensions 

+
+ + +
-

Thèmes

- - +

Thèmes 

+
+ + +
-

Catégories

- - +

Catégories 

+
+ + +
-

Lieux

- - +

Lieux 

+
+ + +
-

Tags

- - +

Tags 

+
+ + +
-

État photo

- - - - - - - - - - +

État photo 

+
+ + + + + + + + + + +
-

Aide requise

- - - - - - +

Aide requise 

+
+ + + + + + +

Aucun résultat. Veuillez réessayer avec d'autres paramètres.

- - - - - - - - - - - - - + + + + + + + + + + + + + + +
nºTitreAnnéeDimensionThèmeCatégorieLieuTagsPhotoAideVoir
nºTitreAnnéeDimensionThèmeCatégorieLieuTagsPhotoAideVoir
diff --git a/scripts/explorer.js b/scripts/explorer.js index 7efa97e..db5f003 100644 --- a/scripts/explorer.js +++ b/scripts/explorer.js @@ -59,31 +59,31 @@ jQuery(document).ready(function($) { html = '\n'; html += ''; - $(".box.dimensions").append(html); + $(".box.dimensions .item-cont").append(html); } for (theme of themes) { html = '\n'; html += ''; - $(".box.themes").append(html); + $(".box.themes .item-cont").append(html); } for (category of categories) { html = '\n'; html += ''; - $(".box.categories").append(html); + $(".box.categories .item-cont").append(html); } for (place of places) { html = '\n'; html += ''; - $(".box.places").append(html); + $(".box.places .item-cont").append(html); } for (tag of tags) { html = '\n'; html += ''; - $(".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); + } + }); + } }); }); \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 741043c..f23f64d 100644 --- a/styles/main.css +++ b/styles/main.css @@ -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; }