[WIP] Rework design (#34)

* WIP: Redesign the default layout * Merge old & new default layouts * Fix login logic; add proper user controls dropdown * Fix latest version listing (#31) (#32) Co-authored-by: Aeledfyr <45501007+Aeledfyr@users.noreply.github.com> * First pass of design cleanup * Improve ad integration and fix light theme * Begin splitting up variables, change some styling to new mockup * Continue redesign progress * Work on some more pages * Add missing dark theme variables for text * Continue working on modularizing * Continue progress, redo pagination * Fix auth buttons in navbar layout * Continue progress * Continue progress more * Redo ModResult * Scope ModPage :irritater: * Continue Dashboard * Continue progress on Dashboard and cleanup * Add missing variables for dark theme * Small tweaks, cleanup, and continue mod page progress * Fix user not being able to see hidden mods that they own * Start reworking mod creation * Continue revamp of mod creation page * Yank v-html out * Hotfix markdown rendering and some spacing issues * Move legal; continue with mod creation; create reusable footer * Create README.md * Update README.md * Update README.md * Add in basic usage instructions * Fix some stuff * Continue with mod creation; fix some CSS errors * Start user page * Start transition to vue-select; fix a few bugs * Continue mod creation page * Finish mod pages * Add very raw version editing * Mod editing + creation * Fixed versions that were in processing causing a 404 (#39) Co-authored-by: Mikhail Oleynikov <falseresync@gmail.com> Co-authored-by: Aeledfyr <45501007+Aeledfyr@users.noreply.github.com> Co-authored-by: Jai A <jai.a@tuta.io> Co-authored-by: MulverineX <mulverin3@gmail.com> Co-authored-by: diabolical17 <calumproh28@gmail.com> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
2020-11-30 13:55:01 -08:00
parent e025df0824
commit 7b84d8c3d5
70 changed files with 10339 additions and 3284 deletions
@@ -0,0 +1,132 @@
+<template>
+  <div class="categories">
+    <p v-if="categories.includes('fabric')">
+      <FabricLoader />
+      Fabric
+    </p>
+    <p v-if="categories.includes('forge')">
+      <ForgeLoader />
+      Forge
+    </p>
+    <p v-if="categories.includes('technology')">
+      <TechCategory />
+      Technology
+    </p>
+    <p v-if="categories.includes('adventure')">
+      <AdventureCategory />
+      Adventure
+    </p>
+    <p v-if="categories.includes('magic')">
+      <MagicCategory />
+      Magic
+    </p>
+    <p v-if="categories.includes('utility')">
+      <UtilityCategory />
+      Utility
+    </p>
+    <p v-if="categories.includes('decoration')">
+      <DecorationCategory />
+      Decoration
+    </p>
+    <p v-if="categories.includes('library')">
+      <LibraryCategory />
+      Library
+    </p>
+    <p v-if="categories.includes('cursed')">
+      <CursedCategory />
+      Cursed
+    </p>
+    <p v-if="categories.includes('worldgen')">
+      <WorldGenCategory />
+      Worldgen
+    </p>
+    <p v-if="categories.includes('storage')">
+      <StorageCategory />
+      Storage
+    </p>
+    <p v-if="categories.includes('food')">
+      <FoodCategory />
+      Food
+    </p>
+    <p v-if="categories.includes('equipment')">
+      <EquipmentCategory />
+      Equipment
+    </p>
+    <p v-if="categories.includes('misc')">
+      <MiscCategory />
+      Misc
+    </p>
+  </div>
+</template>
+
+<script>
+import TechCategory from '~/assets/images/categories/tech.svg?inline'
+import AdventureCategory from '~/assets/images/categories/adventure.svg?inline'
+import CursedCategory from '~/assets/images/categories/cursed.svg?inline'
+import DecorationCategory from '~/assets/images/categories/decoration.svg?inline'
+import EquipmentCategory from '~/assets/images/categories/equipment.svg?inline'
+import FoodCategory from '~/assets/images/categories/food.svg?inline'
+import LibraryCategory from '~/assets/images/categories/library.svg?inline'
+import MagicCategory from '~/assets/images/categories/magic.svg?inline'
+import MiscCategory from '~/assets/images/categories/misc.svg?inline'
+import StorageCategory from '~/assets/images/categories/storage.svg?inline'
+import UtilityCategory from '~/assets/images/categories/utility.svg?inline'
+import WorldGenCategory from '~/assets/images/categories/worldgen.svg?inline'
+
+import ForgeLoader from '~/assets/images/categories/forge.svg?inline'
+import FabricLoader from '~/assets/images/categories/fabric.svg?inline'
+
+export default {
+  name: 'Categories',
+  components: {
+    TechCategory,
+    AdventureCategory,
+    CursedCategory,
+    DecorationCategory,
+    EquipmentCategory,
+    FoodCategory,
+    LibraryCategory,
+    MagicCategory,
+    MiscCategory,
+    StorageCategory,
+    UtilityCategory,
+    WorldGenCategory,
+    ForgeLoader,
+    FabricLoader,
+  },
+  props: {
+    categories: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.categories {
+  @extend %row;
+  flex-wrap: wrap;
+
+  p {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    background-color: var(--color-category-bg);
+    border-radius: var(--size-rounded-max);
+    color: var(--color-category-text);
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+    margin-right: 0.5em;
+    padding: 0.4em 0.7em;
+    font-size: var(--font-size-sm);
+    height: 1em;
+    svg {
+      width: 15px;
+      margin-right: 5px;
+    }
+  }
+}
+</style>