gallery: second prototype
Don't look for the first one, it's trapped in a parallel universe.
This commit is contained in:
parent
39748667ee
commit
fe8e2f0265
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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";
|
||||
}
|
||||
});
|
||||
});
|
|
@ -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 %}
|
Loading…
Reference in New Issue