refactor: ♻️ update gallery component
This commit is contained in:
Sebin Nyshkim
parent
057a493787
commit
0bdd7c1c61
2 changed files with 280 additions and 264 deletions
336
src/App.vue
336
src/App.vue
|
|
@ -209,85 +209,82 @@
|
|||
</div>
|
||||
|
||||
<gallery v-show="nsfw">
|
||||
<ul>
|
||||
<li>
|
||||
<img
|
||||
src="@img/muscle-ref/muscle-ref1.png"
|
||||
alt="By Grisser"
|
||||
title="By Grisser"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/muscle-ref/muscle-ref2.png"
|
||||
alt="By valentinapaz"
|
||||
title="By valentinapaz"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/muscle-ref/muscle-ref3.png"
|
||||
alt="By Marsel-Defender"
|
||||
title="By Marsel-Defender"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/muscle-ref/muscle-ref4.png"
|
||||
alt="By SirBoburto"
|
||||
title="By SirBoburto"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/muscle-ref/muscle-ref5.jpeg"
|
||||
alt="By SexMuffin"
|
||||
title="By SexMuffin"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/muscle-ref/muscle-ref6.png"
|
||||
alt="By Knuxlight"
|
||||
title="By Knuxlight"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/muscle-ref/muscle-ref7.png"
|
||||
alt="By ShoNuff44"
|
||||
title="By ShoNuff44"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/muscle-ref/muscle-ref8.jpeg"
|
||||
alt="By j-cock"
|
||||
title="By j-cock"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/muscle-ref/muscle-ref9.jpeg"
|
||||
alt="By j-cock"
|
||||
title="By j-cock"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/muscle-ref/muscle-ref10.png"
|
||||
alt="By j-cock"
|
||||
title="By j-cock"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/muscle-ref/muscle-ref11.jpeg"
|
||||
alt="By Marsel-Defender"
|
||||
title="By Marsel-Defender"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref1.png" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/GrisserArt">Grisser</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref2.png" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/artvalentinapaz">Valentina Paz</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref3.png" />
|
||||
<figcaption>
|
||||
By
|
||||
<a href="https://www.furaffinity.net/user/Marsel-Defender">
|
||||
Marsel-Defender
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref4.png" />
|
||||
<figcaption>
|
||||
By
|
||||
<a href="https://www.furaffinity.net/user/sirboburto">
|
||||
SirBoburto
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref5.jpeg" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/MuskyMuffin">SexMuffin</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref6.png" />
|
||||
<figcaption>
|
||||
By <a href="https://twitter.com/tehknuxlight">Knuxlight</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref7.png" />
|
||||
<figcaption>
|
||||
By
|
||||
<a href="https://www.furaffinity.net/user/shonuff44">ShoNuff44</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref8.jpeg" />
|
||||
<figcaption>
|
||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref9.jpeg" />
|
||||
<figcaption>
|
||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref10.png" />
|
||||
<figcaption>
|
||||
By <a href="https://www.furaffinity.net/user/j-cock">j-cock</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/muscle-ref/muscle-ref11.jpeg" />
|
||||
<figcaption>
|
||||
By
|
||||
<a href="https://www.furaffinity.net/user/Marsel-Defender">
|
||||
Marsel-Defender
|
||||
</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</gallery>
|
||||
|
||||
<h3 v-show="nsfw" id="penis">Penis</h3>
|
||||
|
|
@ -348,128 +345,91 @@
|
|||
|
||||
<h3>Casual Wear</h3>
|
||||
<gallery>
|
||||
<ul>
|
||||
<li>
|
||||
<img src="@img/clothes-ref/warm/tank-top.jpg" alt="Tank Top" />
|
||||
</li>
|
||||
<li>
|
||||
<img src="@img/clothes-ref/warm/shorts.jpg" alt="Shorts" />
|
||||
</li>
|
||||
<li>
|
||||
<img src="@img/clothes-ref/warm/hoodie.jpg" alt="Hoodie" />
|
||||
</li>
|
||||
<li>
|
||||
<img src="@img/clothes-ref/warm/sneakers.jpg" alt="Sneakers" />
|
||||
</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/warm/tank-top.jpg" alt="Tank Top" />
|
||||
<figcaption>Loose Tank Top</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/warm/shorts.jpg" alt="Shorts" />
|
||||
<figcaption>
|
||||
Short shorts (knee-long) with dangling bands
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/warm/hoodie.jpg" alt="Hoodie" />
|
||||
<figcaption>Sweater/Hoodie tied around waist</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/warm/sneakers.jpg" alt="Sneakers" />
|
||||
<figcaption>Sneakers (Air Jordan style)</figcaption>
|
||||
</figure>
|
||||
</gallery>
|
||||
|
||||
<div class="prose">
|
||||
<ul>
|
||||
<li>Loose Tank Top</li>
|
||||
<li>Short shorts (knee-long) with dangling bands</li>
|
||||
<li>Sweater/Hoodie tied around waist</li>
|
||||
<li>Sneakers (Air Jordan style)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3>Cold Weather</h3>
|
||||
<gallery>
|
||||
<ul>
|
||||
<li>
|
||||
<img src="@img/clothes-ref/cold/coat.jpg" alt="Coat" />
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/clothes-ref/cold/scarf.jpg"
|
||||
alt="Checkered scarf with short cords"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img src="@img/clothes-ref/cold/hoodie.jpg" alt="Hoodie" />
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/clothes-ref/cold/jeans.jpg"
|
||||
alt="Loose fit Jeans"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img src="@img/clothes-ref/cold/boots.jpg" alt="Boots" />
|
||||
</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/cold/coat.jpg" alt="Coat" />
|
||||
<figcaption>Coat</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/cold/scarf.jpg" alt="Scarf" />
|
||||
<figcaption>Checkered scarf with short cords</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/cold/hoodie.jpg" alt="Hoodie" />
|
||||
<figcaption>Hoodie</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/cold/jeans.jpg" alt="Jeans" />
|
||||
<figcaption>Loose fit Jeans</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/cold/boots.jpg" alt="Boots" />
|
||||
<figcaption>Boots</figcaption>
|
||||
</figure>
|
||||
</gallery>
|
||||
|
||||
<div class="prose">
|
||||
<ul>
|
||||
<li>Coat</li>
|
||||
<li>Checkered scarf with short cords</li>
|
||||
<li>Hoodie</li>
|
||||
<li>Loose fit Jeans</li>
|
||||
<li>Boots</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3>Workout</h3>
|
||||
<gallery>
|
||||
<ul>
|
||||
<li>
|
||||
<img
|
||||
src="@img/clothes-ref/workout/hoodie.jpg"
|
||||
alt="Sleeveless Hoodie (hood goes on)"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img src="@img/clothes-ref/workout/tank-top.jpg" alt="Tank Top" />
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/clothes-ref/workout/gloves.jpg"
|
||||
alt="Fingerless Gloves"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img
|
||||
src="@img/clothes-ref/workout/apple-watch.jpg"
|
||||
alt="Apple Watch (fitness tracking)"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<img src="@img/clothes-ref/workout/shorts.jpg" alt="Shorts" />
|
||||
</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/workout/hoodie.jpg" alt="Hoodie" />
|
||||
<figcaption>
|
||||
<strong>Either</strong> Sleeveless Hoodie (unzipped, hood on)
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/workout/tank-top.jpg" alt="Tank Top" />
|
||||
<figcaption><strong>Or</strong> Tank Top</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/workout/gloves.jpg" alt="Gloves" />
|
||||
<figcaption>Fingerless Gloves</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/workout/apple-watch.jpg" alt="Watch" />
|
||||
<figcaption>Apple Watch (for fitness tracking)</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/workout/shorts.jpg" alt="Shorts" />
|
||||
<figcaption>Short Shorts</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/warm/sneakers.jpg" alt="Sneakers" />
|
||||
<figcaption>Sneakers (Air Jordan style)</figcaption>
|
||||
</figure>
|
||||
</gallery>
|
||||
|
||||
<div class="prose">
|
||||
<ul>
|
||||
<li><strong>Either</strong> Sleeveless Hoodie (open, hood on)</li>
|
||||
<li><strong>Or</strong> Tank Top</li>
|
||||
<li>Fingerless Gloves</li>
|
||||
<li>Apple Watch (fitness tracking)</li>
|
||||
<li>Short Shorts</li>
|
||||
<li>(barefoot)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3>"Doesn't need to leave the house today" Style</h3>
|
||||
<gallery>
|
||||
<ul>
|
||||
<li>
|
||||
<img src="@img/clothes-ref/lazy/pants.jpg" alt="Tank Top" />
|
||||
</li>
|
||||
<li>
|
||||
<img src="@img/clothes-ref/lazy/undies.jpg" alt="Shorts" />
|
||||
</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/lazy/pants.jpg" alt="Tank Top" />
|
||||
<figcaption>Tracksuit pants (optional)</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="@img/clothes-ref/lazy/undies.jpg" alt="Shorts" />
|
||||
<figcaption>Topless w/ jockstrap/boxer briefs</figcaption>
|
||||
</figure>
|
||||
</gallery>
|
||||
|
||||
<div class="prose">
|
||||
<ul>
|
||||
<li>(topless)</li>
|
||||
<li>tracksuit pants (optional)</li>
|
||||
<li>Undies (jockstrap/boxer briefs)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="abilities">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,35 @@
|
|||
<template>
|
||||
<div class="gallery">
|
||||
<div class="gallery__bigimage">
|
||||
<figure class="gallery__imagecontainer">
|
||||
<img :src="bigImage" alt="" />
|
||||
<figcaption>
|
||||
{{ images.indexOf(bigImage) + 1 }} / {{ images.length }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
<div class="gallery__images">
|
||||
<a
|
||||
href="#"
|
||||
class="gallery__prev"
|
||||
@click.prevent="prev()"
|
||||
v-show="activeImage > 0"
|
||||
></a>
|
||||
<a
|
||||
href="#"
|
||||
class="gallery__next"
|
||||
@click.prevent="next()"
|
||||
v-show="activeImage < images.length - 1"
|
||||
></a>
|
||||
|
||||
<div class="gallery__viewport" :style="offset">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
|
||||
<nav class="gallery__navigation">
|
||||
<ul>
|
||||
<li v-for="(image, idx) in images" :key="idx">
|
||||
<a
|
||||
href="#"
|
||||
:class="{ active: activeImage === idx }"
|
||||
@click.prevent="setActive(idx)"
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -17,27 +38,33 @@ export default {
|
|||
name: "gallery",
|
||||
data() {
|
||||
return {
|
||||
bigImage: "",
|
||||
activeImage: 0,
|
||||
images: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
offset() {
|
||||
return `margin-left: -${this.activeImage * 100}vw`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setBigImage(index) {
|
||||
this.bigImage = this.images[index];
|
||||
setActive(index) {
|
||||
this.activeImage = index;
|
||||
},
|
||||
prev() {
|
||||
if (this.activeImage > 0) {
|
||||
this.activeImage -= 1;
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.activeImage < this.images.length - 1) {
|
||||
this.activeImage += 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const images = Array.from(this.$el.querySelectorAll("li img"));
|
||||
|
||||
images.forEach((img, idx) => {
|
||||
img.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
this.setBigImage(idx);
|
||||
});
|
||||
});
|
||||
|
||||
this.images = images.map(img => img.src);
|
||||
this.bigImage = images[0].src;
|
||||
const images = Array.from(this.$el.querySelectorAll("img"));
|
||||
this.images = images;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -47,86 +74,115 @@ export default {
|
|||
@import "@scss/_mixins.scss";
|
||||
|
||||
.gallery {
|
||||
margin: auto;
|
||||
&__prev,
|
||||
&__next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@include mq-desktop {
|
||||
max-width: 70em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
border: {
|
||||
top: 0.125em solid #fff;
|
||||
right: 0.125em solid #fff;
|
||||
}
|
||||
|
||||
@include mq-desktop {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&__bigimage {
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
&__prev {
|
||||
left: 1em;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
&__next {
|
||||
right: 1em;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&__images {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 50vh;
|
||||
|
||||
@include mq-desktop {
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: $copy-color-darkgrey;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__imagecontainer {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
&__viewport {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
box-shadow: inset 0 0 15em #000;
|
||||
|
||||
transition: 0.3s all ease-in-out;
|
||||
|
||||
figure {
|
||||
flex: 0 0 100%;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0 2em;
|
||||
|
||||
@include mq-desktop {
|
||||
padding: 0 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
align-self: center;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
max-height: 90%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(#000, 0.5);
|
||||
color: $copy-color;
|
||||
flex: 0 0 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&__navigation {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
height: 6.5em;
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
overflow-x: scroll;
|
||||
background-color: $copy-color-darkgrey;
|
||||
}
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 0 auto;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
ul {
|
||||
flex: 0 1 auto;
|
||||
|
||||
& + li {
|
||||
margin-left: 0.5em;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
|
||||
list-style: none;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
border: 0.25em solid #fff;
|
||||
align-self: center;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
li {
|
||||
flex: 0 1 auto;
|
||||
padding: 0.375em;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
border-radius: 1em;
|
||||
background: rgba(#fff, 0.5);
|
||||
|
||||
&.active {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue