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
Download Patch File Download Diff File Expand all files Collapse all files

82
explorer.html
View File

@@ -46,6 +46,23 @@
</div>
<form action="">
<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">
<h3>Années&nbsp;</h3>
<div class="item-cont">
@@ -98,33 +115,6 @@
<label for="12">Décembre</label></span>
</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">
<h3>Genres&nbsp;</h3>
<div class="item-cont">
@@ -157,21 +147,31 @@
<!--<input type="checkbox" id="tag1" name="tag1" value="all"><select style="display:inline;"></select>-->
</div>
</div>
<div class="box photos">
<h3>État photo&nbsp;</h3>
<div class="box dimensions">
<h3>Dimensions&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>
<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 help">

2
exposition.html
View File

@@ -35,7 +35,7 @@
<article class="exposition">
<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>
</article>
</body>

2
painting.html
View File

@@ -2,7 +2,7 @@
<html lang="fr">
<head>
<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="author" content="Famille Marchal">
<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("photos", "photo", paramPhoto);
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
@@ -150,6 +159,23 @@ jQuery(document).ready(function($)
AllCheckBoxSelector("tags", "tag");
AllCheckBoxSelector("photos", "photo");
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
$("article.explorer h2").click(function()
@@ -284,6 +310,7 @@ jQuery(document).ready(function($)
if (paramPhoto.includes("bad") && photo == "bad") return true;
if (paramPhoto.includes("ok") && photo == "ok") return true;
if (paramPhoto.includes("good") && photo == "good") return true;
if (paramPhoto.includes("exist") && (photo == "bad" || photo == "ok" || photo == "good")) return true;
return false;
}
@@ -369,7 +396,7 @@ jQuery(document).ready(function($)
}
$("#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;
}

23
scripts/painting.js
View File

@@ -2,12 +2,29 @@ jQuery(document).ready(function($)
{
const urlParams = new URLSearchParams(window.location.search);
const pageId = urlParams.get('number');
i = pageId - 1; // index is 0
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
$.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
$("head title").append(data[i].number);
$("head title").append(GetNumber());
// photo
if (data[i].photo != "none")
@@ -16,7 +33,7 @@ jQuery(document).ready(function($)
$(".photo img").attr("src", "images/unknown.jpg");
// metadata
$(".metadata .content.number").append(data[i].number);
$(".metadata .content.number").append(GetNumber());
if (data[i].month != "—")
$(".metadata .content.date").append(data[i].month + " " + data[i].year);
else

15
styles/main.css
View File

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