From 67dd63d1a25e19a1623f0303ca77f6078da95265 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Sat, 13 Mar 2021 23:19:59 +0100 Subject: Move credits closer to photos in concerts page --- Makefile | 11 ++++-- concerts.html | 98 +++++++++++++++--------------------------------- en/concerts.html | 98 +++++++++++++++--------------------------------- scripts/concerts.js | 34 +++++++++++++++++ stylesheets/concerts.css | 65 +++++++++++++++++++------------- 5 files changed, 139 insertions(+), 167 deletions(-) create mode 100644 scripts/concerts.js diff --git a/Makefile b/Makefile index bbec445..7431b64 100644 --- a/Makefile +++ b/Makefile @@ -26,6 +26,9 @@ images_folders = $(call dirnames,$(images)) stylesheets = $(foreach img,$(shell find stylesheets -type f),$(OUTDIR)/$(img)) stylesheets_folders = $(call dirnames,$(stylesheets)) +scripts = $(foreach img,$(shell find scripts -type f),$(OUTDIR)/$(img)) +scripts_folders = $(call dirnames,$(scripts)) + .PHONY: all clean site all: site @@ -33,9 +36,9 @@ all: site clean: -rm -r $(OUTDIR) -site: $(pages) $(members_pages) $(resources) $(images) $(stylesheets) +site: $(pages) $(members_pages) $(resources) $(images) $(stylesheets) $(scripts) -$(resources) $(images) $(stylesheets): $(OUTDIR)/%: % +$(resources) $(images) $(stylesheets) $(scripts): $(OUTDIR)/%: % cp $< $@ .SECONDEXPANSION: @@ -63,7 +66,7 @@ $(OUTDIR)/en/programs.html: en/programs.in # Our lists of target directories are created from the lists of leaf # resources; some intermediate directories that only hold subdirs do # not appear in these lists. Work around that with -p. -$(OUTDIR) $(languages_folders) $(images_folders) $(stylesheets_folders): +$(OUTDIR) $(languages_folders) $(images_folders) $(stylesheets_folders) $(scripts_folders): mkdir -p $@ -$(resources) $(images) $(stylesheets) $(pages) $(members_pages): | $$(@D) +$(resources) $(images) $(stylesheets) $(scripts) $(pages) $(members_pages): | $$(@D) diff --git a/concerts.html b/concerts.html index c219825..2982ff0 100644 --- a/concerts.html +++ b/concerts.html @@ -2,17 +2,31 @@

Prochains concerts

- - -

- ANNULÉ - Dinard
3 avril 2021 -

- - - -

Paris
13 juin 2021

- +
+ + +

+ ANNULÉ + Dinard
3 avril 2021 +

+ +
+ + Piqsels / CC0 + +
+
+
+ + +

Paris
13 juin 2021

+ +
+ + Fred Romero / CC BY + +
+
@@ -31,17 +45,7 @@

Informations et réservations : - - https://weekenddemusiqueclassique.fr - -

-

- Photo fournie par - - Piqsels - - / CC0 + https://weekenddemusiqueclassique.fr

@@ -58,56 +62,14 @@

Entrée libre sans réservation, dans la limite des places - disponibles.
+ disponibles. +

+

Pour plus d'informations, merci de contacter : quatuorbellefeuille@gmail.com

-

- Photo fournie par - - Fred Romero - - / CC BY -

- - + diff --git a/en/concerts.html b/en/concerts.html index 0899b71..f6eef1b 100644 --- a/en/concerts.html +++ b/en/concerts.html @@ -2,17 +2,31 @@

Next concerts

- - -

- CANCELED - Dinard
3 April 2021 -

- - - -

Paris
13 June 2021

- +
+ + +

+ CANCELED + Dinard
3 April 2021 +

+ +
+ + Piqsels / CC0 + +
+
+
+ + +

Paris
13 June 2021

+ +
+ + Fred Romero / CC BY + +
+
@@ -31,17 +45,7 @@

Information and reservation : - - https://weekenddemusiqueclassique.fr - -

-

- Photo provided by - - Piqsels - - / CC0 + https://weekenddemusiqueclassique.fr

@@ -58,56 +62,14 @@

Free admission without reservation, subject to the number of - available places.
+ available places. +

+

For more information, please contact quatuorbellefeuille@gmail.com

-

- Photo provided by - - Fred Romero - - / CC BY -

- - + diff --git a/scripts/concerts.js b/scripts/concerts.js new file mode 100644 index 0000000..fb45819 --- /dev/null +++ b/scripts/concerts.js @@ -0,0 +1,34 @@ +// When JS is enabled, hide concert details by default, and allow the +// user to display concerts selectively. +var detailsStyle = document.createElement('style'); +document.head.appendChild(detailsStyle); +detailsStyle.sheet.insertRule('.details:not(.active) {display:none}'); + +var pHint = document.querySelector('p.hint'); + +var anchor = document.location.hash; +if (anchor.match(/#concert-/)) { + document.querySelector(anchor).classList.add('active'); + document.querySelector(`a[href="${document.location.hash}"]`).parentNode + .classList.add('active'); + pHint.style.display = 'none'; +} +document.querySelectorAll('a.event').forEach((link) => { + link.addEventListener('click', function(click) { + if (click.ctrlKey || click.shiftKey) + return; + + var prev = document.querySelector('.details.active'); + if (prev) + prev.classList.remove('active'); + var id = link.attributes['href'].value; + document.querySelector(id).classList.add('active'); + + prev = document.querySelector('.eventcontainer.active'); + if (prev) + prev.classList.remove('active'); + link.parentNode.classList.add('active'); + + pHint.style.display = 'none'; + }); +}); diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css index b03bdc2..f732daa 100644 --- a/stylesheets/concerts.css +++ b/stylesheets/concerts.css @@ -29,8 +29,11 @@ main h1 { grid-gap: 0.8em; } -a.event { +.eventcontainer { position: relative; +} + +a.event { display: flex; justify-content: center; align-items: center; @@ -40,7 +43,6 @@ a.event { } .event img { - position: absolute; object-position: center; object-fit: cover; height: 100%; @@ -48,10 +50,24 @@ a.event { } .event .summary { + position: absolute; font-weight: bold; color: white; text-align: center; - z-index: 1; +} + +.credits::before { + content: '© '; +} +.credits { + position: absolute; + top: 0; + right: 0; + color: white; + background: #0008; + border-bottom-left-radius: 0.5em; + padding: 0 0.2em; + font-size: small; } .event.canceled { @@ -63,7 +79,7 @@ a.event { color: red; } .event.canceled:hover, -.event.canceled.active { +.eventcontainer.active .event.canceled { opacity: 1; } @@ -97,10 +113,6 @@ a.event { list-style: none; } -.photo-credits { - font-size: x-small; -} - .details.canceled > .canceled { color: red; } @@ -135,17 +147,21 @@ a.event { transition: 0.5s; } - .event:not(.active):hover img, - .event:not(.active):focus-within img, - .event.active img { + .eventcontainer:not(.active):hover img, + .eventcontainer:not(.active):focus-within img, + .eventcontainer.active img { filter: grayscale(0.8) brightness(0.4); } - .event:not(.active):hover .summary, - .event:not(.active):focus-within .summary, - .event.active .summary { + .eventcontainer:not(.active):hover .summary, + .eventcontainer:not(.active):focus-within .summary, + .eventcontainer.active .summary { opacity: 1; } + + .credits:not(:hover) > span:only-child { + display: none; + } } @media (max-width: 40em) { @@ -154,23 +170,18 @@ a.event { --cell-height: 8em; } - a.event { - align-items: flex-end; - } - a.event.active { - align-items: stretch; - } - .event .summary { + align-self: flex-end; + + display: flex; + /* Make sure CANCELED block goes above summary. */ + flex-direction: column; + width: 100%; margin: 0; background: #0008; - width: 100%; } - a.event.active .summary { - display: flex; - align-content: center; + .eventcontainer.active > a.event .summary { + height: 100%; justify-content: center; - /* Make sure CANCELED block goes above summary. */ - flex-direction: column; } } -- cgit v1.2.3