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

refactor: migrate Home view

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-20 00:52:59 +01:00
parent 9ddc4e5a8c
commit 05b8e0c410
1 changed files with 43 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/views/Home.vue → src/views/HomeView.vue
View file

@ -1,5 +1,19 @@
<script setup lang="ts">
import { inject } from "vue";
import { isWarnKey, nsfwKey, showModalKey } from "@/keys";
import RefToggle from "@/components/RefToggle.vue";
import RefModal from "@/components/RefModal.vue";
import WelcomeHeader from "@/components/WelcomeHeader.vue";
import ButtonGroup from "@/components/ButtonGroup.vue";
import Button from "@/components/RefButton.vue";
const isNsfw = inject<boolean>(nsfwKey, false);
const isWarn = inject<boolean>(isWarnKey, false);
const showModal = inject<Function>(showModalKey, Function);
</script>
<template>
<nsfw-warning v-show="$root.isWarn">
<RefModal v-show="isWarn">
<template #heading>
⚠️⚠️⚠️<br />
Whoa, Nelly!
@ -12,14 +26,14 @@
<template #yes>Yes, show me the goods 👀</template>
<template #no>NO, STAHP 😱</template>
</nsfw-warning>
</RefModal>
<prose>
<welcome>
<template #main>Sebin Nyshkim</template>
<template #sub>Character Reference Page</template>
</welcome>
<WelcomeHeader>
<template #main>Sebin Nyshkim</template>
<template #sub>Character Reference Page</template>
</WelcomeHeader>
<section>
<h3>Welcome to Sebin's Ref Page</h3>
<p>
On this page your can learn all about Sebin, your friendly neighborhood
@ -33,17 +47,17 @@
feel free to reach out!
</p>
<ul>
<li>
<ul class="social">
<li class="twitter">
<a href="https://twitter.com/SebinNyshkim">Twitter</a>
</li>
<li>
<li class="mastodon">
<a href="https://meow.social/@SebinNyshkim" rel="me">Mastodon</a>
</li>
<li>
<li class="telegram">
<a href="https://t.me/SebinNyshkim">Telegram</a>
</li>
<li>
<li class="furaffinity">
<a href="https://www.furaffinity.net/user/sonofdragons">
Fur Affinity
</a>
@ -58,52 +72,23 @@
</blockquote>
<h3>Complete Ref Sheet</h3>
<p>Just here to fetch the ref sheet?</p>
<p>
Just here to fetch the ref sheet? Click the button with the ref sheet you
need and get started!
</p>
<div class="btn-group flex flex--row flex--wrap">
<btn href="/sebin-ref-full-SFW-hires.jpg">
Download <span v-if="$root.nsfw">SFW</span> Refsheet (10 MB) ⬇️
</btn>
<btn v-if="$root.nsfw" href="/sebin-ref-full-NSFW-hires.jpg">
Download NSFW Refsheet (10,2 MB) ⬇️
</btn>
</div>
<ButtonGroup>
<Button href="./sebin-ref-full-SFW-hires.jpg">
<template v-if="isNsfw">SFW</template> Refsheet (3,3 MB) ⬇️
</Button>
<Button v-if="isNsfw" href="./sebin-ref-full-NSFW-hires.jpg">
NSFW Refsheet (3,4 MB) ⬇️
</Button>
</ButtonGroup>
<nsfw-switch
id="nsfw-switch"
v-model="$root.nsfw"
@change="$root.showWarning()"
/>
</prose>
<RefToggle id="nsfw-home" v-model="isNsfw" @click.prevent="showModal()">
<template #off>😇</template>
<template #on>😈</template>
</RefToggle>
</section>
</template>
<script>
import Prose from "@/components/Prose.vue";
import Welcome from "@/components/Welcome.vue";
import btn from "@/components/Button.vue";
import NsfwSwitch from "@/components/NsfwSwitch.vue";
import NsfwWarning from "@/components/NsfwWarning.vue";
export default {
name: "Home",
components: { Prose, Welcome, btn, NsfwSwitch, NsfwWarning },
};
</script>
<style lang="scss">
@import "@/scss/_mixins.scss";
.btn-group {
justify-content: space-evenly;
.btn {
flex: 1 0 100%;
margin: 1em 0;
@include mq-desktop {
flex: 0 0 auto;
}
}
}
</style>