Mod page fixes, better ad wrapper to make it look better with the site

assets/styles/injected.scss

@@ -86,5 +86,8 @@
     .capitalize {
       text-transform: capitalize;
     }
+    .ellipsis {
+      text-overflow: ellipsis;
+    }
   }
 }

components/Advertisement.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="ad-wrapper">
+    <adsbygoogle
+      ad-slot="7510690716"
+      :ad-format="format"
+      :page-url="pageUrl ? pageUrl : undefined"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Advertisement',
+  props: {
+    format: {
+      type: String,
+      default: 'horizontal',
+    },
+    pageUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.ad-wrapper {
+  width: 100%;
+  @extend %card;
+  margin-bottom: var(--spacing-card-md);
+}
+</style>

components/ModPage.vue

@@ -20,12 +20,10 @@
             </p>
           </div>
         </div>
-        <adsbygoogle
+        <Advertisement
-          ad-slot="7510690716"
           :page-url="
             'https://modrinth.com/mod/' + (mod.slug ? mod.slug : mod.id)
           "
-          ad-format="horizontal"
         />
         <div class="mod-navigation">
           <div class="tabs">
@@ -79,12 +77,10 @@
         </div>
         <div class="mod-content">
           <slot />
-          <adsbygoogle
+          <Advertisement
-            ad-slot="7510690716"
             :page-url="
               'https://modrinth.com/mod/' + (mod.slug ? mod.slug : mod.id)
             "
-            ad-format="horizontal"
           />
         </div>
       </div>
@@ -119,12 +115,10 @@
               <h4>Available For</h4>
               <p class="value">
                 {{
-                  versions[versions.length - 1]
+                  versions[0]
-                    ? versions[versions.length - 1].game_versions[
+                    ? versions[0].game_versions[0]
-                        versions[versions.length - 1].game_versions.length - 1
+                      ? versions[0].game_versions[
-                      ]
+                          versions[0].game_versions.length - 1
-                      ? versions[versions.length - 1].game_versions[
-                          versions[versions.length - 1].game_versions.length - 1
                         ]
                       : 'None'
                     : 'None'
@@ -166,7 +160,7 @@
             <FileTextIcon />
             <div class="info">
               <h4>License</h4>
-              <p class="value">
+              <p v-tooltip="mod.license.name" class="value ellipsis">
                 <a
                   v-if="mod.license.url ? mod.license.url : '#'"
                   :href="mod.license.url"
@@ -282,7 +276,12 @@
             </a>
           </div>
         </div>
-        <adsbygoogle ad-slot="7510690716" ad-format="rectangle" />
+        <Advertisement
+          format="rectangle"
+          :page-url="
+            'https://modrinth.com/mod/' + (mod.slug ? mod.slug : mod.id)
+          "
+        />
         <m-footer class="footer" />
       </section>
     </div>
@@ -307,10 +306,12 @@ 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/Advertisement'
 
 export default {
   name: 'ModPage',
   components: {
+    Advertisement,
     MFooter,
     Categories,
     ExternalIcon,

pages/mods.vue

@@ -63,7 +63,7 @@
           ></pagination>
         </section>
         <div class="results column-grow-4">
-          <adsbygoogle ad-slot="7510690716" ad-format="horizontal" />
+          <Advertisement />
           <SearchResult
             v-for="(result, index) in results"
             :id="result.slug ? result.slug : result.mod_id.split('-')[1]"
@@ -255,7 +255,7 @@
             @input="onSearchChange(1)"
           ></multiselect>
         </div>
-        <adsbygoogle ad-slot="7510690716" ad-format="rectangle" />
+        <Advertisement format="rectangle" />
         <m-footer class="footer" />
       </section>
     </div>
@@ -287,10 +287,12 @@ import ForgeLoader from '~/assets/images/categories/forge.svg?inline'
 import FabricLoader from '~/assets/images/categories/fabric.svg?inline'
 
 import SearchIcon from '~/assets/images/utils/search.svg?inline'
+import Advertisement from '~/components/Advertisement'
 
 export default {
   auth: false,
   components: {
+    Advertisement,
     MFooter,
     SearchResult,
     Pagination,
@@ -623,6 +625,7 @@ export default {
   flex-shrink: 0; // Stop shrinking when page contents change
   .filters-wrapper {
     padding: 0.25rem 0.75rem 0.75rem 0.75rem;
+    margin-bottom: var(--spacing-card-md);
   }
   h3 {
     @extend %large-label;

pages/user/_id.vue

@@ -45,11 +45,11 @@
             </div>
           </div>
         </div>
-        <adsbygoogle ad-slot="7510690716" ad-format="rectangle" />
+        <Advertisement format="rectangle" />
         <m-footer class="footer" />
       </div>
       <div class="content">
-        <adsbygoogle ad-slot="7510690716" ad-format="horizontal" />
+        <Advertisement />
         <div class="mods">
           <SearchResult
             v-for="result in mods"
@@ -78,10 +78,12 @@ import MFooter from '@/components/MFooter'
 
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
+import Advertisement from '~/components/Advertisement'
 
 export default {
   auth: false,
   components: {
+    Advertisement,
     SearchResult,
     CalendarIcon,
     DownloadIcon,