Add modpack page warning + Fix notifications nav titles

assets/styles/components.scss

@@ -113,6 +113,7 @@
   &:hover {
     color: var(--color-link-hover);
   }
+
   &:active {
     color: var(--color-link-active);
   }
@@ -125,6 +126,7 @@
   &:hover {
     color: var(--color-heading);
   }
+
   &:active {
     color: var(--color-text-dark);
   }
@@ -171,6 +173,7 @@
     &:hover {
       color: var(--color-link-hover);
     }
+
     &:active {
       color: var(--color-link-active);
     }
@@ -242,6 +245,7 @@
       padding: 0.5rem 0.8rem;
       cursor: pointer;
       background-color: var(--color-button-bg);
+
       &:hover {
         background-color: var(--color-button-bg-hover);
       }
@@ -366,13 +370,16 @@
   background-color: var(--color-button-bg);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-nm);
+
   &:focus-visible,
   &:hover {
     background-color: var(--color-button-bg-hover);
   }
+
   &:active {
     background-color: var(--color-button-bg-active);
   }
+
   &:disabled,
   &[disabled] {
     background-color: transparent;
@@ -411,11 +418,13 @@
   @extend .button;
   color: var(--color-brand-inverted);
   background-color: var(--color-brand);
+
   &:focus-visible,
   &:hover {
     background-color: var(--color-brand-hover);
     color: var(--color-brand-inverted);
   }
+
   &:active {
     background-color: var(--color-brand-active);
     color: var(--color-brand-inverted);
@@ -426,11 +435,13 @@
   box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.25);
   color: var(--color-brand-inverted);
   background-color: var(--color-brand);
+
   &:focus-visible,
   &:hover {
     background-color: var(--color-brand-hover);
     color: var(--color-brand-inverted);
   }
+
   &:active {
     background-color: var(--color-brand-active);
     color: var(--color-brand-inverted);
@@ -470,27 +481,33 @@
         background: var(--color-button-bg-hover);
       }
     }
+
     .multiselect__single {
       background: transparent;
     }
+
     .multiselect__tag {
       border-radius: 2rem;
       color: var(--color-text-dark);
       background: transparent;
       border: 2px solid var(--color-brand);
     }
+
     .multiselect__tag-icon {
       background: transparent;
+
       &:after {
         color: var(--color-text-dark);
       }
     }
+
     .multiselect__placeholder {
       color: var(--color-text);
       font-size: 16px;
       line-height: 20px;
     }
   }
+
   .multiselect__content-wrapper {
     background: var(--color-dropdown-bg);
     border: none;
@@ -503,6 +520,7 @@
         background: var(--color-button-bg-active);
         color: var(--color-text-dark);
       }
+
       .multiselect__option--selected {
         background: var(--color-brand);
         font-weight: bold;
@@ -510,6 +528,7 @@
       }
     }
   }
+
   .multiselect__spinner {
     background: var(--color-dropdown-bg);
 
@@ -557,6 +576,7 @@ label {
     height: fit-content;
     flex: 1;
   }
+
   input[type='button']:hover {
     cursor: pointer;
   }
@@ -566,6 +586,7 @@ label {
     height: fit-content;
     flex: 1;
   }
+
   div:hover {
     cursor: pointer;
   }
@@ -586,6 +607,7 @@ label {
   appearance: none;
   -webkit-tap-highlight-color: transparent;
   cursor: pointer;
+
   &:focus {
     //outline: 0; Bad for accessibility
   }
@@ -616,17 +638,21 @@ label {
     box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
     transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
   }
+
   &:checked {
     background: var(--color-brand);
     border: 2px solid var(--color-brand);
+
     &:after {
       transform: translatex(20px);
     }
   }
+
   &:hover &:focus {
     background: var(--color-button-bg);
     border: 2px solid var(--color-button-bg);
   }
+
   &:hover:checked &:focus:checked {
     background: var(--color-brand);
     border: 2px solid var(--color-brand);
@@ -655,6 +681,7 @@ label {
     width: 1.25rem;
     margin: auto;
   }
+
   flex-shrink: 0;
 }
 
@@ -743,16 +770,19 @@ label {
   width: 100%;
   justify-content: center;
   align-items: center;
+
   .icon {
     width: 8rem;
     height: 8rem;
     margin: 1.5rem 0;
   }
+
   .text {
     margin-bottom: 2rem;
     font-size: 1.25rem;
     text-align: center;
   }
+
   .link {
     text-decoration: underline;
   }
@@ -768,6 +798,20 @@ label {
   margin-bottom: var(--spacing-card-md);
 
   // box-shadow: var(--shadow-card);
+
+  &.warning {
+    padding: 1.5rem;
+    line-height: 1.5;
+    background-color: var(--color-warning-bg);
+    color: var(--color-warning-text);
+    min-height: 0;
+
+    a {
+      /* Uses active color to increase contrast */
+      color: var(--color-link-active);
+      text-decoration: underline;
+    }
+  }
 }
 
 .vue-notification-group {

components/ui/ProjectCard.vue

@@ -9,7 +9,11 @@
             loading="lazy"
           />
         </nuxt-link>
-        <Categories :categories="categories" class="left-categories" />
+        <Categories
+          :categories="categories"
+          :type="type"
+          class="left-categories"
+        />
       </div>
       <div class="card-content">
         <div class="info">
@@ -19,9 +23,9 @@
             </h2>
             <p v-if="author" class="author">
               by
-              <nuxt-link class="title-link" :to="'/user/' + author">{{
+              <nuxt-link class="title-link" :to="'/user/' + author"
-                author
+                >{{ author }}
-              }}</nuxt-link>
+              </nuxt-link>
             </p>
           </div>
           <div class="side-type">

nuxt.config.js

@@ -228,7 +228,7 @@ export default {
    ** See https://axios.nuxtjs.org/options
    */
   axios: {
-    baseURL: 'https://api.modrinth.com/v2/',
+    baseURL: 'https://staging-api.modrinth.com/v2/',
     headers: {
       common: {
         Accept: 'application/json',

pages/_type/_id.vue

@@ -433,6 +433,19 @@
       />
       <div class="content">
         <div class="project-main">
+          <div v-if="project.project_type === 'modpack'" class="card warning">
+            To install this modpack, visit
+            <a
+              href="https://docs.modrinth.com/docs/modpacks/playing_modpacks/"
+              target="_blank"
+              >our documentation</a
+            >
+            which provides instructions on using
+            <a href="https://atlauncher.com/about" target="_blank"
+              >ATLauncher</a
+            >
+            and <a href="https://multimc.org/" target="_blank">MultiMC</a>.
+          </div>
           <div class="card styled-tabs">
             <nuxt-link
               :to="`/${project.project_type}/${
@@ -833,6 +846,7 @@ export default {
       font-size: var(--font-size-lg);
       font-weight: bold;
     }
+
     .label {
       margin-right: 0.125rem;
     }
@@ -840,6 +854,7 @@ export default {
 
   .dates {
     margin: 0.75rem 0;
+
     .date {
       color: var(--color-text-secondary);
       font-size: var(--font-size-nm);
@@ -890,6 +905,7 @@ export default {
   display: flex;
   flex-direction: row;
   margin-top: var(--spacing-card-md);
+
   .download {
     display: flex;
     align-items: center;
@@ -915,9 +931,11 @@ export default {
 
     flex-shrink: 0;
   }
+
   .info {
     display: flex;
     flex-direction: column;
+
     .top {
       font-weight: bold;
     }
@@ -950,6 +968,7 @@ export default {
         color: var(--color-heading);
       }
     }
+
     &:active {
       svg,
       img,
@@ -974,12 +993,15 @@ export default {
     height: 50px;
     width: 50px;
   }
+
   .member-info {
     overflow: hidden;
     margin: auto 0 auto 0.5rem;
+
     .name {
       font-weight: bold;
     }
+
     p {
       font-size: var(--font-size-sm);
       margin: 0.2rem 0;
@@ -997,6 +1019,7 @@ export default {
       color: var(--color-text-secondary);
       width: 40%;
     }
+
     .value {
       width: 50%;
       text-transform: capitalize;
@@ -1005,6 +1028,7 @@ export default {
         text-transform: none;
       }
     }
+
     .uppercase {
       text-transform: uppercase;
     }

pages/notifications.vue

@@ -104,7 +104,9 @@ export default {
     notificationTypes() {
       const obj = { all: true }
 
-      for (const notification of this.$user.notifications) {
+      for (const notification of this.$user.notifications.filter(
+        (it) => it.type !== null
+      )) {
         obj[
           Object.keys(NOTIFICATION_TYPES).find(
             (key) => NOTIFICATION_TYPES[key] === notification.type
@@ -112,6 +114,8 @@ export default {
         ] = true
       }
 
+      console.log(obj)
+
       return Object.keys(obj)
     },
   },

pages/search.vue

@@ -624,19 +624,6 @@ export default {
   margin: 1.5rem 0 0.5rem 0;
 }
 
-.warning {
-  padding: 1.5rem;
-  line-height: 1.5;
-  background-color: var(--color-warning-bg);
-  color: var(--color-warning-text);
-
-  a {
-    /* Uses active color to increase contrast */
-    color: var(--color-link-active);
-    text-decoration: underline;
-  }
-}
-
 .search-controls {
   display: flex;
   flex-direction: row;