Layout refactor (#150)

* Revert recent commits

* Move things around, and do preparation work for nested page systems.

* Fixed issue on side bar not appearing

components/layout/ModPage.vue

@@ -8,7 +8,7 @@
               :src="
                 mod.icon_url
                   ? mod.icon_url
-                  : 'https://cdn.modrinth.com/placeholder.svg'
+                  : 'https://cdn.modrinth.com/placeholder.svg?inline'
               "
               alt="mod - icon"
             />
@@ -38,7 +38,7 @@
           </div>
           <div class="buttons">
             <nuxt-link
-              v-if="this.$auth.user && this.$auth.user.id"
+              v-if="this.$auth.user"
               :to="`/report/create?id=${mod.id}&t=mod`"
               class="iconified-button"
             >
@@ -346,7 +346,7 @@
 
 <script>
 import axios from 'axios'
-import Categories from '~/components/ui/Categories'
+import Categories from '~/components/ui/search/Categories'
 import MFooter from '~/components/layout/MFooter'
 
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
@@ -364,7 +364,7 @@ import ExternalIcon from '~/assets/images/utils/external.svg?inline'
 
 import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
 import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
-import Advertisement from '~/components/ui/Advertisement'
+import Advertisement from '~/components/Advertisement'
 
 export default {
   name: 'ModPage',
@@ -676,10 +676,11 @@ export default {
     overflow-y: hidden;
   }
 }
-
+/*
 @media screen and (max-width: 1400px) {
   .mod-info {
     display: none;
   }
 }
+*/
 </style>

components/ui/ConfirmPopup.vue

@@ -35,13 +35,8 @@
 </template>
 
 <script>
-import Popup from '~/components/ui/Popup'
-
 export default {
   name: 'ConfirmPopup',
-  components: {
-    Popup,
-  },
   props: {
     confirmationText: {
       type: String,

components/ui/Pagination.vue

@@ -43,9 +43,9 @@
 </template>
 
 <script>
-import GapIcon from '~/assets/images/utils/gap.svg'
-import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg'
-import RightArrowIcon from '~/assets/images/utils/right-arrow.svg'
+import GapIcon from '~/assets/images/utils/gap.svg?inline'
+import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg?inline'
+import RightArrowIcon from '~/assets/images/utils/right-arrow.svg?inline'
 
 export default {
   name: 'Pagination',

components/ui/Popup.vue

@@ -32,6 +32,7 @@ export default {
   opacity: 0.6;
   overflow-x: hidden;
 }
+
 .popup-body {
   position: fixed;
   top: 50%;

components/ui/ProjectCard.vue

@@ -3,7 +3,11 @@
     <div class="icon">
       <nuxt-link v-if="isModrinth" :to="'/mod/' + id">
         <img
-          :src="iconUrl ? iconUrl : 'https://cdn.modrinth.com/placeholder.svg'"
+          :src="
+            iconUrl
+              ? iconUrl
+              : 'https://cdn.modrinth.com/placeholder.svg?inline'
+          "
           :alt="name"
         />
       </nuxt-link>
@@ -103,7 +107,7 @@
 </template>
 
 <script>
-import Categories from '~/components/ui/Categories'
+import Categories from '~/components/ui/search/Categories'
 
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'

components/wrapper/DashboardPage.vue

@@ -1,69 +0,0 @@
-<template>
-  <div class="page-container">
-    <div class="page-contents">
-      <div class="sidebar-l">
-        <div class="card page-nav">
-          <nuxt-link :to="'/dashboard/projects'" class="tab last">
-            <ModIcon />
-            My mods
-          </nuxt-link>
-          <nuxt-link :to="'/dashboard/notifications'" class="tab last">
-            <NotificationsIcon />
-            Notifications
-          </nuxt-link>
-          <nuxt-link
-            v-if="
-              $auth.user.role === 'admin' || $auth.user.role === 'moderator'
-            "
-            :to="'/dashboard/moderation'"
-            class="tab last"
-          >
-            <ModerationIcon />
-            Moderation
-          </nuxt-link>
-          <nuxt-link :to="'/dashboard/settings'" class="tab last">
-            <SettingsIcon />
-            Settings
-          </nuxt-link>
-        </div>
-        <m-footer class="footer" />
-      </div>
-      <div class="content">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
-import SettingsIcon from '~/assets/images/sidebar/settings.svg?inline'
-import NotificationsIcon from '~/assets/images/sidebar/notifications.svg?inline'
-
-export default {
-  name: 'DashboardPage',
-  components: {
-    ModIcon,
-    ModerationIcon,
-    SettingsIcon,
-    NotificationsIcon,
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.section-header {
-  @extend %card;
-  padding: var(--spacing-card-md) var(--spacing-card-lg);
-  margin-bottom: var(--spacing-card-md);
-  h3 {
-    margin: auto 0;
-    color: var(--color-text-dark);
-    font-weight: var(--font-weight-extrabold);
-  }
-}
-
-.footer {
-  padding-top: 0;
-}
-</style>