SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: ♻️ update gallery component

Browse source
This commit is contained in:
Sebin Nyshkim 2020-12-21 18:12:42 +01:00
parent 057a493787
commit 0bdd7c1c61
2 changed files with 280 additions and 264 deletions
Download patch file Download diff file Expand all files Collapse all files

336
src/App.vue
View file

@ -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" /> <figcaption>Loose Tank Top</figcaption>
</li> </figure>
<li> <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
<img src="@img/clothes-ref/warm/hoodie.jpg" alt="Hoodie" /> </figcaption>
</li> </figure>
<li> <figure>
<img src="@img/clothes-ref/warm/sneakers.jpg" alt="Sneakers" /> <img src="@img/clothes-ref/warm/hoodie.jpg" alt="Hoodie" />
</li> <figcaption>Sweater/Hoodie tied around waist</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>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" /> <figcaption>Coat</figcaption>
</li> </figure>
<li> <figure>
<img <img src="@img/clothes-ref/cold/scarf.jpg" alt="Scarf" />
src="@img/clothes-ref/cold/scarf.jpg" <figcaption>Checkered scarf with short cords</figcaption>
alt="Checkered scarf with short cords" </figure>
/> <figure>
</li> <img src="@img/clothes-ref/cold/hoodie.jpg" alt="Hoodie" />
<li> <figcaption>Hoodie</figcaption>
<img src="@img/clothes-ref/cold/hoodie.jpg" alt="Hoodie" /> </figure>
</li> <figure>
<li> <img src="@img/clothes-ref/cold/jeans.jpg" alt="Jeans" />
<img <figcaption>Loose fit Jeans</figcaption>
src="@img/clothes-ref/cold/jeans.jpg" </figure>
alt="Loose fit Jeans" <figure>
/> <img src="@img/clothes-ref/cold/boots.jpg" alt="Boots" />
</li> <figcaption>Boots</figcaption>
<li> </figure>
<img src="@img/clothes-ref/cold/boots.jpg" alt="Boots" />
</li>
</ul>
</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" /> <figcaption><strong>Or</strong> Tank Top</figcaption>
</li> </figure>
<li> <figure>
<img <img src="@img/clothes-ref/workout/gloves.jpg" alt="Gloves" />
src="@img/clothes-ref/workout/gloves.jpg" <figcaption>Fingerless Gloves</figcaption>
alt="Fingerless Gloves" </figure>
/> <figure>
</li> <img src="@img/clothes-ref/workout/apple-watch.jpg" alt="Watch" />
<li> <figcaption>Apple Watch (for fitness tracking)</figcaption>
<img </figure>
src="@img/clothes-ref/workout/apple-watch.jpg" <figure>
alt="Apple Watch (fitness tracking)" <img src="@img/clothes-ref/workout/shorts.jpg" alt="Shorts" />
/> <figcaption>Short Shorts</figcaption>
</li> </figure>
<li> <figure>
<img src="@img/clothes-ref/workout/shorts.jpg" alt="Shorts" /> <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><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" /> <figcaption>Tracksuit pants (optional)</figcaption>
</li> </figure>
<li> <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">

208
src/components/Gallery.vue
View file

@ -1,14 +1,35 @@
<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>
<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> </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> </div>
</template> </template>
@ -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;
}
@include mq-desktop {
width: 1.5em;
height: 1.5em;
}
} }
&__bigimage { &__prev {
width: 100%; left: 1em;
height: 40vh; 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;
display: flex; transition: 0.3s all ease-in-out;
justify-content: center;
align-content: center; figure {
align-items: center; flex: 0 0 100%;
box-shadow: inset 0 0 15em #000;
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 100vw;
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;
list-style: none; flex-flow: row wrap;
height: 6.5em; justify-content: center;
margin: 0;
padding: 0.5em;
overflow-x: scroll;
background-color: $copy-color-darkgrey;
}
li { ul {
flex: 1 0 auto; flex: 0 1 auto;
text-align: center;
height: 100%;
max-width: 100%;
max-height: 100%;
& + li { display: flex;
margin-left: 0.5em; flex-flow: row wrap;
justify-content: center;
list-style: none;
margin: 1em 0;
padding: 0;
} }
img { li {
cursor: pointer; flex: 0 1 auto;
border: 0.25em solid #fff; padding: 0.375em;
align-self: center;
max-width: 100%; a {
max-height: 100%; display: block;
width: 0.5em;
height: 0.5em;
border-radius: 1em;
background: rgba(#fff, 0.5);
&.active {
background: #fff;
}
}
} }
} }
} }