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

IE compatibility message and W3C standardization

Browse Source
This commit is contained in:
Théo Marchal 2021-02-12 20:53:40 +01:00
parent e9dcc57fd4
commit 0b096aad6e
9 changed files with 80 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
biographie.html
View File

@ -45,7 +45,7 @@
<p>Curiosité de la vie, Ginou était en train de compléter la dernière page de son petit carnet lorsque qu'elle s'est éteinte le 02 avril 2017, laissant le numéro 383 inachevé.</p> <p>Curiosité de la vie, Ginou était en train de compléter la dernière page de son petit carnet lorsque qu'elle s'est éteinte le 02 avril 2017, laissant le numéro 383 inachevé.</p>
<p><img src="images/genevievedugny.jpg"></p> <p><img src="images/genevievedugny.jpg" alt="Geneviève Marchal, Dugny"></p>
</article> </article>
</body> </body>
</html> </html>

42
divers.html
View File

@ -42,21 +42,21 @@
<p>Voici quelques photos du dernier atelier que Ginou utilisait, chez elle, entre 2011 et 2017.</p> <p>Voici quelques photos du dernier atelier que Ginou utilisait, chez elle, entre 2011 et 2017.</p>
<div id="gallery"> <div class="gallery">
<a data-fancybox="divers" href="photos/divers/normal/atelier.jpg" data-caption="L'atelier dans lequel Ginou peignait (vers 2012)."> <a data-fancybox="divers" href="photos/divers/normal/atelier.jpg" data-caption="L'atelier dans lequel Ginou peignait (vers 2012).">
<img src="photos/divers/mini/atelier.jpg"> <img src="photos/divers/mini/atelier.jpg" alt="L'atelier dans lequel Ginou peignait (vers 2012).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/atelier2.jpg" data-caption="L'atelier dans lequel Ginou peignait (2015)."> <a data-fancybox="divers" href="photos/divers/normal/atelier2.jpg" data-caption="L'atelier dans lequel Ginou peignait (2015).">
<img src="photos/divers/mini/atelier2.jpg"> <img src="photos/divers/mini/atelier2.jpg" alt="L'atelier dans lequel Ginou peignait (2015).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/palette.jpg" data-caption="La palette utilisée (vers 2012)."> <a data-fancybox="divers" href="photos/divers/normal/palette.jpg" data-caption="La palette utilisée (vers 2012).">
<img src="photos/divers/mini/palette.jpg"> <img src="photos/divers/mini/palette.jpg" alt="La palette utilisée (vers 2012).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/palettezoom.jpg" data-caption="Zoom sur la palette utilisée (vers 2012)."> <a data-fancybox="divers" href="photos/divers/normal/palettezoom.jpg" data-caption="Zoom sur la palette utilisée (vers 2012).">
<img src="photos/divers/mini/palettezoom.jpg"> <img src="photos/divers/mini/palettezoom.jpg" alt="Zoom sur la palette utilisée (vers 2012).">
</a> </a>
</div> </div>
@ -65,54 +65,54 @@
<p>Ginou a participé à de nombreuses foires et expositions en Lorraine, principalement dans la Meuse : à Bar-le-Duc, Étain, Verdun et ses alentours, ou encore à Vigneulles.<br> <p>Ginou a participé à de nombreuses foires et expositions en Lorraine, principalement dans la Meuse : à Bar-le-Duc, Étain, Verdun et ses alentours, ou encore à Vigneulles.<br>
Voici une sélection de quelques photos issues de ces événements.</p> Voici une sélection de quelques photos issues de ces événements.</p>
<div id="gallery"> <div class="gallery">
<a data-fancybox="divers" href="photos/divers/normal/expodugny.jpg" data-caption="Exposition à Dugny-sur-Meuse (1996)."> <a data-fancybox="divers" href="photos/divers/normal/expodugny.jpg" data-caption="Exposition à Dugny-sur-Meuse (1996).">
<img src="photos/divers/mini/expodugny.jpg"> <img src="photos/divers/mini/expodugny.jpg" alt="Exposition à Dugny-sur-Meuse (1996).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/exposaintjean.jpg" data-caption="À la fête du collège Saint-Jean de Verdun (2005)."> <a data-fancybox="divers" href="photos/divers/normal/exposaintjean.jpg" data-caption="À la fête du collège Saint-Jean de Verdun (2005).">
<img src="photos/divers/mini/exposaintjean.jpg"> <img src="photos/divers/mini/exposaintjean.jpg" alt="À la fête du collège Saint-Jean de Verdun (2005).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="À la foire aux puces de Dugny-sur-Meuse (2004)."> <a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="À la foire aux puces de Dugny-sur-Meuse (2004).">
<img src="photos/divers/mini/foiredugny.jpg"> <img src="photos/divers/mini/foiredugny.jpg" alt="À la foire aux puces de Dugny-sur-Meuse (2004).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/foirethierville.jpg" data-caption="À la foire de Thierville-sur-Meuse (2002)."> <a data-fancybox="divers" href="photos/divers/normal/foirethierville.jpg" data-caption="À la foire de Thierville-sur-Meuse (2002).">
<img src="photos/divers/mini/foirethierville.jpg"> <img src="photos/divers/mini/foirethierville.jpg" alt="À la foire de Thierville-sur-Meuse (2002).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="La dernière exposition où les tableaux de Ginou ont été présentés (2017)."> <a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="La dernière exposition où les tableaux de Ginou ont été présentés (2017).">
<img src="photos/divers/mini/derniereexpo.jpg"> <img src="photos/divers/mini/derniereexpo.jpg" alt="La dernière exposition où les tableaux de Ginou ont été présentés (2017).">
</a> </a>
</div> </div>
<h2>Presse</h2> <h2>Presse</h2>
<p>Ginou a eu plusieurs articles à son propos dans le journal local, cependant nous n'en avons qu'un seul. N'hésitez pas <a href="informations.html">à nous contacter</a> si vous avez un en votre possession.</p> <p>Ginou a eu plusieurs articles à son propos dans le journal local, cependant nous n'en avons qu'un seul. N'hésitez pas <a href="informations.html">à nous contacter</a> si vous avez un en votre possession.</p>
<div id="gallery"> <div class="gallery">
<a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="todo"> <a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="todo">
<img src="photos/divers/mini/ainesdugny.jpg"> <img src="photos/divers/mini/ainesdugny.jpg" alt="todo">
</a> </a>
</div> </div>
<h2>Divers</h2> <h2>Divers</h2>
<div id="gallery"> <div class="gallery">
<a data-fancybox="divers" href="photos/divers/normal/ginouchloe.jpg" data-caption="Ginou posant à côté d'un de ses tableaux (vers 2011)."> <a data-fancybox="divers" href="photos/divers/normal/ginouchloe.jpg" data-caption="Ginou posant à côté d'un de ses tableaux (vers 2011).">
<img src="photos/divers/mini/ginouchloe.jpg"> <img src="photos/divers/mini/ginouchloe.jpg" alt="Ginou posant à côté d'un de ses tableaux (vers 2011).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/ginou.jpg" data-caption="Ginou en voyage en Argentine (2012)."> <a data-fancybox="divers" href="photos/divers/normal/ginou.jpg" data-caption="Ginou en voyage en Argentine (2012).">
<img src="photos/divers/mini/ginou.jpg"> <img src="photos/divers/mini/ginou.jpg" alt="Ginou en voyage en Argentine (2012).">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/carnet.png" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux."> <a data-fancybox="divers" href="photos/divers/normal/carnet.png" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
<img src="photos/divers/mini/carnet.jpg"> <img src="photos/divers/mini/carnet.jpg" alt="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
</a> </a>
<a data-fancybox="divers" href="photos/divers/normal/carnetouvert.jpg" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux."> <a data-fancybox="divers" href="photos/divers/normal/carnetouvert.jpg" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
<img src="photos/divers/mini/carnetouvert.jpg"> <img src="photos/divers/mini/carnetouvert.jpg" alt="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
</a> </a>
</div> </div>
@ -124,13 +124,13 @@
</p> </p>
<div id="stats"> <div id="stats">
<div id="stat"> <div class="stat">
<canvas id="month" width="400" height="200"></canvas> <canvas id="month" width="400" height="200"></canvas>
</div> </div>
<div id="stat"> <div class="stat">
<canvas id="year" width="400" height="200"></canvas> <canvas id="year" width="400" height="200"></canvas>
</div> </div>
<div id="stat"> <div class="stat">
<canvas id="dimension" width="400" height="200"></canvas> <canvas id="dimension" width="400" height="200"></canvas>
</div> </div>
</div> </div>

22
explorer.html
View File

@ -35,14 +35,14 @@
<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"> liste (aussi visible sous le format d'une <img width="16.5rem" src="styles/icons/frame.svg"> 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 <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"> liste, l'icône <img width="16.5rem" src="styles/icons/eye-black.svg"> &oelig;il permet de voir le tableau en grand ; en mode <img width="16.5rem" src="styles/icons/frame.svg"> 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"> 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>
Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la <img width="12rem" src="styles/icons/triangle.svg"> flèche pour la faire réapparaître.</p> Une fois cette liste générée, la configuration sera repliée, il suffit alors de cliquer sur la <img width="12rem" src="styles/icons/triangle.svg" alt="flèche"> flèche pour la faire réapparaître.</p>
<h2 class="active">Configuration&nbsp;</h2> <h2 class="active">Configuration&nbsp;</h2>
<form name="explorer" action="" onsubmit="onSubmit();"> <form name="explorer" onsubmit="onSubmit();">
<div class="container"> <div class="container">
<div class="box photos active"> <div class="box photos active">
<h3>État photo&nbsp;</h3> <h3>État photo&nbsp;</h3>
@ -149,7 +149,7 @@
<span><input type="checkbox" id="dimensions" name="dimensions" value="all"> <span><input type="checkbox" id="dimensions" name="dimensions" value="all">
<label for="dimensions">Toutes</label></span> <label for="dimensions">Toutes</label></span>
<span><input type="checkbox" id="18" name="dimension" value="18"> <span><input type="checkbox" id="18" name="dimension" value="18">
<label for="18">< 20cm</label></span> <label for="18">&lt; 20cm</label></span>
<span><input type="checkbox" id="20" name="dimension" value="20"> <span><input type="checkbox" id="20" name="dimension" value="20">
<label for="20">20cm - 29cm</label></span> <label for="20">20cm - 29cm</label></span>
<span><input type="checkbox" id="30" name="dimension" value="30"> <span><input type="checkbox" id="30" name="dimension" value="30">
@ -178,7 +178,7 @@
<span><input type="checkbox" id="no" name="help" value="no"> <span><input type="checkbox" id="no" name="help" value="no">
<label for="no">Non</label></span> <label for="no">Non</label></span>
<span><input type="checkbox" id="yes" name="help" value="yes"> <span><input type="checkbox" id="yes" name="help" value="yes">
<label for="yes"><img width="5rem" src="styles/icons/exclamation-mark.svg"> Oui</label></span> <label for="yes"><img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"> Oui</label></span>
</div> </div>
</div> </div>
</div> </div>
@ -186,10 +186,10 @@
</form> </form>
<p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p> <p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
<div id="style-container"> <div id="style-container">
<img class="style-select frame" src="styles/icons/frame.svg"> <img class="style-select frame" src="styles/icons/frame.svg" alt="galerie">
<img class="style-select list" src="styles/icons/list.svg"> <img class="style-select list" src="styles/icons/list.svg" alt="liste">
</div> </div>
<div id="gallery"></div> <div class="gallery"></div>
<table> <table>
<thead> <thead>
<tr> <tr>
@ -207,7 +207,7 @@
</tr> </tr>
</thead> </thead>
</table> </table>
<p class="result" style="text-align:center;"></p> <p class="result" class="center"></p>
</article> </article>
</body> </body>
</html> </html>

2
exposition.html
View File

@ -36,7 +36,7 @@
<article class="exposition"> <article class="exposition">
<h1>Exposition</h1> <h1>Exposition</h1>
<p class="center">Cliquez sur un tableau pour le voir en grand avec ses détails.</p> <p class="center">Cliquez sur un tableau pour le voir en grand avec ses détails.</p>
<div id="gallery"></div> <div class="gallery"></div>
</article> </article>
</body> </body>
</html> </html>

16
scripts/explorer.js
View File

@ -442,11 +442,11 @@ jQuery(document).ready(function($)
result += '<td class="photo">&#x2606;</td>'; result += '<td class="photo">&#x2606;</td>';
if (i.help == "yes") if (i.help == "yes")
result += '<td class="help"><img width="5rem" src="styles/icons/exclamation-mark.svg"></td>' result += '<td class="help"><img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"></td>'
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"></a></td>'; result += '<td><a href="painting.html?number=' + i.number + '"><img src="styles/icons/eye.svg" alt="Voir"></a></td>';
result += "</tr>"; result += "</tr>";
$("table").append(result); $("table").append(result);
@ -455,20 +455,20 @@ jQuery(document).ready(function($)
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"></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"></a>' paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>'
} }
$("#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>.");
return hasResult; return hasResult;
} }
$("#gallery").hide(); $(".gallery").hide();
$(".style-select").hide(); $(".style-select").hide();
generateMenu(); generateMenu();
@ -503,11 +503,11 @@ jQuery(document).ready(function($)
$(".style-select.frame").click(function() $(".style-select.frame").click(function()
{ {
$("table").hide(); $("table").hide();
$("#gallery").show(); $(".gallery").show();
}) })
$(".style-select.list").click(function() $(".style-select.list").click(function()
{ {
$("#gallery").hide(); $(".gallery").hide();
$("table").show(); $("table").show();
}) })

4
scripts/exposition.js
View File

@ -7,8 +7,8 @@ jQuery(document).ready(function($)
if (i.photo == "ok" || i.photo == "good") 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 = '<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>'; paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>';
$("#gallery").append(paintingHtml); $(".gallery").append(paintingHtml);
} }
} }

19
scripts/menu.js
View File

@ -6,3 +6,22 @@ function mobilemenu()
else else
navmenu[0].classList.add("active"); navmenu[0].classList.add("active");
} }
document.addEventListener("DOMContentLoaded", function(event)
{
function isIE()
{
user_agent = navigator.userAgent;
return (user_agent.indexOf("MSIE ") > -1 || user_agent.indexOf("Trident/") > -1);
}
if (isIE())
{
var IEheader = document.createElement("div");
IEheader.className = "IE-header"
var textnode = document.createTextNode("Votre navigateur est obsolète. Veuillez utiliser Edge (inclus avec Microsoft Windows), Safari (inclus avec macOS), Firefox ou Chrome.");
IEheader.appendChild(textnode);
document.getElementsByTagName("header")[0].insertBefore(IEheader, document.getElementsByTagName("nav")[0]);
};
});

1
scripts/painting.js
View File

@ -31,6 +31,7 @@ jQuery(document).ready(function($)
$(".photo img").attr("src", "photos/paintings/normal/" + data[i].number + ".jpg"); $(".photo img").attr("src", "photos/paintings/normal/" + data[i].number + ".jpg");
else else
$(".photo img").attr("src", "images/unknown.jpg"); $(".photo img").attr("src", "images/unknown.jpg");
$(".photo img").attr("alt", "Tableau " + data[i].number);
// metadata // metadata
$(".metadata .content.number").append(GetNumber()); $(".metadata .content.number").append(GetNumber());

23
styles/main.css
View File

@ -30,6 +30,11 @@ a {
text-align:center; text-align:center;
} }
.IE-header {
font-size: 1.5rem;
margin: 1rem;
}
header { header {
border-top:.2rem solid #187795; border-top:.2rem solid #187795;
box-shadow:0 .4rem .4rem 0 rgba(0,0,0,.04); box-shadow:0 .4rem .4rem 0 rgba(0,0,0,.04);
@ -196,7 +201,7 @@ article.main p.signature {
/* Exposition */ /* Exposition */
article #gallery { article .gallery {
display:inline-block; display:inline-block;
position:relative; position:relative;
@ -204,23 +209,23 @@ article #gallery {
margin-top:0; margin-top:0;
} }
article.exposition #gallery { article.exposition .gallery {
text-align:center; text-align:center;
} }
article #gallery img { article .gallery img {
max-height:30vh; max-height:30vh;
max-width:40vw; max-width:40vw;
margin:0.5rem; margin:0.5rem;
} }
@media only screen and (max-width:1000px) { @media only screen and (max-width:1000px) {
article #gallery img { article .gallery img {
max-height:85vh; max-height:85vh;
max-width:85vw; max-width:85vw;
} }
article #gallery { article .gallery {
display:grid; display:grid;
text-align:center; text-align:center;
} }
@ -351,7 +356,7 @@ article.painting .container .metadata span.content img {
/* Explorer */ /* Explorer */
article.explorer #gallery { article.explorer .gallery {
text-align:center; text-align:center;
} }
@ -592,7 +597,7 @@ article #stats {
justify-content:center; justify-content:center;
} }
article #stats #stat { article #stats .stat {
width:28vw; width:28vw;
margin-right:4vw; margin-right:4vw;
margin-left:4vw; margin-left:4vw;
@ -603,7 +608,7 @@ article #stats #stat {
display:block; display:block;
} }
article #stats #stat { article #stats .stat {
width:85vw; width:85vw;
text-align:center; text-align:center;
margin:auto; margin:auto;
@ -616,7 +621,7 @@ article #stats #stat {
display:block; display:block;
} }
article #stats #stat { article #stats .stat {
width:55vw; width:55vw;
text-align:center; text-align:center;
margin:auto; margin:auto;