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

feat: ✨ introduce quick facts component

Browse source
This commit is contained in:
Sebin Nyshkim 2020-12-06 01:24:46 +01:00
parent 72e5323c63
commit 446a61795c
2 changed files with 137 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

105
src/App.vue
View file

@ -17,8 +17,16 @@
<ref-figure> <ref-figure>
<template v-slot:img> <template v-slot:img>
<div> <div>
<img v-if="!nsfw" src="@img/fullbody-ref-SFW.jpg" alt="Sebin Full Body Ref" /> <img
<img v-if="nsfw" src="@img/fullbody-ref-NSFW.jpg" alt="Sebin Full Body Ref" /> v-if="nsfw"
src="@img/sebin-ref-body-NSFW.png"
alt="Sebin Full Body Ref"
/>
<img
v-else
src="@img/sebin-ref-body-SFW.png"
alt="Sebin Full Body Ref"
/>
</div> </div>
</template> </template>
<template v-slot:caption> <template v-slot:caption>
@ -34,7 +42,7 @@
<data-table class="prose" :dataset="getSebinData.colors" /> <data-table class="prose" :dataset="getSebinData.colors" />
<div class="prose"> <div class="prose">
<div class="tldr"> <quick-facts>
<ul> <ul>
<li>Bipedal plantigrade</li> <li>Bipedal plantigrade</li>
<li> <li>
@ -46,7 +54,8 @@
<li>Brown spikes running over back and top-side of tail</li> <li>Brown spikes running over back and top-side of tail</li>
<li>Tail about 1 meter in length</li> <li>Tail about 1 meter in length</li>
</ul> </ul>
</div> </quick-facts>
<p> <p>
Sebin is a bipedal plantigrade. His body is mostly covered by red Sebin is a bipedal plantigrade. His body is mostly covered by red
scales with yellow chest plates running from below his chin over his scales with yellow chest plates running from below his chin over his
@ -59,14 +68,15 @@
<h3 id="wings">Wings</h3> <h3 id="wings">Wings</h3>
<div class="prose"> <div class="prose">
<div class="tldr"> <quick-facts>
<ul> <ul>
<li>Wingspan 3-4 meters</li> <li>Wingspan 3-4 meters</li>
<li>Closed when on the ground</li> <li>Closed when on the ground</li>
<li>Function like a second pair of arms</li> <li>Function like a second pair of arms</li>
<li>Pointy talon on end of "hand"</li> <li>Pointy talon on end of "hand"</li>
</ul> </ul>
</div> </quick-facts>
<p> <p>
His wing span is around 3-4 meters. He has them closed when on the His wing span is around 3-4 meters. He has them closed when on the
ground. His wings function like a second pair of arms, at which ends ground. His wings function like a second pair of arms, at which ends
@ -83,43 +93,11 @@
<template v-slot:img> <template v-slot:img>
<div> <div>
<img <img
src="@img/sebin-hairstyle-short.jpg" src="@img/sebin-ref-expressions.png"
alt="Sebin with short hair" alt="Sebin's Expressions"
/> />
</div> </div>
</template> </template>
<template v-slot:caption>
<label>Sebin with short hair</label>
</template>
<template v-slot:copyright>
<a href="https://twitter.com/LeoboArt">
LeoboArt
</a>
</template>
</ref-figure>
<div class="prose">
<div class="tldr">
<ul>
<li>
Round pupils, green iris. Yellow spikes on cheeks, as well as
for eyebrows
</li>
<li>Black horns with slight curve downwards</li>
<li>Blue hair, different styles; short style preferred</li>
<li>Long, pointy, movable ears</li>
<li>Very sharp teeth</li>
<li>Tongue with pointy tip</li>
</ul>
</div>
</div>
<ref-figure>
<template v-slot:img>
<div>
<img src="@img/expressions-ref.jpg" alt="Sebin's Expressions" />
</div>
</template>
<template v-slot:caption> <template v-slot:caption>
<label>Sebin's Expressions</label> <label>Sebin's Expressions</label>
</template> </template>
@ -131,6 +109,20 @@
</ref-figure> </ref-figure>
<div class="prose"> <div class="prose">
<quick-facts>
<ul>
<li>
Round pupils, green iris. Yellow spikes on cheeks, as well as
for eyebrows
</li>
<li>Black horns with slight curve downwards</li>
<li>Blue hair, different styles; short style preferred</li>
<li>Long, pointy, movable ears</li>
<li>Very sharp teeth</li>
<li>Tongue with pointy tip</li>
</ul>
</quick-facts>
<p> <p>
He has round pupils instead of the slit ones typical for reptilians. He has round pupils instead of the slit ones typical for reptilians.
He has short yellow spikes above his eyes that resemble eyebrows, as He has short yellow spikes above his eyes that resemble eyebrows, as
@ -146,7 +138,7 @@
<h3 id="upperbody">Upper Body</h3> <h3 id="upperbody">Upper Body</h3>
<div class="prose"> <div class="prose">
<div class="tldr"> <quick-facts>
<ul> <ul>
<li>Strong upper body, lush pecs, defined abs, black nipples</li> <li>Strong upper body, lush pecs, defined abs, black nipples</li>
<li> <li>
@ -154,7 +146,8 @@
preference towards body builder preference towards body builder
</li> </li>
</ul> </ul>
</div> </quick-facts>
<p> <p>
Sebin started working out at the age of 17. Being in top shape is Sebin started working out at the age of 17. Being in top shape is
very important to him. His favorite workouts are weight-lifting very important to him. His favorite workouts are weight-lifting
@ -197,9 +190,11 @@
<h3>Additional Muscle References</h3> <h3>Additional Muscle References</h3>
<div class="prose" v-show="!nsfw"> <div class="prose" v-show="!nsfw">
<p class="nsfw-bar"> <p class="nsfw-bar">
<strong>
Some of these additional references are NSFW. Click Some of these additional references are NSFW. Click
<a href="#" @click.prevent="nsfw = !nsfw">here</a> to enable NSFW <a href="#" @click.prevent="nsfw = !nsfw">here</a> to enable NSFW
mode. mode.
</strong>
</p> </p>
</div> </div>
<gallery v-show="nsfw"> <gallery v-show="nsfw">
@ -288,7 +283,7 @@
<ref-figure v-show="nsfw"> <ref-figure v-show="nsfw">
<template v-slot:img> <template v-slot:img>
<div> <div>
<img src="@img/penis-ref.jpg" alt="Sebin's manly parts" /> <img src="@img/sebin-ref-penis.png" alt="Sebin's manly parts" />
</div> </div>
</template> </template>
<template v-slot:caption> <template v-slot:caption>
@ -304,7 +299,7 @@
<data-table class="prose" v-show="nsfw" :dataset="getSebinData.penis" /> <data-table class="prose" v-show="nsfw" :dataset="getSebinData.penis" />
<div class="prose" v-show="nsfw"> <div class="prose" v-show="nsfw">
<div class="tldr"> <quick-facts>
<ul> <ul>
<li>Human-shaped with ridges</li> <li>Human-shaped with ridges</li>
<li>Ring-like sheath surrounding shaft</li> <li>Ring-like sheath surrounding shaft</li>
@ -314,7 +309,8 @@
</li> </li>
<li>External balls</li> <li>External balls</li>
</ul> </ul>
</div> </quick-facts>
<p> <p>
Despite his majorly reptilian appearance he has nipples, a feature Despite his majorly reptilian appearance he has nipples, a feature
of the human side of his family, which also shows with his external of the human side of his family, which also shows with his external
@ -626,6 +622,7 @@
</template> </template>
<script> <script>
import QuickFacts from "@components/QuickFacts.vue";
import DataTable from "@components/DataTable.vue"; import DataTable from "@components/DataTable.vue";
import Gallery from "@components/Gallery.vue"; import Gallery from "@components/Gallery.vue";
import RefFigure from "@components/Figure.vue"; import RefFigure from "@components/Figure.vue";
@ -638,6 +635,7 @@ import Helper from "@mixins/Helper.js";
export default { export default {
name: "app", name: "app",
components: { components: {
QuickFacts,
DataTable, DataTable,
Gallery, Gallery,
RefFigure, RefFigure,
@ -699,7 +697,8 @@ main {
@include mq-mobile { @include mq-mobile {
h2, h2,
h3, h3,
p { p,
.quickfacts {
margin-left: 1rem; margin-left: 1rem;
margin-right: 1rem; margin-right: 1rem;
} }
@ -715,18 +714,4 @@ section {
border-bottom: 0.125em $copy-color dotted; border-bottom: 0.125em $copy-color dotted;
} }
} }
.tldr {
font-style: italic;
background-color: rgba($bg-color-light, 0.25);
margin: 1em auto;
border-left: 0.25em solid $bg-color-light;
padding: 1em;
&:before {
display: block;
content: "tl;dr";
margin-bottom: 1em;
}
}
</style> </style>

89
src/components/QuickFacts.vue Normal file
View file

@ -0,0 +1,89 @@
<template>
<div class="quickfacts" :class="{ open: isExpanded }">
<h3 class="quickfacts__head" @click.prevent="toggle">Quickfacts</h3>
<div class="quickfacts__list">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isExpanded: false
};
},
methods: {
toggle() {
this.isExpanded = !this.isExpanded;
}
}
};
</script>
<style lang="scss">
@import "@scss/base.scss";
.quickfacts {
border-radius: 1em;
overflow: hidden;
margin: 1em 0;
position: relative;
&:before {
position: absolute;
content: "";
display: block;
top: 1em;
right: 1em;
transform: rotate(180deg);
transition: 0.3s all ease-in-out;
border: {
right: 0.75em solid transparent;
bottom: 0.75em solid #fff;
left: 0.75em solid transparent;
}
}
&.open {
.quickfacts__head {
background-color: $bg-color-light;
}
.quickfacts__list {
max-height: 17em;
padding: 1.5rem;
}
&:before {
transform: rotate(0deg);
}
}
&__head {
background-color: $bg-color-dark;
margin: 0;
border: 0;
padding: 0.75rem 1.5rem;
transition: 0.3s all ease-in-out;
cursor: pointer;
}
&__list {
background-color: rgba($bg-color-dark, 0.5);
max-height: 0em;
padding: 0 1.5rem;
transition: 0.3s all ease-in-out;
ul {
margin: 0;
padding-left: 1.25em;
}
}
}
</style>