Some search fixes, switch from created() to fetch() for SSR

assets/styles/global.scss

@@ -45,7 +45,7 @@
   --color-grey-6: #f7f2eb;
   --color-grey-5: #ede9e4;
   --color-grey-4: #dadcd5;
-  --color-grey-3: #b8bbb4;
+  --color-grey-3: #797b76;
   --color-grey-2: #3b3937;
   --color-grey-1: #3a3b38;
   --color-grey-0: #1d1e1b;

components/Pagination.vue

@@ -29,6 +29,7 @@
     <svg
       :class="{
         'disabled-paginate': currentPage === pages[pages.length - 1],
+        'active-paginate': currentPage !== pages[pages.length - 1],
       }"
       viewBox="0 0 24 24"
       fill="none"
@@ -85,7 +86,8 @@ export default {
   color: var(--color-grey-5);
 }
 
-.active-page-number {
+.active-page-number,
+.active-paginate {
   user-select: none;
   cursor: pointer;
 }

layouts/default.vue

@@ -143,18 +143,18 @@
               @click="showPopup = !showPopup"
             />
             <span> {{ this.$auth.user.username }} </span>
-          </div>
-          <div v-if="showPopup" class="user-actions-popup">
-            <div class="popup-inner">
-              <p>
-                Modrinth ID: <strong>{{ this.$auth.user.id }}</strong>
-              </p>
-              <hr />
-              <p>My profile</p>
-              <p>My teams</p>
-              <hr />
-              <p>Settings</p>
-              <p @click="logout">Logout</p>
+            <div v-if="showPopup" class="user-actions-popup">
+              <div class="popup-inner">
+                <p>
+                  Modrinth ID: <strong>{{ this.$auth.user.id }}</strong>
+                </p>
+                <hr />
+                <p>My profile</p>
+                <p>My teams</p>
+                <hr />
+                <p>Settings</p>
+                <p @click="logout">Logout</p>
+              </div>
             </div>
           </div>
           <div v-if="this.$auth.loggedIn" class="notifications">
@@ -231,15 +231,16 @@
 
 <script>
 export default {
+  async fetch() {
+    if (this.$route.query.code)
+      await this.$auth.setUserToken(this.$route.query.code)
+  },
   data() {
     return {
       theme: 'light',
       showPopup: false,
     }
   },
-  created() {
-    if (this.$route.query.code) this.$auth.setUserToken(this.$route.query.code)
-  },
   beforeMount() {
     const theme = localStorage.getItem('data-theme')
       ? localStorage.getItem('data-theme')
@@ -441,6 +442,10 @@ export default {
           }
         }
 
+        .theme {
+          cursor: pointer;
+        }
+
         .log-in-button {
           text-align: center;
           padding: 8px 40px;
@@ -452,7 +457,6 @@ export default {
 
         .user-actions-popup {
           position: relative;
-          display: inline-block;
 
           .popup-inner {
             width: 140px;
@@ -486,7 +490,7 @@ export default {
             content: '';
             position: absolute;
             top: 100%;
-            right: 90%;
+            right: 80%;
             border-width: 7px;
             border-style: solid;
             border-color: var(--color-grey-2) transparent transparent

nuxt.config.js

@@ -158,4 +158,8 @@ export default {
    ** See https://nuxtjs.org/api/configuration-build/
    */
   build: {},
+  loading: {
+    color: 'green',
+    height: '5px',
+  },
 }

pages/mods.vue

@@ -70,6 +70,9 @@
           :categories="result.categories"
           :is-ad="index === -1"
         />
+        <div class="no-results" v-if="results.length === 0">
+          <p>No results found for your query!</p>
+        </div>
       </div>
       <section v-if="pages.length > 1" class="search-bottom">
         <Multiselect
@@ -425,26 +428,7 @@ export default {
     Multiselect,
     SearchFilter,
   },
-  data() {
-    return {
-      query: '',
-      selectedVersions: [],
-      versions: [],
-      facets: [],
-      results: [],
-      pages: [],
-      currentPage: 1,
-      sortTypes: [
-        { display: 'Relevance', name: 'relevance' },
-        { display: 'Total Downloads', name: 'downloads' },
-        { display: 'Newest', name: 'newest' },
-        { display: 'Updated', name: 'updated' },
-      ],
-      sortType: { display: 'Relevance', name: 'relevance' },
-      maxResults: 5,
-    }
-  },
-  async created() {
+  async fetch() {
     if (this.$route.query.q) this.query = this.$route.query.q
     if (this.$route.query.f) {
       const facets = this.$route.query.f.split(',')
@@ -465,6 +449,25 @@ export default {
     await this.fillInitialVersions()
     await this.onSearchChange(this.currentPage)
   },
+  data() {
+    return {
+      query: '',
+      selectedVersions: [],
+      versions: [],
+      facets: [],
+      results: [],
+      pages: [],
+      currentPage: 1,
+      sortTypes: [
+        { display: 'Relevance', name: 'relevance' },
+        { display: 'Total Downloads', name: 'downloads' },
+        { display: 'Newest', name: 'newest' },
+        { display: 'Updated', name: 'updated' },
+      ],
+      sortType: { display: 'Relevance', name: 'relevance' },
+      maxResults: 5,
+    }
+  },
   methods: {
     async fillInitialVersions() {
       try {
@@ -721,6 +724,7 @@ export default {
   margin-top: 1em;
 
   button {
+    cursor: pointer;
     width: 100%;
     padding: 5px 0;
     outline: none;
@@ -812,6 +816,14 @@ select {
   }
 }
 
+.no-results {
+  text-align: center;
+  padding: 20px 0;
+  font-size: 30px;
+  color: var(--color-text);
+  background-color: var(--color-grey-1);
+}
+
 .max-results {
   max-width: 80px;
 }
@@ -823,6 +835,7 @@ select {
 .multiselect__tags,
 .multiselect__spinner {
   background: var(--color-bg);
+  cursor: pointer;
 }
 
 .multiselect__spinner::before,