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

Compare commits

base: keb/ginou:962b085d942b5ecc2fc8354207a111c244fdf405
Branches Tags
keb/ginou:dev keb/ginou:other-works
keb/ginou:v1
..
compare: keb/ginou:other-works
Branches Tags
keb/ginou:dev keb/ginou:other-works
keb/ginou:v1
7 Commits
962b085d94 .. other-works
Author SHA1 Message Date
keb 46729478a6 Update supplements following merge 2022-08-17 13:35:45 +02:00
keb 3400db36b9 Merge branch 'dev' into other-works 2022-08-17 13:34:44 +02:00
keb 6480eee97c Fix bad characters 2022-08-10 00:37:50 +02:00
keb a2ec68d02e Update jquery version 2022-08-10 00:18:52 +02:00
keb 9ca53a4176 Update Chart.js and change style for a more fitting one 2022-08-09 23:35:46 +02:00
keb 302f51dcb3 Prevent metadata overflowing on painting page 2022-08-09 19:49:30 +02:00
keb 002486725d Fix some styling issues, particularly on Divers 2022-08-09 19:24:43 +02:00
18 changed files with 247 additions and 163 deletions
Expand all files Collapse all files
biographie.html
+1 -1
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>
data.json
+1 -1
View File
File diff suppressed because one or more lines are too long
divers.html
+1 -1
View File
@@ -12,7 +12,7 @@
<link rel="stylesheet" href="styles/pagination.css" media="screen"> <link rel="stylesheet" href="styles/pagination.css" media="screen">
<link rel="stylesheet" href="plugins/pagination.css" media="screen"> <link rel="stylesheet" href="plugins/pagination.css" media="screen">
<link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen"> <link rel="stylesheet" href="plugins/jquery.fancybox.min.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="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>
<script src="scripts/menu.js"></script> <script src="scripts/menu.js"></script>
explorer.html
+1 -1
View File
@@ -12,7 +12,7 @@
<link rel="stylesheet" href="styles/pagination.css" media="screen"> <link rel="stylesheet" href="styles/pagination.css" media="screen">
<link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen"> <link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
<link rel="stylesheet" href="plugins/pagination.css" media="screen"> <link rel="stylesheet" href="plugins/pagination.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="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>
<script src="scripts/menu.js"></script> <script src="scripts/menu.js"></script>
index.html
+1 -1
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>
informations.html
+3 -4
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">
<link rel="stylesheet" href="plugins/chart.min.css" media="screen"> <script src="plugins/jquery-3.6.0.min.js"></script>
<script src="plugins/jquery-3.5.1.min.js"></script> <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>
@@ -64,7 +63,7 @@
<h4>Explorer</h4> <h4>Explorer</h4>
<p>Cette rubrique quant à elle est interactive et permet de visualiser l'ensemble des peintures 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 peintures 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 Peinture) 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>Suppléments</h4> <h4>Suppléments</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>
painting.html
+1 -1
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>
peinture.html
+1 -1
View File
@@ -12,7 +12,7 @@
<link rel="stylesheet" href="styles/pagination.css" media="screen"> <link rel="stylesheet" href="styles/pagination.css" media="screen">
<link rel="stylesheet" href="plugins/pagination.css" media="screen"> <link rel="stylesheet" href="plugins/pagination.css" media="screen">
<link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen"> <link rel="stylesheet" href="plugins/jquery.fancybox.min.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="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>
<script src="scripts/menu.js"></script> <script src="scripts/menu.js"></script>
plugins/chart-3.9.1.min.js
Vendored
+13
View File
File diff suppressed because one or more lines are too long
plugins/chart.bundle.min.js
Vendored
-7
View File
File diff suppressed because one or more lines are too long
plugins/chart.min.css
Vendored
-1
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}
plugins/jquery-3.5.1.min.js
Vendored
-2
View File
File diff suppressed because one or more lines are too long
plugins/jquery-3.6.0.min.js
Vendored
+2
View File
File diff suppressed because one or more lines are too long
scripts/divers.js
+6 -2
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,
},
}); });
}); });
scripts/informations.js
+42 -19
View File
@@ -50,6 +50,9 @@ jQuery(document).ready(function($)
gatherYear(tens, 2010, 2020); gatherYear(tens, 2010, 2020);
} }
Chart.defaults.font.family = "'Rubik', Helvetica";
Chart.defaults.color = "#000000";
var canvasPhoto = document.getElementById("photo").getContext('2d'); var canvasPhoto = document.getElementById("photo").getContext('2d');
var chartPhoto = new Chart(canvasPhoto, { var chartPhoto = new Chart(canvasPhoto, {
type: 'bar', type: 'bar',
@@ -83,40 +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: {
display: false,
position: "bottom",
}, },
animation: { animation: {
duration: 0 duration: 0
}, },
responsiveAnimationDuration: 0 responsiveAnimationDuration: 0,
} },
}); });
}); });
}); });
scripts/stats.js
+161 -117
View File
@@ -1,128 +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
},
animation: {
duration: 0
},
responsiveAnimationDuration: 0
}
});
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: {
animation: { mode: 'index',
duration: 0 intersect: false,
}, titleFont: {
responsiveAnimationDuration: 0 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',
}]
}, },
animation: { options: {
duration: 0 plugins: {
}, tooltip: {
responsiveAnimationDuration: 0 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
}
});
}); });
}); });
styles/main.css
+10 -1
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;
} }
@@ -373,6 +377,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,13 +399,14 @@ 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 {
supplements.html
+3 -3
View File
@@ -162,13 +162,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>