From ce817e59f188b9f6081fa26e33f94b6202a25d18 Mon Sep 17 00:00:00 2001
From: Marcus Mietz <marcus.mietz@arsmedium.com>
Date: Wed, 26 Aug 2020 19:12:00 +0200
Subject: [PATCH] refactor: :recycle: split up App.vue into separate components

---
 src/components/DataTable.vue  |  89 +++++++++-------
 src/components/Figure.vue     |  47 +++++++++
 src/components/Footer.vue     |  63 ++++++++++++
 src/components/Gallery.vue    | 189 +++++++++++++++-------------------
 src/components/Header.vue     | 125 ++++++++++++++++++++++
 src/components/Navbar.vue     | 141 +++++++++++++++++++++++++
 src/components/NsfwSwitch.vue | 112 ++++++++++++++++++++
 src/components/RichFigure.vue |  96 -----------------
 8 files changed, 624 insertions(+), 238 deletions(-)
 create mode 100644 src/components/Figure.vue
 create mode 100644 src/components/Footer.vue
 create mode 100644 src/components/Header.vue
 create mode 100644 src/components/Navbar.vue
 create mode 100644 src/components/NsfwSwitch.vue
 delete mode 100644 src/components/RichFigure.vue

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index d0e34aa..537706c 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -1,25 +1,31 @@
 <template>
-  <table>
-    <thead>
-      <tr>
-        <template v-for="header in dataset.headers">
-          <th :key="header">{{ header }}</th>
-        </template>
+  <table class="datatable">
+    <thead class="datatable__head">
+      <tr class="datatable__row datatable__row--head">
+        <th
+          class="datatable__heading"
+          v-for="(header, idx) in dataset.headers"
+          :key="idx"
+        >
+          {{ header }}
+        </th>
       </tr>
     </thead>
-    <tbody>
-      <tr v-for="(tuple, row) in dataset.data" :key="row">
-        <template v-for="(item, col) in tuple">
-          <td :key="col" v-if="col === 1 && !isHexValue(item)" colspan="2">
-            {{ item }}
-          </td>
-          <td :key="item[0]" v-else>{{ item }}</td>
-          <td
-            v-if="isHexValue(item)"
-            :key="item[1]"
-            :style="'background-color:' + item"
-          ></td>
-        </template>
+    <tbody class="datatable__body">
+      <tr class="datatable__row" v-for="(row, idx) in dataset.data" :key="idx">
+        <td
+          class="datatable__cell"
+          v-for="(cell, idx) in row"
+          :key="idx"
+          :colspan="idx === 1 && !isHexValue(row[1]) ? 2 : 1"
+        >
+          {{ cell }}
+        </td>
+        <td
+          v-if="isHexValue(row[1])"
+          class="datatable__cell--colorpick"
+          :style="`background-color: ${row[1]}`"
+        ></td>
       </tr>
     </tbody>
   </table>
@@ -42,39 +48,48 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-table {
+<style lang="scss">
+@import "@scss/_variables.scss";
+
+.datatable {
   border-collapse: collapse;
   width: 100%;
 
-  th,
-  td {
+  &__heading,
+  &__cell {
     padding: 0.25em 0.5em;
 
     @media (min-width: 35em) {
       padding: 0.5em 1em;
     }
   }
-}
 
-thead {
-  tr {
-    background-color: #3f4c6b;
-    color: #fff;
-  }
-}
+  &__body {
+    .datatable__row {
+      background-color: rgba($bg-color-dark, 0.7);
 
-tbody {
-  tr {
-    background-color: #fff;
+      &:nth-child(odd) {
+        background-color: rgba(lighten($bg-color-dark, 20%), 0.7);
+      }
+    }
   }
 
-  tr:nth-child(odd) {
-    background-color: #e1e1e1;
+  &__row {
+    &--head {
+      background-color: $bg-color-light;
+      color: $copy-color;
+    }
   }
 
-  td:first-child {
-    text-align: right;
+  &__cell {
+    &:first-child {
+      text-align: right;
+    }
+
+    &--colorpick {
+      margin-top: 0.1em;
+      border: 0.1em solid #fff;
+    }
   }
 }
 </style>
diff --git a/src/components/Figure.vue b/src/components/Figure.vue
new file mode 100644
index 0000000..7a3ef22
--- /dev/null
+++ b/src/components/Figure.vue
@@ -0,0 +1,47 @@
+<template>
+  <figure class="figure">
+    <slot name="img"></slot>
+    <figcaption class="figure__meta">
+      <slot name="caption"></slot>
+      <slot name="copyright"></slot>
+    </figcaption>
+  </figure>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss">
+@import "@scss/_variables.scss";
+
+.figure {
+  margin: 1em 0;
+
+  &__meta {
+    text-align: center;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+  }
+
+  label,
+  a {
+    font-size: 0.8em;
+    font-style: italic;
+    color: $copy-color;
+  }
+
+  label:after {
+    display: inline;
+    content: " ";
+  }
+
+  a:before {
+    display: inline;
+    content: "©";
+  }
+}
+</style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..41bbe25
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,63 @@
+<template>
+  <footer class="footer">
+    <div class="footer__copyright">
+      © {{ new Date().getFullYear() }} Sebin Nyshkim
+    </div>
+    <ul class="footer__linklist">
+      <li class="footer__linkitem" v-for="(link, idx) in links" :key="idx">
+        <a :href="link.href" class="footer__link">
+          {{ link.text }}
+        </a>
+      </li>
+    </ul>
+  </footer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      links: [
+        { href: "https://twitter.com/SebinNyshkim", text: "Twitter" },
+        { href: "https://t.me/SebinNyshkim", text: "Telegram" },
+        {
+          href: "https://www.furaffinity.net/user/sonofdragons",
+          text: "Fur Affinity"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@scss/_variables.scss";
+
+.footer {
+  background-color: $bg-color-light;
+  padding: 0.5em 0;
+  text-align: center;
+
+  &__copyright {
+    margin: 0;
+  }
+
+  &__linklist {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+  }
+
+  &__linkitem {
+  }
+
+  &__link {
+    color: $copy-color;
+    padding: 0.5em 0.75em;
+  }
+}
+</style>
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index 032f8fb..b42d625 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -1,37 +1,24 @@
 <template>
   <div class="gallery">
-    <div class="big-image">
-      <figure class="image-container">
+    <div class="gallery__bigimage">
+      <figure class="gallery__imagecontainer">
         <img :src="bigImage" alt="" />
         <figcaption>
           {{ images.indexOf(bigImage) + 1 }} / {{ images.length }}
         </figcaption>
       </figure>
     </div>
-    <ul class="thumbnails">
-      <li class="thumbnail" v-for="(img, index) in images" :key="index">
-        <img
-          :src="img"
-          :alt="'Image' + index"
-          @click.prevent="setBigImage(index)"
-        />
-      </li>
-    </ul>
+    <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
   name: "gallery",
-  props: {
-    images: {
-      type: Array,
-      required: true
-    }
-  },
   data() {
     return {
-      bigImage: ""
+      bigImage: "",
+      images: []
     };
   },
   methods: {
@@ -40,108 +27,100 @@ export default {
     }
   },
   mounted() {
-    this.bigImage = this.images[0];
+    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;
   }
 };
 </script>
 
-<style lang="scss" scoped>
-.big-image {
-  width: 100%;
-  height: 40vh;
+<style lang="scss">
+@import "@scss/_variables.scss";
 
-  @media (min-width: 35em) {
-    height: 30em;
+.gallery {
+  &__bigimage {
+    width: 100%;
+    height: 40vh;
+
+    @media (min-width: 35em) {
+      height: 30em;
+    }
+
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+
+    background-color: $copy-color-darkgrey;
+
+    overflow: hidden;
   }
 
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
+  &__imagecontainer {
+    position: relative;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    box-shadow: inset 0 0 15em #000;
 
-  background-color: #444;
+    img {
+      align-self: center;
+      max-width: 100%;
+      max-height: 100%;
+    }
 
-  overflow: hidden;
-}
-
-.image-container {
-  position: relative;
-
-  margin: 0;
-
-  width: 100%;
-  height: 100%;
-
-  flex: 1;
-
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-
-  box-shadow: inset 0 0 15em #000;
-
-  img {
-    align-self: center;
-
-    max-width: 100%;
-    max-height: 100%;
+    figcaption {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba(#000, 0.5);
+      color: $copy-color;
+      text-align: center;
+    }
   }
 
-  figcaption {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+  ul {
+    display: flex;
+    list-style: none;
+    height: 6.5em;
+    margin: 0;
+    padding: 0.5em;
+    overflow-x: scroll;
+    background-color: $copy-color-darkgrey;
+  }
 
-    background-color: rgba(#000, 0.5);
-    color: #fff;
+  li {
+    flex: 1 0 auto;
     text-align: center;
-  }
-}
-
-.thumbnails {
-  display: flex;
-  align-content: center;
-  align-items: center;
-
-  height: 6.5em;
-
-  padding: 0.5em;
-
-  overflow-x: scroll;
-
-  background-color: #888;
-}
-
-.thumbnail {
-  flex: 1 0 auto;
-
-  height: 100%;
-
-  max-width: 100%;
-  max-height: 100%;
-
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-
-  & + .thumbnail {
-    margin-left: 0.5em;
-  }
-
-  img {
-    cursor: pointer;
-
-    box-sizing: border-box;
-
-    border: 0.25em solid #fff;
-
-    align-self: center;
-
+    height: 100%;
     max-width: 100%;
     max-height: 100%;
+
+    & + li {
+      margin-left: 0.5em;
+    }
+
+    img {
+      cursor: pointer;
+      border: 0.25em solid #fff;
+      align-self: center;
+      max-width: 100%;
+      max-height: 100%;
+    }
   }
 }
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..1547760
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,125 @@
+<template>
+  <header>
+    <div class="nsfw-bar">
+      <div class="nsfw-bar__content">
+        <div>
+          This Page contains materials considered NSFW. Do you wish to see such
+          content?
+        </div>
+        <nsfw-switch />
+      </div>
+    </div>
+
+    <div class="header flex flex--row flex--wrap flex--center flex--center-v">
+      <div class="header__image-container col col-m-6 col-3">
+        <img
+          class="header__image"
+          src="@img/sebin-smug-icon.png"
+          alt="Sebin Avatar"
+        />
+      </div>
+      <div class="header__headings col col-m-12 col-7">
+        <h1 class="header__main-heading">{{ mainHeading }}</h1>
+        <h2 class="header__sub-heading">{{ subHeading }}</h2>
+      </div>
+    </div>
+
+    <ref-navbar :navlinks="navlinks" />
+  </header>
+</template>
+
+<script>
+import NsfwSwitch from "@components/NsfwSwitch.vue";
+import RefNavbar from "@components/Navbar.vue";
+
+export default {
+  props: {
+    mainHeading: String,
+    subHeading: String
+  },
+  data() {
+    return {
+      navlinks: [
+        { href: "#general", label: "General", nsfw: false },
+        { href: "#anatomy", label: "Anatomy", nsfw: false },
+        { href: "#wings", label: "Wings", nsfw: false },
+        { href: "#head", label: "Head", nsfw: false },
+        { href: "#upperbody", label: "Upper Body", nsfw: false },
+        { href: "#penis", label: "Penis", nsfw: true },
+        { href: "#clothes", label: "Clothing Styles", nsfw: false },
+        { href: "#abilities", label: "Abilities", nsfw: false }
+      ]
+    };
+  },
+  components: {
+    NsfwSwitch,
+    RefNavbar
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@scss/_variables.scss";
+
+header {
+  background-color: $bg-color-dark;
+}
+
+.header {
+  max-width: 40em;
+  margin: 1em auto;
+
+  &__image {
+    width: 100%;
+    border-radius: 100%;
+    border: 0.375em solid #fff;
+    box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
+  }
+
+  &__main-heading,
+  &__sub-heading {
+    font-family: "Exo", sans-serif;
+    margin: 1rem 0;
+    text-align: center;
+  }
+
+  &__main-heading {
+    font-size: 2.125em;
+    font-weight: 900;
+    font-style: italic;
+
+    @media (min-width: 35em) {
+      font-size: 2.75em;
+    }
+  }
+
+  &__sub-heading {
+    font-size: 1em;
+    font-weight: 300;
+    font-style: italic;
+  }
+}
+
+.nsfw-bar {
+  background-color: $bg-color-light;
+  padding: 0.5em;
+
+  &__content {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    max-width: 40rem;
+    margin: auto;
+
+    div {
+      flex: 1 1 auto;
+      text-align: center;
+    }
+
+    label {
+      flex: 0 0 5em;
+    }
+  }
+}
+</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..f4285cc
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,141 @@
+<template>
+  <nav class="nav" :class="{ 'nav--fixed': isFixed }" ref="nav">
+    <ul class="nav__list flex flex--row flex--nowrap flex--center-v">
+      <template v-for="(item, id) in navlinks">
+        <li class="nav__item" :key="id" v-show="isNsfw(item.nsfw)">
+          <a class="nav__link" href="#" v-scroll-to="item.href">
+            {{ item.label }}
+          </a>
+          <div class="nav__underline"></div>
+        </li>
+      </template>
+    </ul>
+  </nav>
+</template>
+
+<script>
+import throttle from "lodash/throttle";
+import debounce from "lodash/debounce";
+
+export default {
+  props: {
+    navlinks: Array
+  },
+  data() {
+    return {
+      isFixed: false,
+      offsetTop: null
+    };
+  },
+  methods: {
+    setOffsetTop() {
+      this.offsetTop = this.$el.offsetTop;
+      this.$el.style.height = `${this.$refs.nav.scrollHeight}px`;
+    },
+    checkIsFixed() {
+      this.isFixed = this.offsetTop < window.scrollY;
+    },
+    isNsfw(item) {
+      if (this.$parent.$parent.nsfw) {
+        return true;
+      } else {
+        return this.$parent.$parent.nsfw === item;
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener(
+      "scroll",
+      throttle(() => {
+        if (!this.offsetTop) {
+          this.setOffsetTop();
+        }
+        this.checkIsFixed();
+      }, 50)
+    );
+    window.addEventListener(
+      "resize",
+      debounce(() => {
+        this.setOffsetTop();
+        this.checkIsFixed();
+      }, 100)
+    );
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@scss/base.scss";
+
+.nav {
+  &--fixed .nav__list {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+.nav__list {
+  background-color: $bg-color-light;
+
+  margin: 0;
+  padding: 0;
+
+  list-style-type: none;
+
+  // box-shadow: 0em 0.75em 1.25em -1em #444;
+  z-index: 1;
+
+  overflow: auto;
+  width: 100%;
+
+  @include mq-desktop {
+    justify-content: center;
+  }
+}
+
+.nav__item {
+  padding: 0.5em 0.5em;
+  white-space: nowrap;
+}
+
+.nav__link {
+  color: $copy-color;
+  display: block;
+  margin-bottom: 0.25em;
+  text-decoration: none;
+
+  &:hover ~ .nav__underline {
+    &::before,
+    &::after {
+      width: 50%;
+    }
+  }
+}
+
+.nav__underline {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0.125em;
+    background-color: $copy-color;
+    bottom: 0;
+    transition: all 0.2s ease-in-out;
+  }
+
+  &::before {
+    left: 50%;
+  }
+
+  &::after {
+    right: 50%;
+  }
+}
+</style>
diff --git a/src/components/NsfwSwitch.vue b/src/components/NsfwSwitch.vue
new file mode 100644
index 0000000..c3b3557
--- /dev/null
+++ b/src/components/NsfwSwitch.vue
@@ -0,0 +1,112 @@
+<template>
+  <label class="nsfw-switch" for="nsfw-switch">
+    <div>😇</div>
+    <div class="toggle-wrap">
+      <input
+        v-model="$parent.$parent.nsfw"
+        type="checkbox"
+        name="nsfw"
+        id="nsfw-switch"
+      />
+      <div class="toggle"></div>
+    </div>
+    <div>😈</div>
+  </label>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss">
+.nsfw-switch {
+  font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",
+    "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
+    "segoe ui symbol";
+
+  padding: 0.5em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+
+  > div {
+    flex: 0 1 33%;
+    align-self: center;
+    line-height: 1;
+    text-align: center;
+  }
+
+  .toggle-wrap {
+    margin: 0 0.5em;
+  }
+
+  .toggle {
+    position: relative;
+    display: inline-block;
+    width: 46px;
+    height: 26px;
+    background-color: #e6e6e6;
+    border-radius: 23px;
+    vertical-align: text-bottom;
+    transition: all 0.3s linear;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      width: 42px;
+      height: 22px;
+      background-color: #fff;
+      border-radius: 11px;
+      transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
+      transition: all 0.25s linear;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      width: 22px;
+      height: 22px;
+      background-color: #fff;
+      border-radius: 11px;
+      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
+      transform: translate3d(2px, 2px, 0);
+      transition: all 0.2s ease-in-out;
+    }
+  }
+
+  &:active {
+    .toggle::after {
+      width: 28px;
+      transform: translate3d(2px, 2px, 0);
+    }
+
+    input {
+      &:checked + .toggle::after {
+        transform: translate3d(16px, 2px, 0);
+      }
+    }
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+
+    &:checked + .toggle {
+      background-color: #4bd763;
+
+      &::before {
+        transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
+      }
+
+      &::after {
+        transform: translate3d(22px, 2px, 0);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/RichFigure.vue b/src/components/RichFigure.vue
deleted file mode 100644
index d83ddbe..0000000
--- a/src/components/RichFigure.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <figure :class="[{ float: imgPos }, imgPos]">
-    <img :src="imgSrc" :alt="caption" />
-    <figcaption>
-      <div class="caption">{{ caption }}</div>
-      <div class="copyright">
-        By <a :href="getLink(copyright)[0]">{{ getLink(copyright)[1] }}</a>
-      </div>
-    </figcaption>
-  </figure>
-</template>
-
-<script>
-export default {
-  name: "rich-figure",
-  props: {
-    imgSrc: {
-      type: String,
-      required: true
-    },
-    caption: {
-      type: String,
-      required: true
-    },
-    copyright: {
-      type: String,
-      required: true
-    },
-    imgPos: String,
-    imgW: String
-  },
-  methods: {
-    getLink(username) {
-      if (username.match(/^(@)?([a-z0-9_]{1,30})$/i))
-        return this.formatTwitter(username);
-      if (username.match(/^(FA:)/)) return this.formatFuraffinity(username);
-    },
-    formatFuraffinity: username => {
-      let user = username.slice(3);
-      return [`https://www.furaffnity.net/user/${user}`, user];
-    },
-    formatTwitter: username => {
-      let user = username.slice(1);
-      return [`https://twitter.com/${user}`, username];
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-figure {
-  position: relative;
-  overflow: hidden;
-  margin: 0;
-  line-height: 1;
-
-  figcaption {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    line-height: 1.5;
-    background: rgba(#000, 0.5);
-    color: #fff;
-    text-align: center;
-  }
-
-  a {
-    color: #fff;
-  }
-
-  img {
-    display: block;
-    width: 100%;
-  }
-}
-
-.float {
-  width: 100%;
-
-  @media (min-width: 35em) {
-    width: 20em;
-
-    &.left {
-      float: left;
-      margin: 0 0.75em 0.375em 0;
-    }
-
-    &.right {
-      float: right;
-      margin: 0 0 0.375em 0.75em;
-    }
-  }
-}
-</style>