<section class="showcase view-gallery">
<div class="showcase__header">
<h1 class="title">Showcase</h1>
<button class="btn is-active"><span class="material-icons">view_comfy</span></button>
<!--<button class="btn"><span class="material-icons">view_quilt</span></button>-->
<button class="btn"><span class="material-icons">view_headline</span></button>
</div>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/600x400">
<figcaption>In odio debitis ipsam nemo.</figcaption>
</figure>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/603x402">
<figcaption>Lorem ipsum dolor sit amet.</figcaption>
</figure>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/606x404">
<figcaption>Dolor nostrum blanditiis ea porro.</figcaption>
</figure>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/609x406">
<figcaption>Aut sunt ex deleniti quisquam!</figcaption>
</figure>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/612x408">
<figcaption>Dicta reprehenderit et optio omnis.</figcaption>
</figure>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/615x410">
<figcaption>Corrupti placeat maxime cupiditate tempora.</figcaption>
</figure>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/618x412">
<figcaption>Dolore ipsum ut in nostrum.</figcaption>
</figure>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/621x414">
<figcaption>Porro assumenda officiis modi optio!</figcaption>
</figure>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/624x416">
<figcaption>Quas provident impedit hic debitis!</figcaption>
</figure>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/627x418">
<figcaption>Maxime soluta minima voluptates sunt.</figcaption>
</figure>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/630x420">
<figcaption>Commodi quos eligendi veritatis obcaecati.</figcaption>
</figure>
<figure>
<img src="https://source.unsplash.com/user/mkmllr/likes/633x422">
<figcaption>Itaque maiores enim cumque ullam!</figcaption>
</figure>
</section>
// ----- base ----- //
* {
box-sizing: border-box;
}
html {
font-family: Roboto, sans-serif;
@include font-size-between(16px, 20px, 600px, 1200px);
text-size-adjust: none;
}
body {
margin: 0;
background: #ececef;
}
img {
display: block;
max-width: 100%;
}
figure {
margin: 0;
}
// ----- showcase ----- //
.showcase {
$this: &;
display: grid;
grid-gap: 2em;
padding: 2em;
figure {
border-radius: .25em;
background: #fff;
box-shadow: 0 .5em 2em -1em rgba(#000, .25);
overflow: hidden;
img {
width: 100%;
}
figcaption {
padding: 1em;
}
}
// ----- gallery view ----- //
&.view-gallery {
$item-min-width: 300px;
grid-template-columns: repeat(auto-fit, minmax($item-min-width, 1fr));
@media (max-width: $item-min-width*2.5) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: $item-min-width*1.5) {
grid-template-columns: 1fr;
}
#{$this}__header {
grid-column: 1 / -1;
}
}
// ----- list view ----- //
&.view-list {
grid-auto-flow: row;
max-width: 80ch;
margin: 0 auto;
}
// ----- navigation ----- //
&__header {
display: grid;
grid-template-columns: 1fr repeat(2, auto);
grid-gap: 1em;
align-items: center;
.title {
margin: 0;
font-size: 1.25em;
font-weight: 700;
}
.btn {
all: unset;
display: flex;
align-items: center;
padding: .5em;
border-radius: .25em;
background: #fff;
box-shadow: 0 2px 5px -3px rgba(#000, .5);
cursor: pointer;
.material-icons {
color: inherit;
}
&.is-active {
background: rgba(#000, .5);
color: #fff;
}
}
}
}
View Compiled
const buttons = document.querySelectorAll('.showcase__header .btn');
const showcase = document.querySelector('.showcase');
buttons.forEach(button => {
button.addEventListener('click', changeView);
});
function changeView(e) {
let isActiveClass = 'is-active',
galleryClass = 'view-gallery',
listClass = 'view-list',
current = e.currentTarget,
siblings = [...buttons].filter(s => s != current),
isCurrentActive = current.classList.contains(isActiveClass);
current.classList.add(isActiveClass);
siblings.map(s => {
s.classList.remove(isActiveClass);
});
if (!isCurrentActive) {
if (showcase.classList.contains(galleryClass)) {
showcase.classList.remove(galleryClass);
showcase.classList.add(listClass);
}
else if (showcase.classList.contains(listClass)) {
showcase.classList.remove(listClass);
showcase.classList.add(galleryClass);
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.