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

Compare commits

base: keb:67b984758774ec9bdd7d266313ede7e6bbac8e0f
Branches Tags
keb:dev keb:other-works
keb:v1
...
compare: keb:dev
Branches Tags
keb:dev keb:other-works
keb:v1

18 Commits
67b9847587 ... dev

Author SHA1 Message Date
Théo Marchal
e6761ec734 Update with press articles 2025-06-10 01:40:20 +02:00
Théo Marchal
fccbc08b31 Update photos submodule 2025-06-10 01:39:36 +02:00
Théo Marchal
5201c1d772 Update gitmodule url 2025-06-10 01:39:28 +02:00
Théo Marchal
abffc172ba Update repository URL 2024-07-14 15:16:32 +02:00
Théo Marchal
6480eee97c Fix bad characters 2022-08-10 00:37:50 +02:00
Théo Marchal
a2ec68d02e Update jquery version 2022-08-10 00:18:52 +02:00
Théo Marchal
9ca53a4176 Update Chart.js and change style for a more fitting one 2022-08-09 23:35:46 +02:00
Théo Marchal
302f51dcb3 Prevent metadata overflowing on painting page 2022-08-09 19:49:30 +02:00
Théo Marchal
002486725d Fix some styling issues, particularly on Divers 2022-08-09 19:24:43 +02:00
Théo Marchal
c7dcc688e7 Small mobile style improvements 2022-08-08 16:50:42 +02:00
Théo Marchal
16f6e0778a CSS harmonization 2022-08-08 15:16:04 +02:00
Théo Marchal
86bf57df0d Avoid painting metadata to be cut down 2022-08-08 15:15:07 +02:00
Théo Marchal
31ba8358d1 Header harmonization 2022-08-08 15:09:16 +02:00
Théo Marchal
c00d966fd7 Fix no fancybox configuration on reload 
fixes #18
 2022-08-08 12:28:33 +02:00
Théo Marchal
ff2e32d2d9 Mobile style fixes 2022-08-08 01:41:02 +02:00
Théo Marchal
56fd55d09d Selected view in Explorer is now visible 
fixes #6
 2022-08-04 22:26:51 +02:00
Théo Marchal
adbd09c060 Better sized favicon 2022-08-04 18:43:33 +02:00
Théo Marchal
aa3e4ffded Remove initial animation from charts 2022-08-04 18:38:18 +02:00
23 changed files with 349 additions and 207 deletions
Expand all files Collapse all files

2
.gitmodules vendored
View File

@ -1,3 +1,3 @@
[submodule "photos"] [submodule "photos"]
path = photos path = photos
url = https://git.n700.ovh/keb/ginou-photos.git url = https://git.marchal.dev/keb/ginou-photos.git

2
biographie.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script> <script src="plugins/jquery-3.6.0.min.js"></script>
<script src="scripts/menu.js"></script> <script src="scripts/menu.js"></script>
</head> </head>
<body> <body>

2
data.json
View File

File diff suppressed because one or more lines are too long

46
divers.html
View File

@ -8,12 +8,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="styles/fancybox.css" media="screen">
<script src="scripts/menu.js"></script> <link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet"> <script src="plugins/jquery-3.6.0.min.js"></script>
<script src="plugins/jquery.fancybox.min.js"></script> <script src="plugins/jquery.fancybox.min.js"></script>
<link href="plugins/chart.min.css" rel="stylesheet"> <script src="plugins/chart-3.9.1.min.js"></script>
<script src="plugins/chart.bundle.min.js"></script> <script src="scripts/menu.js"></script>
<script src="scripts/divers.js"></script> <script src="scripts/divers.js"></script>
<script src="scripts/stats.js"></script> <script src="scripts/stats.js"></script>
</head> </head>
@ -125,10 +125,34 @@
<h2>Presse</h2> <h2>Presse</h2>
<p>Ginou a eu plusieurs articles à son propos dans le journal local, cependant nous n'en possédons qu'un seul. N'hésitez pas <a href="informations.html">à nous contacter</a> si vous avez un en votre possession.</p> <p>Ginou est apparue régulièrement dans le journal local, preuve de son engagement dans la communauté.</p>
<div class="gallery"> <div class="gallery">
<a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse."> <a data-fancybox="divers" href="photos/divers/normal/presse-2003-11-12.jpg" data-caption="Un portrait dédié à Ginou dans l'Est Républicain du 12 novembre 2003.">
<img src="photos/divers/mini/ainesdugny.jpg" alt="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse."> <img src="photos/divers/mini/presse-2003-11-12.jpg" alt="Un portrait dédié à Ginou dans l'Est Républicain du 12 novembre 2003.">
</a>
<a data-fancybox="divers" href="photos/divers/normal/presse-2010-09-21.jpg" data-caption="Ginou en photo pour la 30ème édition du salon de peinture de Thierville-sur-Meuse (Est Républicain du 21 septembre 2010)">
<img src="photos/divers/mini/presse-2010-09-21.jpg" alt="Ginou en photo pour la 30ème édition du salon de peinture de Thierville-sur-Meuse (Est Républicain du 21 septembre 2010).">
</a>
<a data-fancybox="divers" href="photos/divers/normal/presse-2013-09-17.jpg" data-caption="Ginou en photo pour la 33ème édition du salon de peinture de Thierville-sur-Meuse (Est Républicain du 17 septembre 2013).">
<img src="photos/divers/mini/presse-2013-09-17.jpg" alt="Ginou en photo pour la 33ème édition du salon de peinture de Thierville-sur-Meuse (Est Républicain du 17 septembre 2013).">
</a>
<a data-fancybox="divers" href="photos/divers/normal/presse-2015-10-06.jpg" data-caption="Ginou en photo pour la 35ème édition du salon de peinture de Thierville-sur-Meuse (Est Républicain du 06 octobre 2015).">
<img src="photos/divers/mini/presse-2015-10-06.jpg" alt="Ginou en photo pour la 35ème édition du salon de peinture de Thierville-sur-Meuse (Est Républicain du 06 octobre 2015).">
</a>
<a data-fancybox="divers" href="photos/divers/normal/presse-2010.jpg" data-caption="Un article de 2010 sur la participation de l'association des anciens au profit du Téléthon.">
<img src="photos/divers/mini/presse-2010.jpg" alt="Un article de 2010 sur la participation de l'association des anciens au profit du Téléthon.">
</a>
<a data-fancybox="divers" href="photos/divers/normal/presse-2014.jpg" data-caption="Un article de 2014 sur la participation de l'association des anciens au profit du Téléthon.">
<img src="photos/divers/mini/presse-2014.jpg" alt="Un article de 2014 sur la participation de l'association des anciens au profit du Téléthon.">
</a>
<a data-fancybox="divers" href="photos/divers/normal/presse-2016.jpg" data-caption="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse de 2016.">
<img src="photos/divers/mini/presse-2016.jpg" alt="Ginou était engagée dans des &oelig;uvres caritatives, comme le montre cette coupure de presse de 2016.">
</a> </a>
</div> </div>
@ -161,13 +185,13 @@
<div id="stats"> <div id="stats">
<div class="stat"> <div class="stat">
<canvas id="month" width="400" height="200"></canvas> <canvas id="month"></canvas>
</div> </div>
<div class="stat"> <div class="stat">
<canvas id="year" width="400" height="200"></canvas> <canvas id="year"></canvas>
</div> </div>
<div class="stat"> <div class="stat">
<canvas id="dimension" width="400" height="200"></canvas> <canvas id="dimension"></canvas>
</div> </div>
</div> </div>
</article> </article>

14
explorer.html
View File

@ -8,15 +8,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script>
<script src="scripts/menu.js"></script>
<link rel="stylesheet" href="styles/fancybox.css" media="screen"> <link rel="stylesheet" href="styles/fancybox.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="styles/pagination.css" media="screen">
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet"> <link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
<link rel="stylesheet" href="plugins/pagination.css" media="screen">
<script src="plugins/jquery-3.6.0.min.js"></script>
<script src="plugins/jquery.fancybox.min.js"></script> <script src="plugins/jquery.fancybox.min.js"></script>
<script src="plugins/pagination.min.js"></script> <script src="plugins/pagination.min.js"></script>
<link rel="stylesheet" href="plugins/pagination.css" media="screen"> <script src="scripts/menu.js"></script>
<link rel="stylesheet" href="styles/pagination.css" media="screen"> <script src="scripts/fancybox.js"></script>
<script src="scripts/explorer.js"></script> <script src="scripts/explorer.js"></script>
</head> </head>
<body> <body>
@ -136,8 +136,8 @@
</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 list active" src="styles/icons/list.svg" alt="liste">
<img class="style-select frame" src="styles/icons/frame.svg" alt="galerie"> <img class="style-select frame" src="styles/icons/frame.svg" alt="galerie">
<img class="style-select list" src="styles/icons/list.svg" alt="liste">
</div> </div>
<div id="gallery"> <div id="gallery">
<div id="pagination"></div> <div id="pagination"></div>

9
exposition.html
View File

@ -10,12 +10,13 @@
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<link rel="stylesheet" href="styles/fancybox.css" media="screen"> <link rel="stylesheet" href="styles/fancybox.css" media="screen">
<link rel="stylesheet" href="styles/pagination.css" media="screen"> <link rel="stylesheet" href="styles/pagination.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="plugins/pagination.css" media="screen">
<script src="scripts/menu.js"></script> <link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet"> <script src="plugins/jquery-3.6.0.min.js"></script>
<script src="plugins/jquery.fancybox.min.js"></script> <script src="plugins/jquery.fancybox.min.js"></script>
<script src="plugins/pagination.min.js"></script> <script src="plugins/pagination.min.js"></script>
<link rel="stylesheet" href="plugins/pagination.css" media="screen"> <script src="scripts/menu.js"></script>
<script src="scripts/fancybox.js"></script>
<script src="scripts/exposition.js"></script> <script src="scripts/exposition.js"></script>
</head> </head>
<body> <body>

BIN
images/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 985 B

2
index.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script> <script src="plugins/jquery-3.6.0.min.js"></script>
<script src="scripts/menu.js"></script> <script src="scripts/menu.js"></script>
</head> </head>
<body> <body>

13
informations.html
View File

@ -8,9 +8,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script> <script src="plugins/jquery-3.6.0.min.js"></script>
<link href="plugins/chart.min.css" rel="stylesheet"> <script src="plugins/chart-3.9.1.min.js"></script>
<script src="plugins/chart.bundle.min.js"></script>
<script src="scripts/menu.js"></script> <script src="scripts/menu.js"></script>
<script src="scripts/informations.js"></script> <script src="scripts/informations.js"></script>
</head> </head>
@ -60,17 +59,17 @@
<h4>Explorer</h4> <h4>Explorer</h4>
<p>Cette rubrique quant à elle est interactive et permet de visualiser l'ensemble des créations de Ginou. En effet, elle regorge d'options pour pouvoir choisir précisément les tableaux à afficher. Par exemple, il est possible de créer un filtre pour voir tous les tableaux de chiens dont la photo est de bonne qualité réalisés un mois de février&#8239;: il suffit de sélectionner ces options et de cliquer sur le bouton <strong>Générer</strong>. Bien évidemment, il est possible qu'il n'existe pas de tableau réunissant ces critères, ce qui sera alors indiqué.<br> <p>Cette rubrique quant à elle est interactive et permet de visualiser l'ensemble des créations de Ginou. En effet, elle regorge d'options pour pouvoir choisir précisément les tableaux à afficher. Par exemple, il est possible de créer un filtre pour voir tous les tableaux de chiens dont la photo est de bonne qualité réalisés un mois de février&#8239;: il suffit de sélectionner ces options et de cliquer sur le bouton <strong>Générer</strong>. Bien évidemment, il est possible qu'il n'existe pas de tableau réunissant ces critères, ce qui sera alors indiqué.<br>
Le résultat affiché sera sous la forme d'une liste, mais il est également possible de l'afficher sous forme d'une galerie (comme dans la rubrique Exposition) en cliquant sur le bouton en haut à droite. Dans ce mode, les tableaux n’ayant pas de photo disponible montreront une icône indiquant que la photo est manquante.</p> Le résultat affiché sera sous la forme d'une liste, mais il est également possible de l'afficher sous forme d'une galerie (comme dans la rubrique Exposition) en cliquant sur le bouton en haut à droite. Dans ce mode, les tableaux n'ayant pas de photo disponible montreront une icône indiquant que la photo est manquante.</p>
<h4>Divers</h4> <h4>Divers</h4>
<p>Cette page regroupe diverses photos et informations en complément de la biographie&#8239;: une vue de son atelier, des photos d'expositions, des coupures de presse, ainsi que des statistiques intéressantes (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez un document, une photo, des coupures de presse, tout ce qui peut être en relation avec l’art de Ginou.</p> <p>Cette page regroupe diverses photos et informations en complément de la biographie&#8239;: une vue de son atelier, des photos d'expositions, des coupures de presse, ainsi que des statistiques intéressantes (on peut remarquer que le printemps l'inspirait&#8239;!). N'hésitez pas à nous contacter si vous avez un document, une photo, des coupures de presse, tout ce qui peut être en relation avec l'art de Ginou.</p>
<h2>Informations technique</h2> <h2>Informations technique</h2>
<p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que des plugins <a href="https://fancyapps.com/fancybox/3/">fancybox 3</a>, <a href="https://www.chartjs.org/">Chart.js</a> et <a href="https://pagination.js.org/">Pagination.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a> et <a href="https://github.com/kosbarts/Commissioner">Commissioner</a>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p> <p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que des plugins <a href="https://fancyapps.com/fancybox/3/">fancybox 3</a>, <a href="https://www.chartjs.org/">Chart.js</a> et <a href="https://pagination.js.org/">Pagination.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a> et <a href="https://github.com/kosbarts/Commissioner">Commissioner</a>. 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> <p>Le code source est librement disponible <em>via git</em> en <a href="https://git.marchal.dev/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>
<p>Site réalisé par <a href="https://theo.marchal.dev">Théo</a> et Denis Marchal avec la participation de toute la famille. Dernière mise à jour en août 2022.</p> <p>Site réalisé par <a href="https://theo.marchal.dev">Théo</a> et Denis Marchal avec la participation de toute la famille. Dernière mise à jour en juin 2025.</p>
</article> </article>
</body> </body>
</html> </html>

6
painting.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.png"> <link rel="shortcut icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/main.css" media="screen"> <link rel="stylesheet" href="styles/main.css" media="screen">
<script src="plugins/jquery-3.5.1.min.js"></script> <script src="plugins/jquery-3.6.0.min.js"></script>
<script src="scripts/menu.js"></script> <script src="scripts/menu.js"></script>
<script src="scripts/painting.js"></script> <script src="scripts/painting.js"></script>
</head> </head>
@ -51,8 +51,8 @@
<li><span class="title">genre&#8239;:</span><span class="content genre">&#8239;</span></li> <li><span class="title">genre&#8239;:</span><span class="content genre">&#8239;</span></li>
<li><span class="title">thème&#8239;:</span><span class="content theme">&#8239;</span></li> <li><span class="title">thème&#8239;:</span><span class="content theme">&#8239;</span></li>
<li><span class="title">lieu&#8239;:</span><span class="content place">&#8239;</span></li> <li><span class="title">lieu&#8239;:</span><span class="content place">&#8239;</span></li>
<li><span class="title">état&#8239;photo&#8239;:</span><span class="content photo">&#8239;</span></li> <li><span class="title">état photo&#8239;:</span><span class="content photo">&#8239;</span></li>
<li><span class="title">aide&#8239;requise&#8239;:</span><span class="content help">&#8239;</span></li> <li><span class="title">aide requise&#8239;:</span><span class="content help">&#8239;</span></li>
<li><span class="title">tags&#8239;:</span><span class="content tag">&#8239;</span></li> <li><span class="title">tags&#8239;:</span><span class="content tag">&#8239;</span></li>
<li><span class="title">commentaire&#8239;:</span><span class="content comment"> </span></li> <li><span class="title">commentaire&#8239;:</span><span class="content comment"> </span></li>
<li><span class="content original"><a href="photos/paintings/original/42.jpg">photo originale <img src="styles/icons/arrow.svg"></a></span></li> <li><span class="content original"><a href="photos/paintings/original/42.jpg">photo originale <img src="styles/icons/arrow.svg"></a></span></li>

2
photos

Submodule photos updated: 64e7a332b3...5e70e3e4a4

13
plugins/chart-3.9.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
plugins/chart.bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
plugins/chart.min.css vendored
View File

@ -1 +0,0 @@
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}

2
plugins/jquery-3.5.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
plugins/jquery-3.6.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
scripts/divers.js
View File

@ -5,8 +5,12 @@ jQuery(document).ready(function($)
infobar: false, infobar: false,
toolbar: true, toolbar: true,
smallBtn: false, smallBtn: false,
buttons : [ "close" ], buttons: ["arrowLeft", "arrowRight", "close"],
arrows: true, arrows: false,
transitionEffect: "fade", transitionEffect: "fade",
baseClass: 'fancybox-custom-layout',
mobile: {
preventCaptionOverlap: true,
},
}); });
}); });

21
scripts/explorer.js
View File

@ -42,6 +42,8 @@ jQuery(document).ready(function($)
/** MENU **/ /** MENU **/
/**********/ /**********/
fancyboxInit(data, true);
var availableOptions = []; var availableOptions = [];
var selectedOptions = []; var selectedOptions = [];
@ -527,6 +529,8 @@ jQuery(document).ready(function($)
{ {
$("table").hide(); $("table").hide();
$("#gallery").show(); $("#gallery").show();
$(".style-select.frame").addClass('active');
$(".style-select.list").removeClass('active');
window.localStorage.setItem('explorer-view', 'gallery'); window.localStorage.setItem('explorer-view', 'gallery');
} }
@ -534,6 +538,8 @@ jQuery(document).ready(function($)
{ {
$("#gallery").hide(); $("#gallery").hide();
$("table").show(); $("table").show();
$(".style-select.frame").removeClass('active');
$(".style-select.list").addClass('active');
window.localStorage.setItem('explorer-view', 'table'); window.localStorage.setItem('explorer-view', 'table');
} }
@ -545,17 +551,12 @@ jQuery(document).ready(function($)
{ {
if (res) if (res)
{ {
explorerView = window.localStorage.getItem('explorer-view'); explorerView = window.localStorage.getItem('explorer-view');
if (explorerView == "gallery") if (explorerView == "gallery")
setGallery(); setGallery();
else if (explorerView == "table") else if (explorerView == "table")
setTable(); setTable();
} }
} }
// fancybox configuration
$.getScript("scripts/fancybox.js", function() {
fancyboxInit(data, true);
});
}); });
}); });

4
scripts/explorer_menu.js
View File

@ -340,12 +340,16 @@ function userActionHandle(availableOptions)
{ {
$("table").hide(); $("table").hide();
$("#gallery").show(); $("#gallery").show();
$(".style-select.frame").addClass('active');
$(".style-select.list").removeClass('active');
window.localStorage.setItem('explorer-view', 'gallery'); window.localStorage.setItem('explorer-view', 'gallery');
}); });
$(".style-select.list").click(function() $(".style-select.list").click(function()
{ {
$("#gallery").hide(); $("#gallery").hide();
$("table").show(); $("table").show();
$(".style-select.frame").removeClass('active');
$(".style-select.list").addClass('active');
window.localStorage.setItem('explorer-view', 'table'); window.localStorage.setItem('explorer-view', 'table');
}); });
} }

10
scripts/exposition.js
View File

@ -2,6 +2,8 @@ jQuery(document).ready(function($)
{ {
$.getJSON("data.json", function(data) $.getJSON("data.json", function(data)
{ {
fancyboxInit(data, false);
window.pageSize = 14; window.pageSize = 14;
var paintingList = []; var paintingList = [];
@ -18,12 +20,12 @@ jQuery(document).ready(function($)
if (canDisplay) if (canDisplay)
{ {
paintingHtml += 'active"><a 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/" alt="Tableau ' + i.number + '"></a>'; paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>';
} }
else else
{ {
paintingHtml += 'inactive"><a 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/' + i.number + '.jpg" alt="Tableau ' + i.number + '"></a>';
} }
paintingHtml += '<span class="item-title">' + i.title; paintingHtml += '<span class="item-title">' + i.title;
if (i.year != '—') if (i.year != '—')
@ -46,11 +48,7 @@ jQuery(document).ready(function($)
if (targetPage > 0) if (targetPage > 0)
$("#pagination").pagination('go', targetPage); $("#pagination").pagination('go', targetPage);
});
// fancybox configuration
$.getScript("scripts/fancybox.js", function() {
fancyboxInit(data, false);
}); });
}); });
}); });

67
scripts/informations.js
View File

@ -50,8 +50,11 @@ jQuery(document).ready(function($)
gatherYear(tens, 2010, 2020); gatherYear(tens, 2010, 2020);
} }
var canvasDimension = document.getElementById("photo").getContext('2d'); Chart.defaults.font.family = "'Rubik', Helvetica";
var chartDimension = new Chart(canvasDimension, { Chart.defaults.color = "#000000";
var canvasPhoto = document.getElementById("photo").getContext('2d');
var chartPhoto = new Chart(canvasPhoto, {
type: 'bar', type: 'bar',
data: { data: {
labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"], labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
@ -83,36 +86,60 @@ jQuery(document).ready(function($)
}] }]
}, },
options: { options: {
tooltips: { plugins: {
mode: 'index', tooltip: {
intersect: false mode: 'index',
intersect: false,
titleFont: {
size: 14
},
bodyFont: {
size: 14
},
},
legend: {
display: false,
position: "bottom",
},
}, },
responsive: true, responsive: true,
scales: { scales: {
yAxes: [{ y: {
ticks: { ticks: {
font: {
size: 14
},
beginAtZero: true beginAtZero: true
}, gridLines: {
display: true
}, },
scaleLabel: { grid: {
lineWidth: 0
},
title: {
display: true, display: true,
labelString: 'Tableaux' text: 'Tableaux',
font: {
size: 16
}
}, },
stacked: true, stacked: true,
}], },
xAxes: [{ x: {
gridLines: { ticks: {
display: false font: {
size: 14
},
},
grid: {
lineWidth: 0
}, },
stacked: true, stacked: true,
}] },
}, },
legend: { animation: {
display: false, duration: 0
position: "bottom", },
} responsiveAnimationDuration: 0,
} },
}); });
}); });
}); });

264
scripts/stats.js
View File

@ -1,116 +1,172 @@
jQuery(document).ready(function($) jQuery(document).ready(function($)
{ {
var canvasMonth = document.getElementById("month").getContext('2d'); document.fonts.ready.then(function() {
var chartMonth = new Chart(canvasMonth, { Chart.defaults.font.family = "'Rubik', Helvetica";
type: 'bar', Chart.defaults.color = "#000000";
data: {
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
datasets: [{
label: 'nombre de tableaux',
data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}, gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Tableaux'
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
},
legend: {
display: false
}
}
});
var canvasYear = document.getElementById("year").getContext('2d'); var canvasMonth = document.getElementById("month").getContext('2d');
var chartYear = new Chart(canvasYear, { var chartMonth = new Chart(canvasMonth, {
type: 'bar', type: 'bar',
data: { data: {
labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"], labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
datasets: [{ datasets: [{
label: 'nombre de tableaux', label: 'nombre de tableaux',
data: [24, 16, 7, 57, 117, 112, 52], data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
backgroundColor: '#2589BD', backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}, gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Tableaux'
}
}],
xAxes: [{
gridLines: {
display: false
}
}] }]
}, },
legend: { options: {
display: false plugins: {
tooltip: {
mode: 'index',
intersect: false,
titleFont: {
size: 13
},
bodyFont: {
size: 13
},
},
legend: {
display: false,
position: "bottom",
},
},
scales: {
y: {
ticks: {
beginAtZero: true
},
grid: {
lineWidth: 0
},
title: {
display: true,
text: 'Tableaux'
}
},
xAxes: {
grid: {
lineWidth: 0
},
}
},
animation: {
duration: 0
},
responsiveAnimationDuration: 0
} }
} });
});
var canvasDimension = document.getElementById("dimension").getContext('2d'); var canvasYear = document.getElementById("year").getContext('2d');
var chartDimension = new Chart(canvasDimension, { var chartYear = new Chart(canvasYear, {
type: 'bar', type: 'bar',
data: { data: {
labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"], labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
datasets: [{ datasets: [{
label: 'nombre de tableaux', label: 'nombre de tableaux',
data: [2, 42, 173, 59, 107], data: [24, 16, 7, 57, 117, 112, 52],
backgroundColor: '#2589BD', backgroundColor: '#2589BD',
borderColor: '#187795',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}, gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Tableaux'
}
}],
xAxes: [{
gridLines: {
display: false
}
}] }]
}, },
legend: { options: {
display: false plugins: {
tooltip: {
mode: 'index',
intersect: false,
titleFont: {
size: 13
},
bodyFont: {
size: 13
},
},
legend: {
display: false,
position: "bottom",
},
},
scales: {
y: {
ticks: {
beginAtZero: true
},
grid: {
lineWidth: 0
},
title: {
display: true,
text: 'Tableaux'
}
},
x: {
grid: {
lineWidth: 0
},
}
},
animation: {
duration: 0
},
responsiveAnimationDuration: 0
} }
} });
var canvasDimension = document.getElementById("dimension").getContext('2d');
var chartDimension = new Chart(canvasDimension, {
type: 'bar',
data: {
labels: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
datasets: [{
label: 'nombre de tableaux',
data: [2, 42, 173, 59, 107],
backgroundColor: '#2589BD',
}]
},
options: {
plugins: {
tooltip: {
mode: 'index',
intersect: false,
titleFont: {
size: 13
},
bodyFont: {
size: 13
},
},
legend: {
display: false,
position: "bottom",
},
},
responsive: true,
scales: {
y: {
ticks: {
beginAtZero: true
},
grid: {
lineWidth: 0
},
title: {
display: true,
text: 'Tableaux'
},
stacked: true,
},
x: {
grid: {
lineWidth: 0
},
stacked: true,
}
},
animation: {
duration: 0
},
responsiveAnimationDuration: 0
}
});
}); });
}); });

59
styles/main.css
View File

@ -26,6 +26,10 @@ a {
color:#38686A; color:#38686A;
} }
a:hover {
color:#2589BD;
}
.gallery a, nav a { .gallery a, nav a {
text-decoration:none; text-decoration:none;
} }
@ -39,8 +43,8 @@ nav .hidden {
} }
.IE-header { .IE-header {
font-size: 1.5rem; font-size:1.5rem;
margin: 1rem; margin:1rem;
} }
header { header {
@ -130,11 +134,11 @@ header nav ul li a {
} }
header nav #hamburger { header nav #hamburger {
display: inline-block; display:inline-block;
right: 1rem; right:1rem;
font-size: 1.5rem; font-size:1.5rem;
position: absolute; position:absolute;
margin-top: 0.35rem; margin-top:0.35rem;
} }
header nav #hamburger .container { header nav #hamburger .container {
@ -254,8 +258,8 @@ article.main .bio-img {
} }
#pagination-sec { #pagination-sec {
margin-top: 1rem; margin-top:1rem;
margin-bottom: 1.5rem; margin-bottom:1.5rem;
} }
@ -276,7 +280,6 @@ article .gallery {
justify-content:space-around; justify-content:space-around;
align-self:flex-end; align-self:flex-end;
flex-wrap:wrap; flex-wrap:wrap;
margin:auto; margin:auto;
margin-top:0; margin-top:0;
} }
@ -338,7 +341,7 @@ article .gallery img {
@media only screen and (max-width:600px) { @media only screen and (max-width:600px) {
#info { #info {
min-width:280px; min-width:85vw;
} }
} }
@ -373,6 +376,10 @@ article .gallery img {
/* Painting */ /* Painting */
article.painting {
width:unset;
}
article.painting .container { article.painting .container {
display:flex; display:flex;
flex-direction:row; flex-direction:row;
@ -391,18 +398,19 @@ article.painting .container img {
} }
article.painting .container ul.metadata { article.painting .container ul.metadata {
width:15vw;
display:block; display:block;
margin:auto; margin:auto;
margin-left:0; margin-left:0;
position:absolute; position:absolute;
bottom:0; bottom:0;
list-style-type:square; list-style-type:square;
padding-left: 1.5rem;
list-style-position:outside;
} }
article.painting .container ul.metadata .metadata-help { article.painting .container ul.metadata .metadata-help {
font-weight:bold; font-weight:bold;
color: #38686A; color:#38686A;
} }
article.painting .container ul.metadata a { article.painting .container ul.metadata a {
@ -410,6 +418,12 @@ article.painting .container ul.metadata a {
color:unset; color:unset;
} }
article.painting .container ul li {
-webkit-column-break-inside:avoid;
page-break-inside:avoid;
break-inside:avoid;
}
article.painting .container .metadata span.title { article.painting .container .metadata span.title {
font-variant:small-caps; font-variant:small-caps;
} }
@ -445,9 +459,11 @@ article.painting .container .metadata span.content img {
article.painting .container ul.metadata { article.painting .container ul.metadata {
position:relative; position:relative;
columns:2; columns:2;
width:80vw; width:95vw;
margin:auto; margin:auto;
margin-top:1rem; margin-top:1rem;
list-style-position:inside;
padding:0;
} }
} }
@ -511,9 +527,15 @@ article.explorer img.style-select {
margin-bottom:0.25rem; margin-bottom:0.25rem;
margin-right:0.4rem; margin-right:0.4rem;
margin-left:0.4rem; margin-left:0.4rem;
padding-bottom:6px;
cursor:pointer; cursor:pointer;
} }
article.explorer img.style-select.active {
border-bottom:2px solid black;
padding-bottom:4px;
}
article.explorer h3 { article.explorer h3 {
margin-bottom:0.3rem; margin-bottom:0.3rem;
} }
@ -843,15 +865,16 @@ article.infos h4 + p {
} }
@media only screen and (max-width:1200px) { @media only screen and (max-width:1200px) {
article, article.main { article, article.main {
width:95vw; width:95vw;
text-align:justify;
} }
article .center { article .center {
text-align:left; text-align:justify;
} }
article.explorer .center {
text-align:center;
} }