First batch of data, and modification to take them into account

Also optimized fonts, after discovering (when having all photos in one page) they were too heavy.
This commit is contained in:
Théo Marchal 2021-02-10 18:39:46 +01:00
parent ad13b8b127
commit 7d945f2bf4
16 changed files with 158 additions and 742 deletions

649
data.json

File diff suppressed because one or more lines are too long

View File

@ -128,10 +128,10 @@
<canvas id="month" width="400" height="200"></canvas> <canvas id="month" width="400" height="200"></canvas>
</div> </div>
<div id="stat"> <div id="stat">
<canvas id="month2" width="400" height="200"></canvas> <canvas id="year" width="400" height="200"></canvas>
</div> </div>
<div id="stat"> <div id="stat">
<canvas id="month3" width="400" height="200"></canvas> <canvas id="dimension" width="400" height="200"></canvas>
</div> </div>
</div> </div>
</article> </article>

View File

@ -52,19 +52,19 @@
<span><input type="checkbox" id="years" name="years" value="all"> <span><input type="checkbox" id="years" name="years" value="all">
<label for="years">Toutes</label></span> <label for="years">Toutes</label></span>
<span><input type="checkbox" id="50s" name="year" value="50s"> <span><input type="checkbox" id="50s" name="year" value="50s">
<label for="50s">1956-1959</label></span> <label for="50s">1956 - 1959</label></span>
<span><input type="checkbox" id="60s" name="year" value="60s"> <span><input type="checkbox" id="60s" name="year" value="60s">
<label for="60s">1960-1969</label></span> <label for="60s">1960 - 1969</label></span>
<span><input type="checkbox" id="70s" name="year" value="70s"> <span><input type="checkbox" id="70s" name="year" value="70s">
<label for="70s">1970-1979</label></span> <label for="70s">1970 - 1979</label></span>
<span><input type="checkbox" id="80s" name="year" value="80s"> <span><input type="checkbox" id="80s" name="year" value="80s">
<label for="80s">1980-1989</label></span> <label for="80s">1980 - 1989</label></span>
<span><input type="checkbox" id="90s" name="year" value="90s"> <span><input type="checkbox" id="90s" name="year" value="90s">
<label for="90s">1990-1999</label></span> <label for="90s">1990 - 1999</label></span>
<span><input type="checkbox" id="00s" name="year" value="00s"> <span><input type="checkbox" id="00s" name="year" value="00s">
<label for="00s">2000-2009</label></span> <label for="00s">2000 - 2009</label></span>
<span><input type="checkbox" id="10s" name="year" value="10s"> <span><input type="checkbox" id="10s" name="year" value="10s">
<label for="10s">2010-2016</label></span> <label for="10s">2010 - 2016</label></span>
</div> </div>
</div> </div>
<div class="box months"> <div class="box months">
@ -103,6 +103,33 @@
<div class="item-cont"> <div class="item-cont">
<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">
<label for="18">< 20cm</label></span>
<span><input type="checkbox" id="20" name="dimension" value="20">
<label for="20">20cm - 29cm</label></span>
<span><input type="checkbox" id="30" name="dimension" value="30">
<label for="30">30cm - 39cm</label></span>
<span><input type="checkbox" id="40" name="dimension" value="40">
<label for="40">40cm - 49cm</label></span>
<span><input type="checkbox" id="50" name="dimension" value="50">
<label for="50">50cm - 59cm</label></span>
<span><input type="checkbox" id="60" name="dimension" value="60">
<label for="60">60cm - 69cm</label></span>
<span><input type="checkbox" id="70" name="dimension" value="70">
<label for="70">70cm - 79cm</label></span>
<span><input type="checkbox" id="80" name="dimension" value="80">
<label for="80">80cm - 89cm</label></span>
<span><input type="checkbox" id="90" name="dimension" value="90">
<label for="90">90cm - 99cm</label></span>
<span><input type="checkbox" id="100" name="dimension" value="100">
<label for="100">>= 100cm</label></span>
</div>
</div>
<div class="box genres">
<h3>Genres&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="genres" name="genres" value="all">
<label for="genres">Tous</label></span>
</div> </div>
</div> </div>
<div class="box themes"> <div class="box themes">
@ -112,18 +139,13 @@
<label for="themes">Tous</label></span> <label for="themes">Tous</label></span>
</div> </div>
</div> </div>
<div class="box categories">
<h3>Catégories&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="categories" name="categories" value="all">
<label for="categories">Toutes</label></span>
</div>
</div>
<div class="box places"> <div class="box places">
<h3>Lieux&nbsp;</h3> <h3>Lieux&nbsp;</h3>
<div class="item-cont"> <div class="item-cont">
<span><input type="checkbox" id="places" name="places" value="all"> <span><input type="checkbox" id="places" name="places" value="all">
<label for="places">Tous</label></span> <label for="places">Tous</label></span>
<!--<input type="checkbox" id="place1" name="place1" value="all"><select style="display:inline;"></select>-->
</div> </div>
</div> </div>
<div class="box tags"> <div class="box tags">
@ -131,6 +153,8 @@
<div class="item-cont"> <div class="item-cont">
<span><input type="checkbox" id="tags" name="tags" value="all"> <span><input type="checkbox" id="tags" name="tags" value="all">
<label for="tags">Tous</label></span> <label for="tags">Tous</label></span>
<!--<input type="checkbox" id="tag1" name="tag1" value="all"><select style="display:inline;"></select>-->
</div> </div>
</div> </div>
<div class="box photos"> <div class="box photos">
@ -140,6 +164,8 @@
<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; aucune</label></span>
<!--<span><input type="checkbox" id="exist" name="photo" value="exist">
<label for="exist">Existante</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; mauvaise</label></span>
<span><input type="checkbox" id="ok" name="photo" value="ok"> <span><input type="checkbox" id="ok" name="photo" value="ok">
@ -171,8 +197,8 @@
<th>Titre</th> <th>Titre</th>
<th>Année</th> <th>Année</th>
<th>Dimension</th> <th>Dimension</th>
<th>Genre</th>
<th>Thème</th> <th>Thème</th>
<th>Catégorie</th>
<th>Lieu</th> <th>Lieu</th>
<th>Tags</th> <th>Tags</th>
<th>Photo</th> <th>Photo</th>
@ -181,6 +207,7 @@
</tr> </tr>
</thead> </thead>
</table> </table>
<p class="result" style="text-align:center;"></p>
</article> </article>
</body> </body>
</html> </html>

View File

@ -56,7 +56,7 @@
<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.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>Dernière mise à jour en janvier 2021.</p> <p>Dernière mise à jour en février 2021.</p>
</article> </article>
</body> </body>
</html> </html>

View File

@ -46,9 +46,9 @@
<li><span class="title">date :</span><span class="content date">&nbsp;</span></li> <li><span class="title">date :</span><span class="content date">&nbsp;</span></li>
<li><span class="title">format :</span><span class="content dimension">&nbsp;</span></li> <li><span class="title">format :</span><span class="content dimension">&nbsp;</span></li>
<li><span class="title">support :</span><span class="content support">&nbsp;</span></li> <li><span class="title">support :</span><span class="content support">&nbsp;</span></li>
<li><span class="title">genre :</span><span class="content genre">&nbsp;</span></li>
<li><span class="title">thème :</span><span class="content theme">&nbsp;</span></li> <li><span class="title">thème :</span><span class="content theme">&nbsp;</span></li>
<li><span class="title">lieu :</span><span class="content place">&nbsp;</span></li> <li><span class="title">lieu :</span><span class="content place">&nbsp;</span></li>
<li><span class="title">catégorie :</span><span class="content category">&nbsp;</span></li>
<li><span class="title">état photo :</span><span class="content photo">&nbsp;</span></li> <li><span class="title">état photo :</span><span class="content photo">&nbsp;</span></li>
<li><span class="title">aide requise :</span><span class="content help">&nbsp;</span></li> <li><span class="title">aide requise :</span><span class="content help">&nbsp;</span></li>
<li><span class="title">commentaire :</span><span class="content comment"> </span></li> <li><span class="title">commentaire :</span><span class="content comment"> </span></li>

View File

@ -5,8 +5,8 @@ jQuery(document).ready(function($)
paramYear = (urlParams.get('years') == null ? urlParams.getAll('year') : urlParams.getAll('years')); paramYear = (urlParams.get('years') == null ? urlParams.getAll('year') : urlParams.getAll('years'));
paramMonth = (urlParams.get('months') == null ? urlParams.getAll('month') : urlParams.getAll('months')); paramMonth = (urlParams.get('months') == null ? urlParams.getAll('month') : urlParams.getAll('months'));
paramDimension = (urlParams.get('dimensions') == null ? urlParams.getAll('dimension') : urlParams.getAll('dimensions')); paramDimension = (urlParams.get('dimensions') == null ? urlParams.getAll('dimension') : urlParams.getAll('dimensions'));
paramGenre = (urlParams.get('genres') == null ? urlParams.getAll('genre') : urlParams.getAll('genres'));
paramTheme = (urlParams.get('themes') == null ? urlParams.getAll('theme') : urlParams.getAll('themes')); paramTheme = (urlParams.get('themes') == null ? urlParams.getAll('theme') : urlParams.getAll('themes'));
paramCategory = (urlParams.get('categories') == null ? urlParams.getAll('category') : urlParams.getAll('categories'));
paramPlace = (urlParams.get('places') == null ? urlParams.getAll('place') : urlParams.getAll('places')); paramPlace = (urlParams.get('places') == null ? urlParams.getAll('place') : urlParams.getAll('places'));
paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags')); paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos')); paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
@ -19,9 +19,9 @@ jQuery(document).ready(function($)
/** MENU **/ /** MENU **/
/**********/ /**********/
var dimensions = []; //var dimensions = [];
var genres = [];
var themes = []; var themes = [];
var categories = [];
var places = []; var places = [];
var tags = []; var tags = [];
@ -29,12 +29,12 @@ jQuery(document).ready(function($)
{ {
for (i of data) for (i of data)
{ {
if (dimensions.indexOf(i.dimension) === -1 && i.dimension != "" && i.dimension != "—") /*if (dimensions.indexOf(i.dimension) === -1 && i.dimension != "" && i.dimension != "")
dimensions.push(i.dimension); dimensions.push(i.dimension);*/
if (genres.indexOf(i.genre) === -1 && i.genre != "" && i.genre != "—")
genres.push(i.genre);
if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—") if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—")
themes.push(i.theme); themes.push(i.theme);
if (categories.indexOf(i.category) === -1 && i.category != "" && i.category != "—")
categories.push(i.category);
if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—") if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—")
places.push(i.place); places.push(i.place);
if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—") if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
@ -49,17 +49,23 @@ jQuery(document).ready(function($)
} }
} }
dimensions.sort(); //dimensions.sort();
genres.sort();
themes.sort(); themes.sort();
categories.sort();
places.sort(); places.sort();
tags.sort(); tags.sort();
for (dimension of dimensions) /*for (dimension of dimensions)
{ {
html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n'; html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n';
html += '<label for="' + dimension + '">' + dimension + '</label></span>'; html += '<label for="' + dimension + '">' + dimension + '</label></span>';
$(".box.dimensions .item-cont").append(html); $(".box.dimensions .item-cont").append(html);
}*/
for (genre of genres)
{
html = '<span><input type="checkbox" id="' + genre + '" name="genre" value="' + genre + '"></input>\n';
html += '<label for="' + genre + '">' + genre + '</label></span>';
$(".box.genres .item-cont").append(html);
} }
for (theme of themes) for (theme of themes)
{ {
@ -67,23 +73,23 @@ jQuery(document).ready(function($)
html += '<label for="' + theme + '">' + theme + '</label></span>'; html += '<label for="' + theme + '">' + theme + '</label></span>';
$(".box.themes .item-cont").append(html); $(".box.themes .item-cont").append(html);
} }
for (category of categories) //$(".box.places select").append('<option value="none">Aucun</option');
{
html = '<span><input type="checkbox" id="' + category + '" name="category" value="' + category + '"></input>\n';
html += '<label for="' + category + '">' + category + '</label></span>';
$(".box.categories .item-cont").append(html);
}
for (place of places) for (place of places)
{ {
html = '<span><input type="checkbox" id="' + place + '" name="place" value="' + place + '"></input>\n'; html = '<span><input type="checkbox" id="' + place + '" name="place" value="' + place + '"></input>\n';
html += '<label for="'+place+'">' + place + '</label></span>'; html += '<label for="'+place+'">' + place + '</label></span>';
$(".box.places .item-cont").append(html); $(".box.places .item-cont").append(html);
//$(".box.places select").append('<option value="' + place + '">' + place + '</option');
} }
//$(".box.tags select").append('<option value="none">Aucun</option');
for (tag of tags) for (tag of tags)
{ {
html = '<span><input type="checkbox" id="' + tag + '" name="tag" value="' + tag + '"></input>\n'; html = '<span><input type="checkbox" id="' + tag + '" name="tag" value="' + tag + '"></input>\n';
html += '<label for="'+tag+'">' + tag + '</label></span>'; html += '<label for="'+tag+'">' + tag + '</label></span>';
$(".box.tags .item-cont").append(html); $(".box.tags .item-cont").append(html);
//$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
} }
// populate checkboxes depending on URL // populate checkboxes depending on URL
@ -107,8 +113,8 @@ jQuery(document).ready(function($)
checkBoxSelector("years", "year", paramYear) checkBoxSelector("years", "year", paramYear)
checkBoxSelector("months", "month", paramMonth); checkBoxSelector("months", "month", paramMonth);
checkBoxSelector("dimensions", "dimension", paramDimension); checkBoxSelector("dimensions", "dimension", paramDimension);
checkBoxSelector("genres", "genre", paramGenre);
checkBoxSelector("themes", "theme", paramTheme); checkBoxSelector("themes", "theme", paramTheme);
checkBoxSelector("categories", "category", paramCategory);
checkBoxSelector("places", "place", paramPlace); checkBoxSelector("places", "place", paramPlace);
checkBoxSelector("tags", "tag", paramTag); checkBoxSelector("tags", "tag", paramTag);
checkBoxSelector("photos", "photo", paramPhoto); checkBoxSelector("photos", "photo", paramPhoto);
@ -138,8 +144,8 @@ jQuery(document).ready(function($)
AllCheckBoxSelector("years", "year"); AllCheckBoxSelector("years", "year");
AllCheckBoxSelector("months", "month"); AllCheckBoxSelector("months", "month");
AllCheckBoxSelector("dimensions", "dimension"); AllCheckBoxSelector("dimensions", "dimension");
AllCheckBoxSelector("genres", "genre");
AllCheckBoxSelector("themes", "theme"); AllCheckBoxSelector("themes", "theme");
AllCheckBoxSelector("categories", "category");
AllCheckBoxSelector("places", "place"); AllCheckBoxSelector("places", "place");
AllCheckBoxSelector("tags", "tag"); AllCheckBoxSelector("tags", "tag");
AllCheckBoxSelector("photos", "photo"); AllCheckBoxSelector("photos", "photo");
@ -199,26 +205,42 @@ jQuery(document).ready(function($)
function checkMonth(month) function checkMonth(month)
{ {
if (paramMonth == "all") return true; if (paramMonth == "all") return true;
if (paramMonth.includes("01") && month == "janvier") return true; if (paramMonth.includes("01") && month == "Janvier") return true;
if (paramMonth.includes("02") && month == "février") return true; if (paramMonth.includes("02") && month == "Février") return true;
if (paramMonth.includes("03") && month == "mars") return true; if (paramMonth.includes("03") && month == "Mars") return true;
if (paramMonth.includes("04") && month == "avril") return true; if (paramMonth.includes("04") && month == "Avril") return true;
if (paramMonth.includes("05") && month == "mai") return true; if (paramMonth.includes("05") && month == "Mai") return true;
if (paramMonth.includes("06") && month == "juin") return true; if (paramMonth.includes("06") && month == "Juin") return true;
if (paramMonth.includes("07") && month == "juillet") return true; if (paramMonth.includes("07") && month == "Juillet") return true;
if (paramMonth.includes("08") && month == "août") return true; if (paramMonth.includes("08") && month == "Août") return true;
if (paramMonth.includes("09") && month == "septembre") return true; if (paramMonth.includes("09") && month == "Septembre") return true;
if (paramMonth.includes("10") && month == "octobre") return true; if (paramMonth.includes("10") && month == "Octobre") return true;
if (paramMonth.includes("11") && month == "novembre") return true; if (paramMonth.includes("11") && month == "Novembre") return true;
if (paramMonth.includes("12") && month == "décembre") return true; if (paramMonth.includes("12") && month == "Décembre") return true;
return false; return false;
} }
function checkDimension(dimension) function checkDimension(dimension)
{ {
if (paramDimension == "all") if (paramDimension == "all") return true;
if (paramDimension.includes("18") && dimension.split("x")[0] >= 18 && dimension.split("x")[0] <= 19) return true;
if (paramDimension.includes("20") && dimension.split("x")[0] >= 20 && dimension.split("x")[0] <= 29) return true;
if (paramDimension.includes("30") && dimension.split("x")[0] >= 30 && dimension.split("x")[0] <= 39) return true;
if (paramDimension.includes("40") && dimension.split("x")[0] >= 40 && dimension.split("x")[0] <= 49) return true;
if (paramDimension.includes("50") && dimension.split("x")[0] >= 50 && dimension.split("x")[0] <= 59) return true;
if (paramDimension.includes("60") && dimension.split("x")[0] >= 60 && dimension.split("x")[0] <= 69) return true;
if (paramDimension.includes("70") && dimension.split("x")[0] >= 70 && dimension.split("x")[0] <= 79) return true;
if (paramDimension.includes("80") && dimension.split("x")[0] >= 80 && dimension.split("x")[0] <= 89) return true;
if (paramDimension.includes("90") && dimension.split("x")[0] >= 90 && dimension.split("x")[0] <= 99) return true;
if (paramDimension.includes("100") && dimension.split("x")[0] >= 100 && dimension.split("x")[0] <= 109) return true;
return false;
}
function checkGenre(genre)
{
if (paramGenre == "all")
return true; return true;
if (paramDimension.includes(dimension)) if (paramGenre.includes(genre))
return true; return true;
return false; return false;
} }
@ -232,15 +254,6 @@ jQuery(document).ready(function($)
return false; return false;
} }
function checkCategory(category)
{
if (paramCategory == "all")
return true;
if (paramCategory.includes(category))
return true;
return false;
}
function checkPlace(place) function checkPlace(place)
{ {
if (paramPlace == "all") if (paramPlace == "all")
@ -285,6 +298,7 @@ jQuery(document).ready(function($)
function generateTable() function generateTable()
{ {
hasResult = false; hasResult = false;
numberOfItem = 0;
for (i of data) for (i of data)
{ {
@ -297,8 +311,8 @@ jQuery(document).ready(function($)
if (paramYear != "") res &&= checkYear(i.year); if (paramYear != "") res &&= checkYear(i.year);
if (paramMonth != "") res &&= checkMonth(i.month); if (paramMonth != "") res &&= checkMonth(i.month);
if (paramDimension != "") res &&= checkDimension(i.dimension); if (paramDimension != "") res &&= checkDimension(i.dimension);
if (paramGenre != "") res &&= checkGenre(i.genre);
if (paramTheme != "") res &&= checkTheme(i.theme); if (paramTheme != "") res &&= checkTheme(i.theme);
if (paramCategory != "") res &&= checkCategory(i.category);
if (paramPlace != "") res &&= checkPlace(i.place); if (paramPlace != "") res &&= checkPlace(i.place);
if (paramTag != "") res &&= checkTag(i.tags); if (paramTag != "") res &&= checkTag(i.tags);
if (paramPhoto != "") res &&= checkPhoto(i.photo); if (paramPhoto != "") res &&= checkPhoto(i.photo);
@ -308,6 +322,7 @@ jQuery(document).ready(function($)
continue; continue;
hasResult = true; hasResult = true;
numberOfItem++;
// table // table
$("table").css("display", "block"); $("table").css("display", "block");
@ -315,10 +330,10 @@ jQuery(document).ready(function($)
result = "<tr>"; result = "<tr>";
result += "<td>" + i.number + "</td>"; result += "<td>" + i.number + "</td>";
result += "<td>" + i.title + "</td>"; result += "<td>" + i.title + "</td>";
result += "<td>" + i.year + "</td>"; result += "<td>" + (i.month != "—" ? i.month + "&nbsp;" : "") + i.year + "</td>";
result += "<td>" + i.dimension + "</td>"; result += "<td>" + i.dimension + "</td>";
result += "<td>" + i.genre + "</td>";
result += "<td>" + i.theme + "</td>"; result += "<td>" + i.theme + "</td>";
result += "<td>" + i.category + "</td>";
result += "<td>" + i.place + "</td>"; result += "<td>" + i.place + "</td>";
result += "<td>" + i.tags + "</td>"; result += "<td>" + i.tags + "</td>";
@ -354,6 +369,7 @@ jQuery(document).ready(function($)
} }
$("#gallery").append(paintingHtml); $("#gallery").append(paintingHtml);
} }
$(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " éléments</strong>.");
return hasResult; return hasResult;
} }
@ -368,9 +384,13 @@ jQuery(document).ready(function($)
$(".style-select").show(); $(".style-select").show();
$("article.explorer h2").removeClass("active") $("article.explorer h2").removeClass("active")
$("form").slideUp(200); $("form").slideUp(200);
$("article.explorer p.result").css("display", "block");
} }
else else
{
$("article.explorer p.no-result").css("display", "block"); $("article.explorer p.no-result").css("display", "block");
$("article.explorer p.result").css("display", "none");
}
// on mobile, show only the first item slided down // on mobile, show only the first item slided down
if ($(window).width() <= 600) if ($(window).width() <= 600)
@ -414,6 +434,8 @@ jQuery(document).ready(function($)
caption: function(instance, item) caption: function(instance, item)
{ {
var idx = item.opts.fancyboxIndex - 1; // painting number var idx = item.opts.fancyboxIndex - 1; // painting number
if (item.opts.fancyboxIndex >= 1000)
idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
return '\ return '\
<div id="info">\ <div id="info">\
<span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\ <span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\

View File

@ -28,11 +28,14 @@ jQuery(document).ready(function($)
caption: function(instance, item) caption: function(instance, item)
{ {
var idx = item.opts.fancyboxIndex - 1; // painting number var idx = item.opts.fancyboxIndex - 1; // painting number
if (item.opts.fancyboxIndex >= 1000)
idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
return '\ return '\
<div id="info">\ <div id="info">\
<span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\ <span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\
<span class="title">' + data[idx].title + '</span><span class="year">' + (data[idx].month != '' ? data[idx].month + '&nbsp;' : '') + data[idx].year + '</span>\ <span class="title">' + data[idx].title + '</span><span class="year">' + (data[idx].month != '' ? data[idx].month + '&nbsp;' : '') + data[idx].year + '</span>\
<span class="format">' + data[idx].paint + ' sur ' + data[idx].support + ' (' + data[idx].dimension + ')</span>\ <span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase() + ' (' + data[idx].dimension + ')</span>\
<span class="comment">' + data[idx].comment + '</span>\ <span class="comment">' + data[idx].comment + '</span>\
</div>\ </div>\
'; ';

View File

@ -17,13 +17,15 @@ jQuery(document).ready(function($)
// metadata // metadata
$(".metadata .content.number").append(data[i].number); $(".metadata .content.number").append(data[i].number);
if (data[i].month != "—") $(".metadata .content.date").append(data[i].month + " " + data[i].year); if (data[i].month != "—")
else $(".metadata .content.date").append(data[i].year); $(".metadata .content.date").append(data[i].month + " " + data[i].year);
else
$(".metadata .content.date").append(data[i].year);
$(".metadata .content.dimension").append(data[i].dimension); $(".metadata .content.dimension").append(data[i].dimension);
$(".metadata .content.support").append(data[i].support); $(".metadata .content.support").append(data[i].support);
$(".metadata .content.genre").append(data[i].genre);
$(".metadata .content.theme").append(data[i].theme); $(".metadata .content.theme").append(data[i].theme);
$(".metadata .content.place").append(data[i].place); $(".metadata .content.place").append(data[i].place);
$(".metadata .content.category").append(data[i].category);
if (data[i].photo == "none") photoState = "aucune"; if (data[i].photo == "none") photoState = "aucune";
if (data[i].photo == "bad") photoState = "mauvais"; if (data[i].photo == "bad") photoState = "mauvais";
@ -31,8 +33,10 @@ jQuery(document).ready(function($)
if (data[i].photo == "good") photoState = "bon"; if (data[i].photo == "good") photoState = "bon";
$(".metadata .content.photo").append(photoState); $(".metadata .content.photo").append(photoState);
if (data[i].help == "yes") $(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>'); if (data[i].help == "yes")
else $(".metadata .content.help").append("non"); $(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
else
$(".metadata .content.help").append("non");
$(".metadata .content.comment").append(data[i].comment); $(".metadata .content.comment").append(data[i].comment);
@ -43,9 +47,11 @@ jQuery(document).ready(function($)
// cartel // cartel
$("#info .title").append(data[i].title); $("#info .title").append(data[i].title);
if (data[i].month != "—") $("#info .year").append(data[i].month + " " + data[i].year); if (data[i].month != "—")
else $("#info .year").append(data[i].year); $("#info .year").append(data[i].month + " " + data[i].year);
format = data[i].paint + " sur " + data[i].support; else
$("#info .year").append(data[i].year);
format = data[i].paint + " sur " + data[i].support.toLowerCase();
format += " (" + data[i].dimension + ")"; format += " (" + data[i].dimension + ")";
$("#info .format").append(format); $("#info .format").append(format);
$("#info .comment").prepend(data[i].comment); $("#info .comment").prepend(data[i].comment);

View File

@ -7,7 +7,7 @@ jQuery(document).ready(function($)
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], 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: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19], data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
backgroundColor: '#2589BD', backgroundColor: '#2589BD',
borderColor: '#187795', borderColor: '#187795',
borderWidth: 1 borderWidth: 1
@ -17,9 +17,9 @@ jQuery(document).ready(function($)
scales: { scales: {
yAxes: [{ yAxes: [{
ticks: { ticks: {
beginAtZero:true beginAtZero: true
}, gridLines: { }, gridLines: {
display:false display: false
}, },
scaleLabel: { scaleLabel: {
display: true, display: true,
@ -28,7 +28,7 @@ jQuery(document).ready(function($)
}], }],
xAxes: [{ xAxes: [{
gridLines: { gridLines: {
display:false display: false
} }
}] }]
}, },
@ -38,14 +38,14 @@ jQuery(document).ready(function($)
} }
}); });
var canvasMonth2 = document.getElementById("month2").getContext('2d'); var canvasYear = document.getElementById("year").getContext('2d');
var chartMonth2 = new Chart(canvasMonth2, { var chartYear = new Chart(canvasYear, {
type: 'bar', type: 'bar',
data: { data: {
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], 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: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19], data: [24, 16, 7, 57, 117, 112, 52],
backgroundColor: '#2589BD', backgroundColor: '#2589BD',
borderColor: '#187795', borderColor: '#187795',
borderWidth: 1 borderWidth: 1
@ -55,9 +55,9 @@ jQuery(document).ready(function($)
scales: { scales: {
yAxes: [{ yAxes: [{
ticks: { ticks: {
beginAtZero:true beginAtZero: true
}, gridLines: { }, gridLines: {
display:false display: false
}, },
scaleLabel: { scaleLabel: {
display: true, display: true,
@ -66,7 +66,7 @@ jQuery(document).ready(function($)
}], }],
xAxes: [{ xAxes: [{
gridLines: { gridLines: {
display:false display: false
} }
}] }]
}, },
@ -76,14 +76,14 @@ jQuery(document).ready(function($)
} }
}); });
var canvasMonth3 = document.getElementById("month3").getContext('2d'); var canvasDimension = document.getElementById("dimension").getContext('2d');
var chartMonth3 = new Chart(canvasMonth3, { var chartDimension = new Chart(canvasDimension, {
type: 'bar', type: 'bar',
data: { data: {
labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"], labels: ["< 20cm", "20cm - 29cm", "30cm - 39cm", "40cm - 49cm", "50cm - 59cm", "60cm - 69cm", "70cm - 79cm", "80cm - 89cm", "90cm - 99cm", ">= 100cm"],
datasets: [{ datasets: [{
label: 'nombre de tableaux', label: 'nombre de tableaux',
data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19], data: [1, 60, 54, 97, 50, 54, 11, 2, 1, 2],
backgroundColor: '#2589BD', backgroundColor: '#2589BD',
borderColor: '#187795', borderColor: '#187795',
borderWidth: 1 borderWidth: 1
@ -93,9 +93,9 @@ jQuery(document).ready(function($)
scales: { scales: {
yAxes: [{ yAxes: [{
ticks: { ticks: {
beginAtZero:true beginAtZero: true
}, gridLines: { }, gridLines: {
display:false display: false
}, },
scaleLabel: { scaleLabel: {
display: true, display: true,
@ -104,7 +104,7 @@ jQuery(document).ready(function($)
}], }],
xAxes: [{ xAxes: [{
gridLines: { gridLines: {
display:false display: false
} }
}] }]
}, },

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,6 +1,7 @@
@font-face { @font-face {
font-family:Rubik; font-family:Rubik;
src:url('fonts/Rubik-VariableFont_wght.ttf'); src:url('fonts/Rubik-Regular.woff2') format("woff2"),
url('fonts/Rubik-Regular.woff') format("woff");
} }
@font-face { @font-face {
@ -10,7 +11,7 @@
@font-face { @font-face {
font-family:Commissioner; font-family:Commissioner;
src:url('fonts/Commissioner-VariableFont_wght.ttf'); Src:url('fonts/CommissionerFlair-Regular.ttf');
} }
body { body {
@ -247,11 +248,15 @@ article #gallery img {
#info .info { #info .info {
font-size:1.2rem; font-size:1.2rem;
position:absolute; position:absolute;
top:0.4rem; top:0.325rem;
right:1rem; right:1rem;
font-family:monospace; font-family:monospace;
} }
#info .year {
margin-right:1rem;
}
#info .title { #info .title {
font-weight:bold; font-weight:bold;
font-style:italic; font-style:italic;
@ -415,7 +420,7 @@ article.explorer form {
article.explorer form select { article.explorer form select {
display:block; display:block;
margin-right:0.75rem; margin-left:0.2rem;
} }
/* does not seem to work */ /* does not seem to work */