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

Merge branch 'dev' into pagination

Browse Source
This commit is contained in:
Théo Marchal 2021-02-14 01:33:02 +01:00
commit 649be52829
4 changed files with 80 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
explorer.html
View File

@ -38,7 +38,7 @@
<article class="explorer"> <article class="explorer">
<h1>Explorer</h1> <h1>Explorer</h1>
<p>Cette section du site permet de générer une <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste (aussi visible sous le format d'une <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> 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 class="intro">Cette section du site permet de générer une <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste (aussi visible sous le format d'une <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> 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>
En mode <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste, l'icône <img width="16.5rem" src="styles/icons/eye-black.svg" alt="&oelig;il"> &oelig;il permet de voir le tableau en grand ; en mode <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> galerie, il faut cliquer sur les tableaux.<br> En mode <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste, l'icône <img width="16.5rem" src="styles/icons/eye-black.svg" alt="&oelig;il"> &oelig;il permet de voir le tableau en grand ; en mode <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> galerie, il faut cliquer sur les tableaux.<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> 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 <img width="5rem" src="styles/icons/exclamation-mark.svg" alt="double point d'exclamation"> 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>.<br> Le symbole <img width="5rem" src="styles/icons/exclamation-mark.svg" alt="double point d'exclamation"> 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>.<br>
@ -53,15 +53,15 @@
<span><input type="checkbox" id="photos" name="photos" value="all"> <span><input type="checkbox" id="photos" name="photos" value="all">
<label for="photos">Tout état</label></span> <label for="photos">Tout état</label></span>
<span><input type="checkbox" id="none" name="photo" value="none"> <span><input type="checkbox" id="none" name="photo" value="none">
<label for="none">&#x2606; aucune</label></span> <label for="none">&#x2606; inexistant</label></span>
<span><input type="checkbox" id="exist" name="photo" value="exist"> <span><input type="checkbox" id="exist" name="photo" value="exist">
<label for="exist">Existante</label></span> <label for="exist">Existant</label></span>
<span><input type="checkbox" id="bad" name="photo" value="bad"> <span><input type="checkbox" id="bad" name="photo" value="bad">
<label for="bad">&#x2605; mauvaise</label></span> <label for="bad">&#x2605; mauvais</label></span>
<span><input type="checkbox" id="ok" name="photo" value="ok"> <span><input type="checkbox" id="ok" name="photo" value="ok">
<label for="ok">&#x2605;&#x2605; acceptable</label></span> <label for="ok">&#x2605;&#x2605; acceptable</label></span>
<span><input type="checkbox" id="good" name="photo" value="good"> <span><input type="checkbox" id="good" name="photo" value="good">
<label for="good">&#x2605;&#x2605;&#x2605; bonne</label></span> <label for="good">&#x2605;&#x2605;&#x2605; bon</label></span>
</div> </div>
</div> </div>
<div class="box years"> <div class="box years">
@ -210,7 +210,7 @@
</tr> </tr>
</thead> </thead>
</table> </table>
<p class="result" class="center"></p> <p class="result center"></p>
</article> </article>
</body> </body>
</html> </html>

26
scripts/explorer.js
View File

@ -363,13 +363,13 @@ jQuery(document).ready(function($)
return true; return true;
splitTag = tag.split(", "); splitTag = tag.split(", ");
for (t of splitTag) for (t of paramTag)
{ {
if (paramTag.includes(t)) if (!splitTag.includes(t))
return true;
}
return false; return false;
} }
return true;
}
function checkPhoto(photo) function checkPhoto(photo)
{ {
@ -446,22 +446,32 @@ jQuery(document).ready(function($)
else else
result += '<td>&nbsp;</td>' result += '<td>&nbsp;</td>'
result += '<td><a href="painting.html?number=' + i.number + '"><img src="styles/icons/eye.svg" alt="Voir"></a></td>'; result += '<td><a data-fancybox="exposition-list" href="';
if (i.photo == "none")
result += 'images/unknown.jpg';
else
result += 'photos/paintings/normal/' + i.number + '.jpg'
result += '" data-fancybox-index="' + i.number + '"><img src="styles/icons/eye.svg"></a></td>';
result += "</tr>"; result += "</tr>";
$("table").append(result); $("table").append(result);
// gallery // gallery
paintingHtml = '<div class="gallery-item">';
if (i.photo == "none") if (i.photo == "none")
{ {
paintingHtml = '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">' paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
paintingHtml += '<img src="images/unknown.jpg" alt="Tableau ' + i.number + '"></a>' paintingHtml += '<img src="images/unknown.jpg" alt="Tableau ' + i.number + '"></a>'
} }
else else
{ {
paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + 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" alt="Tableau ' + i.number + '"></a>' paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>'
} }
paintingHtml += '<span class="item-title">' + i.title;
if (i.year != '—')
paintingHtml += ' (' + i.year + ')';
paintingHtml += '</span></div>';
$(".gallery").append(paintingHtml); $(".gallery").append(paintingHtml);
} }
$(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " élément" + (numberOfItem > 1 ? "s" : "") + "</strong>."); $(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " élément" + (numberOfItem > 1 ? "s" : "") + "</strong>.");
@ -513,7 +523,7 @@ jQuery(document).ready(function($)
// fancybox configuration // fancybox configuration
$('[data-fancybox="exposition"]').fancybox( $('[data-fancybox="exposition"], [data-fancybox="exposition-list"]').fancybox(
{ {
infobar: false, infobar: false,
toolbar: true, toolbar: true,

13
scripts/exposition.js
View File

@ -13,16 +13,21 @@ jQuery(document).ready(function($)
if (paintingList.length % (14 + 1) == 0) if (paintingList.length % (14 + 1) == 0)
canDisplay = false; canDisplay = false;
paintingHtml = '<div class="gallery-item ';
if (canDisplay) if (canDisplay)
{ {
paintingHtml = '<a class="active" data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">' paintingHtml += 'active"><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" alt="Tableau ' + i.number + '"></a>'; paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>';
} }
else else
{ {
paintingHtml = '<a class="inactive" data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">' paintingHtml += 'inactive"><a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>'; paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>';
} }
paintingHtml += '<span class="item-title">' + i.title;
if (i.year != '—')
paintingHtml += ' (' + i.year + ')';
paintingHtml += '</span></div>';
$(".gallery").append(paintingHtml); $(".gallery").append(paintingHtml);
} }
} }
@ -47,14 +52,14 @@ jQuery(document).ready(function($)
if (previousArray.length > 0) if (previousArray.length > 0)
{ {
for (i of previousArray) for (i of previousArray)
$('[data-fancybox-index="'+i+'"]').removeClass("active").addClass("inactive"); $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
} }
previousArray = response; previousArray = response;
$.each(response, function(index, item) $.each(response, function(index, item)
{ {
$('[data-fancybox-index="'+item+'"]').removeClass("inactive").addClass("active"); $('[data-fancybox-index="'+item+'"]').parent().removeClass("inactive").addClass("active");
$('[data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg"); $('[data-fancybox-index="'+item+'"] img').attr("src", "photos/paintings/mini/"+item+".jpg");
}); });
} }

52
styles/main.css
View File

@ -209,17 +209,21 @@ article #pagination {
margin:auto; margin:auto;
} }
article .gallery a.active { article .gallery .gallery-item.active {
display:initial; display:initial;
} }
article .gallery a.inactive { article .gallery .gallery-item.inactive {
display:none; display:none;
} }
article .gallery { article .gallery {
display:inline-block;
position:relative; position:relative;
display:flex;
flex-direction:row;
justify-content:space-around;
align-self:flex-end;
flex-wrap:wrap;
margin:auto; margin:auto;
margin-top:0; margin-top:0;
@ -229,6 +233,22 @@ article.exposition .gallery {
text-align:center; text-align:center;
} }
article .gallery .gallery-item {
display:inline-block;
position:relative;
margin:0.75rem;
margin-top:0.75rem;
margin-top:1.6rem;
}
article .gallery .item-title {
font-size:0.9rem;
margin:0rem;
padding:0rem;
padding-top:0rem;
display:block;
}
article .gallery img { article .gallery img {
max-height:30vh; max-height:30vh;
max-width:40vw; max-width:40vw;
@ -376,15 +396,21 @@ article.explorer .gallery {
text-align:center; text-align:center;
} }
article.explorer p { article.explorer p.intro {
width:55vw; width:75vw;
margin:auto; margin:auto;
margin-bottom:2rem; margin-bottom:2rem;
text-align:justify; text-align:justify;
} }
@media only screen and (max-width:1200px) { @media only screen and (max-width:1200px) {
article.explorer p { article.explorer p.intro {
width:90vw;
}
}
@media only screen and (max-width:1640px) {
article.explorer {
width:90vw; width:90vw;
} }
} }
@ -604,6 +630,14 @@ article.explorer table .photo {
/* Divers */ /* Divers */
article.divers .gallery {
justify-content:flex-start;
}
article.divers .gallery img {
margin:0.7rem;
}
article #stats { article #stats {
margin-top:2.5rem; margin-top:2.5rem;
margin-bottom:1.5rem; margin-bottom:1.5rem;
@ -619,6 +653,12 @@ article #stats .stat {
margin-left:4vw; margin-left:4vw;
} }
@media only screen and (max-width:600px) {
article.divers .gallery {
justify-content:center;
}
}
@media only screen and (max-width:1000px) { @media only screen and (max-width:1000px) {
article #stats { article #stats {
display:block; display:block;