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

Merge branch 'expo-info' into dev

Browse Source 
fixes #5
This commit is contained in:
Théo Marchal 2021-02-14 00:57:09 +01:00
commit b76734fe25
5 changed files with 53 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
explorer.html
View File

@ -38,7 +38,7 @@
<article class="explorer">
<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>
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>
@ -210,7 +210,7 @@
</tr>
</thead>
</table>
<p class="result" class="center"></p>
<p class="result center"></p>
</article>
</body>
</html>

2
exposition.html
View File

@ -37,7 +37,7 @@
<article class="exposition">
<h1>Exposition</h1>
<p class="center">Cliquez sur un tableau pour le voir en grand avec ses détails.</p>
<p class="center" style="margin-bottom:0;">Cliquez sur un tableau pour le voir en grand avec ses détails.</p>
<div class="gallery"></div>
</article>
</body>

9
scripts/explorer.js
View File

@ -457,16 +457,21 @@ jQuery(document).ready(function($)
$("table").append(result);
// gallery
paintingHtml = '<div class="gallery-item">';
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>'
}
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 += '<span class="item-title">' + i.title;
if (i.year != '—')
paintingHtml += ' (' + i.year + ')';
paintingHtml += '</span></div>';
$(".gallery").append(paintingHtml);
}
$(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " élément" + (numberOfItem > 1 ? "s" : "") + "</strong>.");

7
scripts/exposition.js
View File

@ -6,8 +6,13 @@ jQuery(document).ready(function($)
{
if (i.photo == "ok" || i.photo == "good")
{
paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
paintingHtml = '<div class="gallery-item">';
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 += '<span class="item-title">' + i.title;
if (i.year != '—')
paintingHtml += ' (' + i.year + ')';
paintingHtml += '</span></div>';
$(".gallery").append(paintingHtml);
}
}

40
styles/main.css
View File

@ -204,8 +204,12 @@ article.main p.signature {
/* Exposition */
article .gallery {
display:inline-block;
position:relative;
display:flex;
flex-direction:row;
justify-content:space-around;
align-self:flex-end;
flex-wrap:wrap;
margin:auto;
margin-top:0;
@ -215,6 +219,22 @@ article.exposition .gallery {
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 {
max-height:30vh;
max-width:40vw;
@ -362,7 +382,7 @@ article.explorer .gallery {
text-align:center;
}
article.explorer p {
article.explorer p.intro {
width:55vw;
margin:auto;
margin-bottom:2rem;
@ -590,6 +610,14 @@ article.explorer table .photo {
/* Divers */
article.divers .gallery {
justify-content:flex-start;
}
article.divers .gallery img {
margin:0.7rem;
}
article #stats {
margin-top:2.5rem;
margin-bottom:1.5rem;
@ -605,7 +633,13 @@ article #stats .stat {
margin-left:4vw;
}
@media only screen and (max-width:1000px) {
@media only screen and (max-width:600px) {
article.divers .gallery {
justify-content:center;
}
}
@media only screen and (max-width:1000px) {
article #stats {
display:block;
}