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

Gallery view in "explorer"

Browse Source 
Also fixed some issues with cartel CSS
This commit is contained in:
Théo Marchal 2021-01-30 17:19:44 +01:00
parent 131bbe11e6
commit 18cdfa8c17
9 changed files with 134 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
data.json
View File

@ -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"
},
{

12
explorer.html
View File

@ -9,7 +9,10 @@
<link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen">
<script src="scripts/menu.js"></script>
<link rel="stylesheet" href="styles/fancybox.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script>
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
<script src="plugins/jquery.fancybox.min.js"></script>
<script src="scripts/explorer.js"></script>
</head>
<body>
@ -31,11 +34,15 @@
<article class="explorer">
<h1>Explorer</h1>
<p>Cette section du site permet de générer une liste (<strong>bientôt</strong> aussi visible sous le format d'une galerie) en fonction de différents paramètres, listés ci-dessous. Il permet d'explorer l'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.<br>
<p>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'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.<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>
<div class="style-container">
<h2 class="active">Configuration&nbsp;</h2>
<img class="style-select frame" src="styles/icons/frame.svg">
<img class="style-select list" src="styles/icons/list.svg">
</div>
<form action="">
<div class="container">
<div class="box years active">
@ -155,10 +162,11 @@
<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>
<div id="gallery"></div>
<table>
<thead>
<tr>
<th>nº</th>
<th>&#x2116;</th>
<th>Titre</th>
<th>Année</th>
<th>Dimension</th>

2
informations.html
View File

@ -41,7 +41,7 @@
<h3>Informations technique</h3>
<p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que du plugin <a href="https://fancyapps.com/fancybox/3/">FancyBox 3</a> et <a href="https://www.chartjs.org/">Chart.js</a>. Les polices de caractères utilisées sont <em>Rubik</em>, <em>Commissioner</em> et <em>Hot August Night</em>.</p>
<p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que du plugin <a href="https://fancyapps.com/fancybox/3/">FancyBox 3</a> et <a href="https://www.chartjs.org/">Chart.js</a>. Les polices de caractères utilisées sont <em>Rubik</em>, <em>Commissioner</em> et <em>Hot August Night</em>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p>
<p>Le code source est librement disponible <em>via git</em> en <a href="https://git.n700.ovh/keb/ginou">cliquant ici</a>. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.</p>

76
scripts/explorer.js
View File

@ -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 = "<tr>";
@ -343,17 +340,32 @@ jQuery(document).ready(function($)
result += "</tr>";
$("table").append(result);
// gallery
if (i.photo == "none")
{
paintingHtml = '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
paintingHtml += '<img src="images/unknown.jpg"></a>'
}
else
{
paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg"></a>'
}
$("#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 '\
<div id="info">\
<span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\
<span class="title">' + data[idx].title + '</span><span class="year">' + (data[idx].month != '—' ? data[idx].month + '&nbsp;' : '') + data[idx].year + '</span>\
<span class="format">' + data[idx].paint + ' sur ' + data[idx].support + ' (' + data[idx].dimension + ')</span>\
<span class="comment">' + data[idx].comment + '</span>\
</div>\
';
}
});
});
});

2
scripts/exposition.js
View File

@ -6,10 +6,8 @@ jQuery(document).ready(function($)
{
if (i.photo == "ok" || i.photo == "good")
{
console.log(i.number);
paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg"></a>';
console.log(paintingHtml);
$("#gallery").append(paintingHtml);
}
}

6
styles/fancybox.css
View File

@ -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;
@ -78,3 +76,7 @@
.fancybox-custom-layout .fancybox-caption #info a:hover {
color:#2589BD;
}
.fancybox-custom-layout.fancybox-container .fancybox-caption {
box-sizing:initial;
}

9
styles/icons/frame.svg Normal file
View File

@ -0,0 +1,9 @@
<svg id="emoji" xmlns="http://www.w3.org/2000/svg" viewBox="10 10 52 52">
<g id="line">
<rect x="12" y="12" width="48" height="48" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<rect x="18" y="18" width="36" height="36" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<circle cx="26" cy="30" r="4" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<rect x="18" y="18" width="36" height="36" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M22,43c0.5259-1.0198,0.7275-1.9672,3-3c2.6096-1.1859,3-2,6-4c4.746-3.164,6.792-9.0278,11-9c1.7205,0.0114,5,7,8,8"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 995 B

9
styles/icons/list.svg Normal file
View File

@ -0,0 +1,9 @@
<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto" viewBox="17.27 224.85 138.27 161.05">
<!--Unicode Character 'APL FUNCTIONAL SYMBOL QUAD EQUAL' (U+2338)-->
<defs id="genericDefs"/>
<g>
<g>
<path d="M155.5312 385.875 L17.2969 385.875 L17.2969 224.8594 L155.5312 224.8594 L155.5312 385.875 ZM141.75 372.0938 L141.75 238.6406 L31.0781 238.6406 L31.0781 372.0938 L141.75 372.0938 ZM130.2188 286.1719 L42.6094 286.1719 L42.6094 272.3906 L130.2188 272.3906 L130.2188 286.1719 ZM130.2188 338.625 L42.6094 338.625 L42.6094 324.8438 L130.2188 324.8438 L130.2188 338.625 Z" stroke="none"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

35
styles/main.css
View File

@ -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 {