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