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

Fix issue for "inédits", new "existant" button, and CSS improvement

Browse Source
This commit is contained in:
Théo Marchal 2021-02-10 22:21:02 +01:00
parent d55c1bf238
commit a2a2dc97c0
6 changed files with 99 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
explorer.html
View File

@ -46,6 +46,23 @@
</div> </div>
<form action=""> <form action="">
<div class="container"> <div class="container">
<div class="box photos">
<h3>État photo&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="photos" name="photos" value="all">
<label for="photos">Tout état</label></span>
<span><input type="checkbox" id="none" name="photo" value="none">
<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">
<label for="bad">&#x2605; mauvaise</label></span>
<span><input type="checkbox" id="ok" name="photo" value="ok">
<label for="ok">&#x2605;&#x2605; acceptable</label></span>
<span><input type="checkbox" id="good" name="photo" value="good">
<label for="good">&#x2605;&#x2605;&#x2605; bonne</label></span>
</div>
</div>
<div class="box years active"> <div class="box years active">
<h3>Années&nbsp;</h3> <h3>Années&nbsp;</h3>
<div class="item-cont"> <div class="item-cont">
@ -98,33 +115,6 @@
<label for="12">Décembre</label></span> <label for="12">Décembre</label></span>
</div> </div>
</div> </div>
<div class="box dimensions">
<h3>Dimensions&nbsp;</h3>
<div class="item-cont">
<span><input type="checkbox" id="dimensions" name="dimensions" value="all">
<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"> <div class="box genres">
<h3>Genres&nbsp;</h3> <h3>Genres&nbsp;</h3>
<div class="item-cont"> <div class="item-cont">
@ -157,21 +147,31 @@
<!--<input type="checkbox" id="tag1" name="tag1" value="all"><select style="display:inline;"></select>--> <!--<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 dimensions">
<h3>État photo&nbsp;</h3> <h3>Dimensions&nbsp;</h3>
<div class="item-cont"> <div class="item-cont">
<span><input type="checkbox" id="photos" name="photos" value="all"> <span><input type="checkbox" id="dimensions" name="dimensions" value="all">
<label for="photos">Tout état</label></span> <label for="dimensions">Toutes</label></span>
<span><input type="checkbox" id="none" name="photo" value="none"> <span><input type="checkbox" id="18" name="dimension" value="18">
<label for="none">&#x2606; aucune</label></span> <label for="18">< 20cm</label></span>
<!--<span><input type="checkbox" id="exist" name="photo" value="exist"> <span><input type="checkbox" id="20" name="dimension" value="20">
<label for="exist">Existante</label></span>--> <label for="20">20cm - 29cm</label></span>
<span><input type="checkbox" id="bad" name="photo" value="bad"> <span><input type="checkbox" id="30" name="dimension" value="30">
<label for="bad">&#x2605; mauvaise</label></span> <label for="30">30cm - 39cm</label></span>
<span><input type="checkbox" id="ok" name="photo" value="ok"> <span><input type="checkbox" id="40" name="dimension" value="40">
<label for="ok">&#x2605;&#x2605; acceptable</label></span> <label for="40">40cm - 49cm</label></span>
<span><input type="checkbox" id="good" name="photo" value="good"> <span><input type="checkbox" id="50" name="dimension" value="50">
<label for="good">&#x2605;&#x2605;&#x2605; bonne</label></span> <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> </div>
<div class="box help"> <div class="box help">

2
exposition.html
View File

@ -35,7 +35,7 @@
<article class="exposition"> <article class="exposition">
<h1>Exposition</h1> <h1>Exposition</h1>
<p style="text-align:center;">Cliquez sur une image pour la voir en grand avec ses détails.</p> <p class="center">Cliquez sur une image pour la voir en grand avec ses détails.</p>
<div id="gallery"></div> <div id="gallery"></div>
</article> </article>
</body> </body>

2
painting.html
View File

@ -2,7 +2,7 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Ginou • tableau nº</title> <title>Ginou • tableau&nbsp;</title>
<meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou."> <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
<meta name="author" content="Famille Marchal"> <meta name="author" content="Famille Marchal">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

29
scripts/explorer.js
View File

@ -119,6 +119,15 @@ jQuery(document).ready(function($)
checkBoxSelector("tags", "tag", paramTag); checkBoxSelector("tags", "tag", paramTag);
checkBoxSelector("photos", "photo", paramPhoto); checkBoxSelector("photos", "photo", paramPhoto);
checkBoxSelector("helps", "help", paramHelp); checkBoxSelector("helps", "help", paramHelp);
// special case for photos with "exist"
if (paramPhoto == "exist")
{
$('input[id="exist"]').prop("checked", true);
$('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
$('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
$('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
}
} }
// if "all" is selected, check all other options and disable them // if "all" is selected, check all other options and disable them
@ -151,6 +160,23 @@ jQuery(document).ready(function($)
AllCheckBoxSelector("photos", "photo"); AllCheckBoxSelector("photos", "photo");
AllCheckBoxSelector("helps", "help"); AllCheckBoxSelector("helps", "help");
// special case for photos with "exist"
$('input[id="exist"]').click(function()
{
if ($(this).prop("checked") == true)
{
$('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
$('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
$('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
}
else
{
$('input[id="bad"]').prop("checked", false); $('input[id="bad"]').prop("disabled", false);
$('input[id="ok"]').prop("checked", false); $('input[id="ok"]').prop("disabled", false);
$('input[id="good"]').prop("checked", false); $('input[id="good"]').prop("disabled", false);
}
});
// menu configurer show / hide // menu configurer show / hide
$("article.explorer h2").click(function() $("article.explorer h2").click(function()
{ {
@ -284,6 +310,7 @@ jQuery(document).ready(function($)
if (paramPhoto.includes("bad") && photo == "bad") return true; if (paramPhoto.includes("bad") && photo == "bad") return true;
if (paramPhoto.includes("ok") && photo == "ok") return true; if (paramPhoto.includes("ok") && photo == "ok") return true;
if (paramPhoto.includes("good") && photo == "good") return true; if (paramPhoto.includes("good") && photo == "good") return true;
if (paramPhoto.includes("exist") && (photo == "bad" || photo == "ok" || photo == "good")) return true;
return false; return false;
} }
@ -369,7 +396,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>."); $(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " élément" + (numberOfItem > 1 ? "s" : "") + "</strong>.");
return hasResult; return hasResult;
} }

21
scripts/painting.js
View File

@ -2,12 +2,29 @@ jQuery(document).ready(function($)
{ {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
const pageId = urlParams.get('number'); const pageId = urlParams.get('number');
if (pageId > 1000)
i = pageId - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
else
i = pageId - 1; // index is 0 i = pageId - 1; // index is 0
$.getJSON("data.json", function(data) $.getJSON("data.json", function(data)
{ {
if (!data[i]) // the number specified in URL does not exist
{
$(".container").css("display", "none");
$("#info").css("display", "none");
$("article").append('<p class="center">Aucun tableau n\'existe pour cet index.</p>');
}
function GetNumber()
{
if (data[i].number > 1000)
return "Inédit";
return data[i].number;
}
// page title // page title
$("head title").append(data[i].number); $("head title").append(GetNumber());
// photo // photo
if (data[i].photo != "none") if (data[i].photo != "none")
@ -16,7 +33,7 @@ jQuery(document).ready(function($)
$(".photo img").attr("src", "images/unknown.jpg"); $(".photo img").attr("src", "images/unknown.jpg");
// metadata // metadata
$(".metadata .content.number").append(data[i].number); $(".metadata .content.number").append(GetNumber());
if (data[i].month != "—") if (data[i].month != "—")
$(".metadata .content.date").append(data[i].month + " " + data[i].year); $(".metadata .content.date").append(data[i].month + " " + data[i].year);
else else

15
styles/main.css
View File

@ -26,6 +26,10 @@ a {
text-decoration:none; text-decoration:none;
} }
.center {
text-align:center;
}
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);
@ -406,7 +410,6 @@ article.explorer form h3, article.explorer form span {
} }
article.explorer form .container { article.explorer form .container {
/*max-width:80vw;*/
margin:auto; margin:auto;
display:flex; display:flex;
align-self:flex-start; align-self:flex-start;
@ -423,11 +426,6 @@ article.explorer form select {
margin-left:0.2rem; margin-left:0.2rem;
} }
/* does not seem to work */
article.explorer form .box {
margin:1rem;
}
article.explorer input[type = submit] { article.explorer input[type = submit] {
display:block; display:block;
margin:auto; margin:auto;
@ -443,6 +441,10 @@ article.explorer input[type = submit] {
color:white; color:white;
} }
input:checked + label {
font-weight:bold;
}
@media only screen and (max-width:600px) { @media only screen and (max-width:600px) {
article.explorer form .container { article.explorer form .container {
display:block; display:block;
@ -535,7 +537,6 @@ article.explorer tr td:first-child {
} }
article.explorer tr td:nth-child(2) { article.explorer tr td:nth-child(2) {
width:25%;
white-space:nowrap; white-space:nowrap;
} }