Merge

pages/dashboard/projects.vue

@@ -1,79 +1,46 @@
 <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
-            v-if="
-              $auth.user.role === 'admin' || $auth.user.role === 'moderator'
-            "
-            :to="'/dashboard/moderation'"
-            class="tab last"
-          >
-            <ModerationIcon />
-            Moderation
-          </nuxt-link>
-        </div>
-        <m-footer class="footer" />
-        <client-only>
-          <EthicalAd type="image" />
-        </client-only>
-      </div>
-      <div class="content">
-        <div class="section-header columns">
-          <h3 class="column-grow-1">My mods</h3>
-          <nuxt-link class="brand-button column" to="/mod/create">
-            Create a mod
-          </nuxt-link>
-        </div>
-        <ModCard
-          v-for="mod in mods"
-          :id="mod.slug ? mod.slug : mod.id"
-          :key="mod.id"
-          :author="mod.author"
-          :name="mod.title"
-          :description="mod.description"
-          :latest-version="mod.latest_version"
-          :created-at="mod.published"
-          :updated-at="mod.updated"
-          :downloads="mod.downloads.toString()"
-          :icon-url="mod.icon_url"
-          :author-url="mod.author_url"
-          :page-url="mod.page_url"
-          :categories="mod.categories"
-          :edit-mode="true"
-          :status="mod.status"
-          :is-modrinth="true"
-        >
-          <nuxt-link class="button column" :to="'/mod/' + mod.id + '/edit'">
-            Edit
-          </nuxt-link>
-        </ModCard>
-      </div>
+  <DashboardPage>
+    <div class="section-header columns">
+      <h3 class="column-grow-1">My mods</h3>
+      <nuxt-link class="brand-button column" to="/mod/create">
+        Create a mod
+      </nuxt-link>
     </div>
-  </div>
+    <ModCard
+      v-for="mod in mods"
+      :id="mod.slug ? mod.slug : mod.id"
+      :key="mod.id"
+      :author="mod.author"
+      :name="mod.title"
+      :description="mod.description"
+      :latest-version="mod.latest_version"
+      :created-at="mod.published"
+      :updated-at="mod.updated"
+      :downloads="mod.downloads.toString()"
+      :icon-url="mod.icon_url"
+      :author-url="mod.author_url"
+      :page-url="mod.page_url"
+      :categories="mod.categories"
+      :edit-mode="true"
+      :status="mod.status"
+      :is-modrinth="true"
+    >
+      <nuxt-link class="button column" :to="'/mod/' + mod.id + '/edit'">
+        Edit
+      </nuxt-link>
+    </ModCard>
+  </DashboardPage>
 </template>
 
 <script>
 import axios from 'axios'
-import EthicalAd from '@/components/EthicalAd'
 import ModCard from '@/components/ProjectCard'
-import MFooter from '@/components/MFooter'
-
-import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
+import DashboardPage from '@/components/DashboardPage'
 
 export default {
   components: {
-    EthicalAd,
+    DashboardPage,
     ModCard,
-    ModIcon,
-    ModerationIcon,
-    MFooter,
   },
   async asyncData(data) {
     const config = {
@@ -102,17 +69,6 @@ export default {
 </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);
-  }
-}
-
 .mod-name {
   font-weight: bold;
 }