diff --git a/data.json b/data.json index fa1f43d..652c2e2 100644 --- a/data.json +++ b/data.json @@ -183,7 +183,7 @@ "place": "", "tags": "", "comment": "", - "photo": "bad", + "photo": "none", "help": "" }, { @@ -234,7 +234,7 @@ "place": "", "tags": "", "comment": "", - "photo": "bad", + "photo": "none", "help": "" }, { @@ -268,7 +268,7 @@ "place": "—", "tags": "chien, chat, cerf, canard, oie", "comment": "Reproduction de Léonard de Vinci", - "photo": "bad", + "photo": "none", "help": "yes" }, { @@ -506,7 +506,7 @@ "place": "", "tags": "", "comment": "", - "photo": "bad", + "photo": "none", "help": "" }, { @@ -557,7 +557,7 @@ "place": "", "tags": "", "comment": "", - "photo": "bad", + "photo": "none", "help": "" }, { @@ -591,7 +591,7 @@ "place": "—", "tags": "chien, chat, cerf, canard, oie", "comment": "Reproduction de Léonard de Vinci", - "photo": "bad", + "photo": "none", "help": "yes" }, { diff --git a/explorer.html b/explorer.html index 4cdead4..eb50c53 100644 --- a/explorer.html +++ b/explorer.html @@ -9,7 +9,10 @@ + + + @@ -31,11 +34,15 @@

Explorer

-

Cette section du site permet de générer une liste (bientôt aussi visible sous le format d'une galerie) en fonction de différents paramètres, listés ci-dessous. Il permet d'explorer l'œuvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.
+

Cette section du site permet de générer une liste (aussi visible sous le format d'une galerie) en fonction de différents paramètres, listés ci-dessous. Il permet d'explorer l'œuvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.
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 

+ + +
@@ -155,10 +162,11 @@

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

+ - + diff --git a/informations.html b/informations.html index 994c4fe..86700ae 100644 --- a/informations.html +++ b/informations.html @@ -41,7 +41,7 @@

Informations technique

-

Ce site a été développé à l'aide de la librairie jQuery, ainsi que du plugin FancyBox 3 et Chart.js. Les polices de caractères utilisées sont Rubik, Commissioner et Hot August Night.

+

Ce site a été développé à l'aide de la librairie jQuery, ainsi que du plugin FancyBox 3 et Chart.js. Les polices de caractères utilisées sont Rubik, Commissioner et Hot August Night. Emoji "tableau" par OpenMoji.

Le code source est librement disponible via git en cliquant ici. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.

diff --git a/scripts/explorer.js b/scripts/explorer.js index a248baf..0bdeac2 100644 --- a/scripts/explorer.js +++ b/scripts/explorer.js @@ -179,12 +179,10 @@ jQuery(document).ready(function($) } -/***********/ -/** TABLE **/ -/***********/ +/*********************/ +/** TABLE & GALLERY **/ +/*********************/ - function generateTable() - { function checkYear(year) { if (paramYear == "all") return true; @@ -256,11 +254,7 @@ jQuery(document).ready(function($) { if (paramTag == "all") return true; - console.log("tag: " + tag); - console.log("paramTag: " + paramTag); - splitTag = tag.split(", "); - console.log(splitTag); for (t of splitTag) { @@ -288,6 +282,8 @@ jQuery(document).ready(function($) return false; } + function generateTable() + { hasResult = false; for (i of data) @@ -313,6 +309,7 @@ jQuery(document).ready(function($) hasResult = true; + // table $("table").css("display", "block"); result = ""; @@ -343,17 +340,32 @@ jQuery(document).ready(function($) result += ""; $("table").append(result); + + // gallery + if (i.photo == "none") + { + paintingHtml = '' + paintingHtml += '' + } + else + { + paintingHtml = '' + paintingHtml += '' + } + $("#gallery").append(paintingHtml); } return hasResult; } + $("#gallery").hide(); + $(".style-select").hide(); generateMenu(); - var res = generateTable(); - // display table or no result depending of computed result - if (res) + + if (res) // display table or no result depending of computed result { + $(".style-select").show(); $("article.explorer h2").removeClass("active") $("form").slideUp(200); } @@ -363,15 +375,51 @@ jQuery(document).ready(function($) // 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); } }); } + + // change display: gallery/table + $(".style-select.frame").click(function() + { + $("table").hide(); + $("#gallery").show(); + }) + $(".style-select.list").click(function() + { + $("#gallery").hide(); + $("table").show(); + }) + + + // fancybox configuration + $('[data-fancybox="exposition"]').fancybox( + { + infobar: false, + toolbar: true, + smallBtn: false, + buttons: ["arrowLeft", "arrowRight", "close"], + arrows: false, + transitionEffect: "fade", + baseClass: 'fancybox-custom-layout', + + caption: function(instance, item) + { + var idx = item.opts.fancyboxIndex - 1; // painting number + return '\ +
\ + ℹ︎\ + ' + data[idx].title + '' + (data[idx].month != '—' ? data[idx].month + ' ' : '') + data[idx].year + '\ + ' + data[idx].paint + ' sur ' + data[idx].support + ' (' + data[idx].dimension + ')\ + ' + data[idx].comment + '\ +
\ + '; + } + }); }); }); \ No newline at end of file diff --git a/scripts/exposition.js b/scripts/exposition.js index e92f0c0..d0fd9b5 100644 --- a/scripts/exposition.js +++ b/scripts/exposition.js @@ -6,10 +6,8 @@ jQuery(document).ready(function($) { if (i.photo == "ok" || i.photo == "good") { - console.log(i.number); paintingHtml = '' paintingHtml += ''; - console.log(paintingHtml); $("#gallery").append(paintingHtml); } } diff --git a/styles/fancybox.css b/styles/fancybox.css index 2fca171..a458d2e 100644 --- a/styles/fancybox.css +++ b/styles/fancybox.css @@ -21,7 +21,6 @@ top:0; } - .fancybox-custom-layout.fancybox-can-zoomIn .fancybox-show-caption, .fancybox-custom-layout.fancybox-can-zoomIn .fancybox-caption, .fancybox-custom-layout.fancybox-can-zoomIn .fancybox-toolbar { @@ -35,7 +34,6 @@ opacity:0; } - .fancybox-custom-layout .fancybox-button { color:#38686A; background:#f6f6f6; @@ -77,4 +75,8 @@ .fancybox-custom-layout .fancybox-caption #info a:hover { color:#2589BD; +} + +.fancybox-custom-layout.fancybox-container .fancybox-caption { + box-sizing:initial; } \ No newline at end of file diff --git a/styles/icons/frame.svg b/styles/icons/frame.svg new file mode 100644 index 0000000..dd34128 --- /dev/null +++ b/styles/icons/frame.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/styles/icons/list.svg b/styles/icons/list.svg new file mode 100644 index 0000000..11bb49f --- /dev/null +++ b/styles/icons/list.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 4877ab1..3ed6084 100644 --- a/styles/main.css +++ b/styles/main.css @@ -218,8 +218,10 @@ article #gallery img { /* Cartel (expo & painting) */ #info { - width:300px; - max-width:70vw; + width:-moz-fit-content; + width:fit-content; + min-width:300px; + max-width:76vw; box-shadow:.2rem .2rem .2rem .2rem rgba(0,0,0,.1); padding:0.65rem 1.15rem 0.65rem 1.15rem; position:relative; @@ -229,6 +231,12 @@ article #gallery img { margin-bottom:1.5rem; } +@media only screen and (max-width: 600px) { + #info { + min-width:280px; + } +} + #info .info { font-size:1.2rem; position:absolute; @@ -335,9 +343,19 @@ article.explorer p { } } +article.explorer .style-container { + display:flex; + align-self:flex-end; + justify-content:space-evenly; + flex-wrap:nowrap; +} + article.explorer h2 { margin:0; + margin-right:auto; cursor:pointer; + width:-moz-fit-content; + width:fit-content; } article.explorer h2::after { @@ -352,6 +370,17 @@ article.explorer h2.active::after { transform:rotate(0); } +article.explorer img.style-select { + display:block; + text-align:right; + max-height:2rem; + margin:0; + margin-bottom:0.25rem; + margin-right:0.5rem; + margin-left:0.5rem; + cursor:pointer; +} + article.explorer h3 { margin-bottom:0.3rem; } @@ -446,7 +475,7 @@ article.explorer table { width:100%; margin-top:1rem; margin-bottom:1rem; - overflow-x:scroll; + overflow-x:auto; } article.explorer table tr:first-child th:first-child {
nº№ Titre Année Dimension