gallery: second prototype

Don't look for the first one, it's trapped in a parallel universe.
This commit is contained in:
Darks 2022-04-26 00:27:43 +02:00
parent 39748667ee
commit fe8e2f0265
Signed by: Darks
GPG Key ID: 7515644268BE1433
4 changed files with 224 additions and 0 deletions

View File

@ -127,4 +127,50 @@
}
hr.signature {
opacity: 0.2;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
}
.gallery * {
margin: 3px;
border: 1px solid var(--border);
}
.gallery-js {
--border: rgba(0,0,0,0.5);
--selected: rgba(255,0,0,0.9);
display: flex;
overflow-x: auto;
margin: auto;
padding: 15px;
height: 180px;
}
.gallery-js img,
.gallery-js video {
height: 100%;
border: 1px solid var(--border);
cursor: pointer;
}
.gallery-js img:not(:first-child),
.gallery-js video:not(:first-child) {
margin-left: 15px;
}
.gallery-js img.selected,
.gallery-js video.selected {
box-shadow: 0 0 7.5px var(--selected);
}
@media screen and (max-width:1199px) {
.gallery-js {
height: 180px;
}
}
@media screen and (max-width:499px) {
.gallery-js {
height: 180px;
}
}
.gallery-spot {
margin: 10px auto;
}

View File

@ -160,3 +160,50 @@
hr.signature {
opacity: 0.2;
}
/* Gallery without Javascript */
.gallery {
display: flex; flex-wrap: wrap;
justify-content: center; margin: auto;
* {
margin: 3px;
border: 1px solid var(--border);
}
}
/* Gallery with Javascript */
.gallery-js {
--border: rgba(0, 0, 0, 0.5);
--selected: rgba(255, 0, 0, 0.9);
@padding: 15px;
display: flex; overflow-x: auto;
margin: auto; padding: @padding;
height: 150px + 2 * @padding;
@media screen and (max-width: @small) {
height: 150px + 2 * @padding;
}
@media screen and (max-width: @micro) {
height: 150px + 2 * @padding;
}
img, video {
height: 100%;
border: 1px solid var(--border);
cursor: pointer;
&:not(:first-child) {
margin-left: @padding;
}
&.selected {
box-shadow: 0 0 @padding/2 var(--selected);
}
}
}
.gallery-spot {
margin: 10px auto;
}

View File

@ -0,0 +1,50 @@
document.querySelectorAll(".gallery").forEach(item => {
// Switch to gallery-js stylesheet
item.className = "gallery-js";
// Create the spotlight container
let spot = document.createElement('div');
spot.className = "gallery-spot";
spot.style.display = "none";
spot.appendChild(item.firstElementChild.cloneNode(true));
item.after(spot);
// Add some logic
// item.addEventListener("click", function(e) {
// console.log(e.target);
// console.log(e.currentTarget);
// // Select the clicked media
// Array.from(item.children).forEach(child => {
// child.classList.remove('selected');
// });
// e.target.classList.add('selected');
//
// // Display the current
// e.currentTarget.nextElementSibling.querySelector('div').innerHTML = e.target.outerHTML;
// });
});
document.querySelectorAll(".gallery-js > *").forEach(item => {
item.addEventListener("click", function(e) {
console.log(e.target);
// Manage selected media
if(e.target.classList.contains('selected')) {
e.target.classList.remove('selected');
} else {
e.target.classList.add('selected');
}
Array.from(e.target.parentElement.children).forEach(el => {
if(el != e.target) el.classList.remove('selected');
});
// Change content of spotlight
let spot = e.target.parentElement.nextElementSibling;
spot.replaceChild(e.target.cloneNode(true), spot.firstElementChild);
if(e.target.classList.contains('selected')) {
spot.style.display = "block";
} else {
spot.style.display = "none";
}
});
});

View File

@ -0,0 +1,81 @@
{% extends "base/base.html" %}
{% import "widgets/editor.html" as widget_editor %}
{% import "widgets/thread.html" as widget_thread with context %}
{% import "widgets/user.html" as widget_user %}
{% import "widgets/pagination.html" as widget_pagination with context %}
{% import "widgets/attachments.html" as widget_attachments %}
{% block title %}
<h1>Programme {{ program.name }}</h1>
{% endblock %}
{% block content %}
<section>
<div style="display:flex;flex-wrap:wrap;align-items:center;">
<div>
{{ widget_user.profile(program.author) }}
</div>
<div style="padding:30px;">
<div style="font-size:115%;font-style:italic;margin-bottom:15px;">
{{ program.title }}
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae
feugiat ante. Pellentesque luctus lorem tincidunt vestibulum condimentum.
Nullam sed tempus sem. Phasellus quis diam vitae sapien luctus consequat
ac eget lacus. Sed rutrum condimentum sagittis. Nullam erat nibh, euismod
ac metus at, consequat tincidunt ipsum. Fusce sagittis iaculis orci sedporta.
Etiam bibendum purus et ipsum pellentesque, quis sodales libero congue. Nunc
lectus quam, cursus non dictum nec, volutpat eget felis. Praesent sollicitudin
massa erat, nec venenatis lorem lacinia et. Etiam ullamcorper neque quis
nisi sodales vulputate. Integer scelerisque luctus arcu, ut elementum justo
auctor a. Praesent sit amet libero risus.</p>
<div class="gallery">
<img src="https://www.planet-casio.com/storage/staff/IDK_3_manoir.png" alt="">
<img src="https://www.planet-casio.com/storage/staff/IDK_7_stats.png" alt="">
<video>
<source src="https://linx.breizh.pm/selif/xgh9k9sq.mp4">
</video>
<img src="https://www.planet-casio.com/storage/staff/IDK_3_manoir.png" alt="">
<img src="https://www.planet-casio.com/storage/staff/IDK_7_stats.png" alt="">
<video>
<source src="https://www.planet-casio.com/storage/staff/IDK_5_intrigue.mp4">
</video>
<img src="https://www.planet-casio.com/storage/staff/IDK_3_manoir.png" alt="">
<img src="https://www.planet-casio.com/storage/staff/IDK_7_stats.png" alt="">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae
feugiat ante. Pellentesque luctus lorem tincidunt vestibulum condimentum.
Nullam sed tempus sem. Phasellus quis diam vitae sapien luctus consequat
ac eget lacus. Sed rutrum condimentum sagittis. Nullam erat nibh, euismod
ac metus at, consequat tincidunt ipsum. Fusce sagittis iaculis orci sedporta.
Etiam bibendum purus et ipsum pellentesque, quis sodales libero congue. Nunc
lectus quam, cursus non dictum nec, volutpat eget felis. Praesent sollicitudin
massa erat, nec venenatis lorem lacinia et. Etiam ullamcorper neque quis
nisi sodales vulputate. Integer scelerisque luctus arcu, ut elementum justo
auctor a. Praesent sit amet libero risus.</p>
<div class="gallery">
<img src="https://www.planet-casio.com/storage/staff/IDK_3_manoir.png" alt="">
<img src="https://www.planet-casio.com/storage/staff/IDK_7_stats.png" alt="">
<video>
<source src="https://linx.breizh.pm/selif/xgh9k9sq.mp4">
</video>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae
feugiat ante. Pellentesque luctus lorem tincidunt vestibulum condimentum.
Nullam sed tempus sem. Phasellus quis diam vitae sapien luctus consequat
ac eget lacus. Sed rutrum condimentum sagittis. Nullam erat nibh, euismod
ac metus at, consequat tincidunt ipsum. Fusce sagittis iaculis orci sedporta.
Etiam bibendum purus et ipsum pellentesque, quis sodales libero congue. Nunc
lectus quam, cursus non dictum nec, volutpat eget felis. Praesent sollicitudin
massa erat, nec venenatis lorem lacinia et. Etiam ullamcorper neque quis
nisi sodales vulputate. Integer scelerisque luctus arcu, ut elementum justo
auctor a. Praesent sit amet libero risus.</p>
</div>
{% endblock %}