Versatile auth URLs & many UI fixes (#199)

* Make project cards right-align their last element

Spaces out elements in a `.project-card` using `justify-content: space-between;`.

Fixes modrinth/knossos#170

* Automatically set URL for auth redirect

* Make login button use base url or current origin

Allows the login button to work in dev environment

* Remove Axios base URL trailing slash

* Update authUrl() on dashboard to match default

* Remove 'code' query from URL on page load
Allow non-exact paths to highlight mod & dashboard tabs

Fixes modrinth/knossos#200

* Make page 5 button visible on page 4 (pagination)

Fixes modrinth/knossos#184

* Color links on legal pages

Fixes modrinth/knossos#166

* Set max notifications to 5 and ignore duplicates

Fixes modrinth/knossos#175

* Add space above report button when no user desc

Fixes modrinth/knossos#143

* Better text spacing from edge of mobile screen

Fixes modrinth/knossos#179

* Fix slanted bars in modrinth/knossos#57

* Fix checkbox grid and role label

Fixes modrinth/knossos#191

* Move mod 'settings' button to the far right

Fixes modrinth/knossos#138

* Abbreviate minutes to min. when time is too long

Not a perfect solution imo, but works for now

Fixes modrinth/knossos#193

* Fix mobile header margins & add breakpoints

Fixes modrinth/knossos#203

* Clean up nuxt config
Silence babel warning & styleResources

* Upgrade sass-loader to 10.1.1 and remove warning

* Remove added horizontal footer padding

https://github.com/modrinth/knossos/pull/199#discussion_r629011624

* Improve mobile header fix

* Fix up minor inconsistencies in mod header

* Remove hard coded date

* Cleans up pagination to be more intuitive

* Fixes member invite input on moble

* Fix login button when searching mods

* Improved mobile mod search

Consistently sized pagination buttons

Breakpoint for sort buttons on smaller screens

* Consistent link style on text-only pages

* Better 4k support

* Slightly better mobile project-card support

Shuffles categories under mod icon when there is room

* Animate homepage typewriter effect backwards

* Tiny commit to align mod icons in mod headers

* Make processing status include 'Under Review'

This can be later updated once the backend has a separate status

* Create vercel.json

* Update domain auto detection

* Test vercel NODE_ENV

* Remove console.log for debugging hosting services

* Make mobile first + fix shrinked text circle size

* Optimize SVG

* Change media queries to be more mobile first

* Remove `|| window.location.origin`

* re-deploy vercel

* Change "Processing" message to "Under review"

assets/images/utils/settings.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+	stroke-width="2" viewBox="0 0 24 24">
+	<circle cx="12" cy="12" r="3" />
+	<path
+		d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
+</svg>

assets/styles/components.scss

@@ -82,7 +82,8 @@
     word-wrap: break-word;
   }
 
-  h1, h2 {
+  h1,
+  h2 {
     padding: 10px 0 5px;
     border-bottom: 1px solid var(--color-header-underline);
   }
@@ -91,7 +92,7 @@
     margin: 15px 0;
     padding: 0 1em;
     color: var(--color-text);
-    border-left: .25em solid var(--color-block-quote);
+    border-left: 0.25em solid var(--color-block-quote);
   }
 
   a {
@@ -152,7 +153,7 @@
     z-index: 1;
   }
 
-  &[x-placement^="top"] {
+  &[x-placement^='top'] {
     margin-bottom: 5px;
 
     .tooltip-arrow {
@@ -167,7 +168,7 @@
     }
   }
 
-  &[x-placement^="bottom"] {
+  &[x-placement^='bottom'] {
     margin-top: 5px;
 
     .tooltip-arrow {
@@ -182,7 +183,7 @@
     }
   }
 
-  &[x-placement^="right"] {
+  &[x-placement^='right'] {
     margin-left: 5px;
 
     .tooltip-arrow {
@@ -197,7 +198,7 @@
     }
   }
 
-  &[x-placement^="left"] {
+  &[x-placement^='left'] {
     margin-right: 5px;
 
     .tooltip-arrow {
@@ -215,13 +216,13 @@
   &[aria-hidden='true'] {
     visibility: hidden;
     opacity: 0;
-    transition: opacity .15s, visibility .15s;
+    transition: opacity 0.15s, visibility 0.15s;
   }
 
   &[aria-hidden='false'] {
     visibility: visible;
     opacity: 1;
-    transition: opacity .15s;
+    transition: opacity 0.15s;
   }
 }
 
@@ -247,7 +248,7 @@
   svg {
     width: 1rem;
     height: 1rem;
-    margin-right: 0.3rem;
+    margin-right: 0.4rem;
   }
 
   &:hover,
@@ -259,7 +260,8 @@
     }
   }
 
-  &.nuxt-link-exact-active {
+  &.nuxt-link-exact-active,
+  &.active-path {
     color: var(--color-text-dark);
 
     span {
@@ -293,7 +295,8 @@
           flex-shrink: 0;
         }
 
-        &.nuxt-link-exact-active {
+        &.nuxt-link-exact-active,
+        &.active-path {
           svg {
             color: var(--color-brand-light);
           }
@@ -418,7 +421,6 @@
       background: var(--color-button-bg-hover);
     }
   }
-
 }
 
 .section-header {
@@ -488,11 +490,8 @@ label {
   &:focus {
     outline: 0;
   }
-
 }
 
-
-
 .stylized-toggle {
   height: 32px;
   width: 52px;
@@ -501,7 +500,7 @@ label {
   position: relative;
   margin: 0;
   border: 2px solid var(--color-button-bg);
-  transition: all .2s ease;
+  transition: all 0.2s ease;
   background: var(--color-button-bg);
 
   &:after {
@@ -513,8 +512,8 @@ label {
     height: 24px;
     border-radius: 50%;
     background: white;
-    box-shadow: 0 1px 2px rgba(44,44,44,.2);
+    box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
-    transition: all .2s cubic-bezier(.5,.1,.75,1.35);
+    transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
   }
   &:checked {
     background: var(--color-brand);
@@ -527,7 +526,7 @@ label {
     background: var(--color-button-bg);
     border: 2px solid var(--color-button-bg);
   }
-  &:hover:checked  &:focus:checked {
+  &:hover:checked &:focus:checked {
     background: var(--color-brand);
     border: 2px solid var(--color-brand);
   }

assets/styles/injected.scss

@@ -25,7 +25,8 @@
   &:focus,
   &:hover,
   &.selected,
-  &.nuxt-link-exact-active {
+  &.nuxt-link-exact-active,
+  &.active-path {
     color: var(--color-transparent-button-text-hover);
     background-color: var(--color-transparent-button-bg-hover);
   }

components/layout/MFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer :class="{ centered, hideBig, hideSmall }">
+  <footer :class="{ centered, padded, hideBig, hideSmall }">
     <span>
       Modrinth is open source software. You may view the source code at
       <a target="_blank" href="https://github.com/modrinth">our GitHub page</a>.
@@ -55,6 +55,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    padded: {
+      type: Boolean,
+      default: false,
+    },
     hideSmall: {
       type: Boolean,
       default: false,
@@ -78,8 +82,12 @@ export default {
   align-items: center;
 }
 
+.padded {
+  padding: 2rem 1rem;
+}
+
 footer {
-  padding: 2rem 0 2rem 0;
+  padding: 2rem 0;
   display: flex;
   flex-direction: column;
 

components/ui/Pagination.vue

@@ -10,17 +10,22 @@
     </button>
     <div
       v-for="(item, index) in pages"
-      :key="'page-' + item"
+      :key="'page-' + item + '-' + index"
       :class="{
         'page-number': currentPage !== item,
+        shrink: item > 99,
       }"
       class="page-number-container"
     >
-      <div v-if="pages[index - 1] + 1 !== item && item !== 1" class="has-icon">
+      <div v-if="item == '-'" class="has-icon">
         <GapIcon />
       </div>
       <button
-        :class="{ 'page-number current': currentPage === item }"
+        v-else
+        :class="{
+          'page-number current': currentPage === item,
+          shrink: item > 99,
+        }"
         @click="currentPage !== item ? switchPage(item) : null"
       >
         {{ item }}
@@ -28,7 +33,9 @@
     </div>
 
     <button
-      :class="{ disabled: currentPage === pages[pages.length - 1] }"
+      :class="{
+        disabled: currentPage === pages[pages.length - 1],
+      }"
       class="paginate has-icon"
       aria-label="Next Page"
       @click="
@@ -76,10 +83,11 @@ export default {
 
 <style scoped lang="scss">
 button {
-  min-width: 2rem;
+  padding: 0;
-  padding: 0 0.5rem;
+  margin: 0;
-  height: 2rem;
+  width: 2em;
-  border-radius: 2rem;
+  height: 2em;
+  border-radius: 2em;
   background: transparent;
   &.page-number.current {
     background: var(--color-button-bg-hover);
@@ -100,15 +108,37 @@ button {
 .has-icon {
   display: flex;
   align-items: center;
-  padding: 0 0.5rem;
+  height: 2em;
-  height: 2rem;
   svg {
-    width: 1rem;
+    width: 1em;
   }
 }
 
-.page-number-container {
+.page-number-container,
+button,
+.has-icon {
   display: flex;
-  max-height: 2rem;
+  justify-content: center;
+  align-items: center;
+  height: 2em;
+  width: 2em;
+}
+
+.paginates {
+  height: 2em;
+  margin: 0.5rem 0;
+  > div {
+    margin: 0 0.1em;
+  }
+  font-size: 80%;
+  @media screen and (min-width: 350px) {
+    font-size: 100%;
+  }
+}
+
+.shrink {
+  font-size: 0.9rem;
+  height: 2.225em;
+  width: 2.225em;
 }
 </style>

components/ui/ProjectCard.vue

@@ -9,6 +9,7 @@
             loading="lazy"
           />
         </nuxt-link>
+        <Categories :categories="categories" class="left-categories" />
       </div>
       <div class="info">
         <div class="top">
@@ -40,7 +41,7 @@
                   >Draft</span
                 >
                 <span v-if="status === 'processing'" class="badge yellow">
-                  Processing
+                  Under review
                 </span>
                 <span v-if="status === 'unlisted'" class="badge gray">
                   Unlisted
@@ -99,7 +100,7 @@
               </div>
             </div>
           </div>
-          <Categories :categories="categories" />
+          <Categories :categories="categories" class="right-categories" />
         </div>
       </div>
     </div>
@@ -207,6 +208,7 @@ export default {
 
   @media screen and (min-width: 1024px) {
     flex-direction: row;
+    justify-content: space-between;
   }
 
   .icon {
@@ -280,6 +282,19 @@ export default {
       }
     }
   }
+  .left-categories {
+    display: none;
+  }
+  @media screen and (max-width: 560px) {
+    .left-categories {
+      display: flex;
+      margin: 0 0 0.75rem 0.75rem;
+      width: 7rem;
+    }
+    .right-categories {
+      display: none;
+    }
+  }
   .buttons {
     @extend %column;
     margin-bottom: 1rem;

layouts/default.vue

@@ -4,16 +4,18 @@
       <section class="navbar columns">
         <section class="logo column">
           <NuxtLink to="/">
+            <ModrinthLogoSmall aria-label="modrinth" class="small-logo" />
             <ModrinthLogo
               v-if="$colorMode.value === 'light'"
               aria-label="modrinth"
+              class="text-logo"
             />
-            <ModrinthLogoWhite v-else aria-label="modrinth" />
+            <ModrinthLogoWhite v-else aria-label="modrinth" class="text-logo" />
           </NuxtLink>
           <span class="badge yellow">Beta</span>
         </section>
         <section class="menu-icon">
-          <button @click="changeTheme">
+          <button class="theme-toggle" @click="changeTheme">
             <MoonIcon v-if="$colorMode.value === 'light'" />
             <SunIcon v-else />
           </button>
@@ -24,11 +26,23 @@
         <section ref="nav" class="right-group columns">
           <section class="column-grow-5 nav">
             <div class="tabs">
-              <NuxtLink to="/mods" class="tab">
+              <NuxtLink
+                to="/mods"
+                class="tab"
+                :class="{
+                  'active-path': this.$route.path.startsWith('/mod'),
+                }"
+              >
                 <span>Mods</span>
               </NuxtLink>
               <div v-if="this.$auth.user" class="section">
-                <NuxtLink to="/dashboard/projects" class="tab">
+                <NuxtLink
+                  to="/dashboard/projects"
+                  class="tab"
+                  :class="{
+                    'active-path': this.$route.path.startsWith('/dashboard'),
+                  }"
+                >
                   <span>Dashboard</span>
                 </NuxtLink>
               </div>
@@ -108,7 +122,12 @@
     </header>
     <main>
       <CookieConsent />
-      <notifications group="main" position="bottom right" />
+      <notifications
+        group="main"
+        position="bottom right"
+        :max="5"
+        :ignore-duplicates="true"
+      />
       <!--<notifications
         group="ads"
         position="bottom right"
@@ -125,6 +144,7 @@ import ClickOutside from 'vue-click-outside'
 
 import ModrinthLogo from '~/assets/images/text-logo.svg?inline'
 import ModrinthLogoWhite from '~/assets/images/text-logo-white.svg?inline'
+import ModrinthLogoSmall from '~/assets/images/logo.svg?inline'
 
 import HamburgerIcon from '~/assets/images/utils/hamburger.svg?inline'
 
@@ -144,6 +164,7 @@ export default {
   components: {
     ModrinthLogo,
     ModrinthLogoWhite,
+    ModrinthLogoSmall,
     DropdownIcon,
     MoonIcon,
     SunIcon,
@@ -164,7 +185,7 @@ export default {
   },
   computed: {
     authUrl() {
-      return `https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com${this.$route.fullPath}`
+      return `https://api.modrinth.com/api/v1/auth/init?url=${process.env.domain}${this.$route.fullPath}`
     },
     userUrl() {
       return `/user/${this.$auth.user.id}`
@@ -179,6 +200,11 @@ export default {
       document.body.style.overflow = 'auto'
     },
   },
+  beforeCreate() {
+    if (this.$route.query.code) {
+      this.$router.push(this.$route.path)
+    }
+  },
   methods: {
     toggleNavBar() {
       window.scrollTo(0, 0)
@@ -198,18 +224,19 @@ export default {
     },
     async logout() {
       this.$cookies.set('auth-token-reset', true)
-      // If users logs out on dashboard, redirect on the home page
+      // If users logs out on dashboard, force redirect on the home page to clear cookies
       if (this.$route.path.startsWith('/dashboard')) {
-        await this.$router.push('/')
+        window.location.href = '/'
       } else {
         await this.$router.go(null)
+
+        this.$notify({
+          group: 'main',
+          title: 'Logged Out',
+          text: 'You have logged out successfully!',
+          type: 'success',
+        })
       }
-      this.$notify({
-        group: 'main',
-        title: 'Logged Out',
-        text: 'You have logged out successfully!',
-        type: 'success',
-      })
     },
     changeTheme() {
       this.$colorMode.preference =
@@ -229,7 +256,10 @@ export default {
     background-color: var(--color-raised-bg);
     max-width: 100vw;
     .navbar {
-      margin: 0 var(--spacing-card-lg);
+      margin: 0 0.5rem;
+      @media screen and (min-width: 450px) {
+        margin: 0 var(--spacing-card-lg);
+      }
       section.logo {
         align-items: center;
         display: flex;
@@ -237,12 +267,28 @@ export default {
         padding: 1rem 0;
         margin-left: 1rem;
         color: var(--color-text-dark);
+        .small-logo {
+          display: block;
+        }
         svg {
+          display: none;
           height: 1.75rem;
           width: auto;
         }
+        @media screen and (min-width: 350px) {
+          .small-logo {
+            display: none;
+          }
+          svg {
+            display: unset;
+          }
+        }
         .badge {
           margin-left: 0.25rem;
+          display: none;
+          @media screen and (min-width: 430px) {
+            display: unset;
+          }
         }
         button {
           background: none;

middleware/auth.js

@@ -37,7 +37,7 @@ export default async function (context) {
 
   if (!context.$auth.user) {
     return context.redirect(
-      `https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com${context.route.fullPath}`
+      `https://api.modrinth.com/api/v1/auth/init?url=${process.env.domain}${context.route.fullPath}`
     )
   }
 }

nuxt.config.js

@@ -150,15 +150,18 @@ export default {
    */
   build: {
     transpile: ['vue-tooltip', 'vue-notification'],
-    styleResources: {
-      scss: './assets/styles/injected.scss',
-    },
     html: {
       minify: {
         collapseWhitespace: true, // as @dario30186 mentioned
         removeComments: true, // 👈 add this line
       },
     },
+    babel: {
+      plugins: [['@babel/plugin-proposal-private-methods', { loose: true }]],
+    },
+  },
+  styleResources: {
+    scss: './assets/styles/injected.scss',
   },
   loading: {
     color: 'green',
@@ -166,6 +169,7 @@ export default {
   },
   env: {
     version: process.env.VERSION_ID || 'unknown',
+    domain: getDomain(),
   },
   publicRuntimeConfig: {
     ads: {
@@ -179,3 +183,17 @@ export default {
     },
   },
 }
+
+function getDomain() {
+  if (process.env.NODE_ENV === 'production') {
+    if (process.env.HEROKU_APP_NAME) {
+      return `https://${process.env.HEROKU_APP_NAME}.herokuapp.com`
+    } else if (process.env.VERCEL_URL) {
+      return `https://${process.env.VERCEL_URL}`
+    } else {
+      return 'https://modrinth.com'
+    }
+  } else {
+    return 'http://localhost:3000'
+  }
+}

pages/about.vue

@@ -110,5 +110,6 @@ export default {
 
 a {
   text-decoration: underline;
+  color: var(--color-link);
 }
 </style>

pages/dashboard.vue

@@ -78,7 +78,7 @@ export default {
   },
   computed: {
     authUrl() {
-      return `https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com${this.$route.fullPath}`
+      return `https://api.modrinth.com/api/v1/auth/init?url=${process.env.domain}${this.$route.fullPath}`
     },
   },
 }

pages/dashboard/misc/revoke-token.vue

@@ -54,7 +54,7 @@ export default {
     async logout() {
       this.$cookies.set('auth-token-reset', true)
       await this.$router.replace(
-        'https://api.modrinth.com/api/v1/auth/init?url=https://modrinth.com/'
+        `https://api.modrinth.com/api/v1/auth/init?url=${process.env.domain}${this.$route.fullPath}`
       )
     },
   },

pages/index.vue

@@ -171,7 +171,7 @@ fetch('https://api.modrinth.com/api/v1/mod').then(res => res.json()).then(data =
         </pre>
       </div>
     </div>
-    <m-footer class="footer" centered />
+    <m-footer class="footer" centered padded />
   </div>
 </template>
 
@@ -188,6 +188,7 @@ export default {
   data() {
     return {
       currentText: 'Open source',
+      increasing: true,
       texts: ['Open source', 'Easy to use', 'Developer focused', 'API Based'],
     }
   },
@@ -205,16 +206,29 @@ export default {
       })
     },
     typeWriter(text, i, callback) {
-      if (!text || i >= text.length) {
+      if (!this.increasing && i <= 0) {
-        setTimeout(callback, 1000 + Math.random() * 500)
+        this.increasing = true
+        setTimeout(callback, 300 + Math.random() * 50)
         return
       }
 
-      this.currentText = text.substring(0, i + 1)
+      const step = this.increasing ? 1 : -1
-      setTimeout(
+
-        () => this.typeWriter(text, i + 1, callback),
+      if (i >= text.length && this.increasing) {
-        150 + Math.random() * 50
+        this.increasing = false
-      )
+
+        setTimeout(
+          () => this.typeWriter(text, i + step, callback),
+          1300 + Math.random() * 500
+        )
+      } else {
+        this.currentText = text.substring(0, i + step)
+        const speed = this.increasing ? 140 : 50
+        setTimeout(
+          () => this.typeWriter(text, i + step, callback),
+          speed + Math.random() * 20
+        )
+      }
     },
   },
 }
@@ -233,6 +247,9 @@ export default {
   .left {
     padding-top: 75px;
     padding-left: 100px;
+    @media screen and (min-width: 1500px) {
+      padding-left: 15%;
+    }
 
     .typewriter {
       display: inline-block;
@@ -287,6 +304,11 @@ export default {
       font-weight: bold;
     }
   }
+  &.left {
+    @media screen and (min-width: 2048px) {
+      max-width: 15vw;
+    }
+  }
 }
 
 .hero-image {
@@ -311,7 +333,7 @@ export default {
     background: inherit;
     content: '';
     display: block;
-    height: 50%;
+    height: 100%;
     left: 0;
     position: absolute;
     right: 0;
@@ -323,12 +345,18 @@ export default {
   &:before {
     top: 0;
     transform: skewY(5deg);
+    @media screen and (min-width: 2048px) {
+      transform: skewY(2deg);
+    }
     transform-origin: 100% 0;
   }
 
   &:after {
     bottom: 0;
     transform: skewY(-5deg);
+    @media screen and (min-width: 2048px) {
+      transform: skewY(-2deg);
+    }
     transform-origin: 100%;
   }
 }
@@ -388,6 +416,12 @@ export default {
     padding-left: 0 !important;
     text-align: center;
     width: 100%;
+
+    h1,
+    h3,
+    p {
+      padding: 0 5vw;
+    }
   }
 
   .hero {

pages/legal/privacy.vue

@@ -228,4 +228,9 @@ export default {
   @extend %card;
   padding: var(--spacing-card-sm) var(--spacing-card-lg);
 }
+
+a {
+  text-decoration: underline;
+  color: var(--color-link);
+}
 </style>

pages/legal/terms.vue

@@ -201,4 +201,9 @@ export default {
   @extend %card;
   padding: var(--spacing-card-sm) var(--spacing-card-lg);
 }
+
+a {
+  text-decoration: underline;
+  color: var(--color-link);
+}
 </style>

pages/mod/_id.vue

@@ -84,13 +84,6 @@
             >
               <span>Versions</span>
             </nuxt-link>
-            <nuxt-link
-              v-if="currentMember"
-              :to="'/mod/' + (mod.slug ? mod.slug : mod.id) + '/settings'"
-              class="tab"
-            >
-              <span>Settings</span>
-            </nuxt-link>
             <a
               v-if="mod.wiki_url"
               :href="mod.wiki_url"
@@ -127,7 +120,14 @@
               <ExternalIcon />
               <span>Discord</span>
             </a>
-            <div class="filler" />
+            <nuxt-link
+              v-if="currentMember"
+              :to="'/mod/' + mod.id + '/settings'"
+              class="tab settings-tab"
+            >
+              <SettingsIcon />
+              <span>Settings</span>
+            </nuxt-link>
           </div>
         </div>
         <div class="mod-content">
@@ -162,7 +162,7 @@
                 "
                 class="value"
               >
-                {{ $dayjs(mod.published).fromNow() }}
+                {{ formatTime(mod.published) }}
               </p>
             </div>
           </div>
@@ -195,7 +195,7 @@
                 "
                 class="value"
               >
-                {{ $dayjs(mod.updated).fromNow() }}
+                {{ formatTime(mod.updated) }}
               </p>
             </div>
           </div>
@@ -368,6 +368,7 @@ import ReportIcon from '~/assets/images/utils/report.svg?inline'
 import FollowIcon from '~/assets/images/utils/heart.svg?inline'
 
 import ExternalIcon from '~/assets/images/utils/external.svg?inline'
+import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
 
 import ForgeIcon from '~/assets/images/categories/forge.svg?inline'
 import FabricIcon from '~/assets/images/categories/fabric.svg?inline'
@@ -380,6 +381,7 @@ export default {
     MFooter,
     Categories,
     ExternalIcon,
+    SettingsIcon,
     ForgeIcon,
     FabricIcon,
     DownloadIcon,
@@ -501,6 +503,13 @@ export default {
 
       this.userFollows.splice(this.userFollows.indexOf(this.mod.id), 1)
     },
+    formatTime(date) {
+      let defaultMessage = this.$dayjs(date).fromNow()
+      if (defaultMessage.length > 13) {
+        defaultMessage = defaultMessage.replace('minutes', 'min.')
+      }
+      return defaultMessage
+    },
   },
   head() {
     return {
@@ -557,32 +566,42 @@ export default {
   flex-direction: column;
   align-items: center;
   text-align: center;
+  padding: 1rem;
 
   @extend %card-spaced-b;
-  width: 100%;
   .icon {
-    margin: auto 0;
+    margin: unset 0;
+    height: 6.08rem;
+    @media screen and (min-width: 1024px) {
+      align-self: flex-start;
+    }
     img {
-      width: 6rem;
+      height: 100%;
-      height: 6rem;
+      width: auto;
-      margin: var(--spacing-card-md);
+      margin: 0;
       border-radius: var(--size-rounded-icon);
-      object-fit: contain;
     }
   }
   .info {
     @extend %column;
+    display: flex;
+    justify-content: flex-start;
+    height: calc(100% - 0.2rem);
+    p {
+      margin: 0;
+    }
     .title {
-      margin: var(--spacing-card-md) var(--spacing-card-md) 0 0;
+      margin: 0;
       color: var(--color-text-dark);
       font-size: var(--font-size-lg);
     }
     .description {
-      margin: var(--spacing-card-sm) var(--spacing-card-md) 0 0;
+      margin-top: var(--spacing-card-sm);
+      margin-bottom: 0.5rem;
       color: var(--color-text-dark);
     }
     .alt-nav {
-      margin: var(--spacing-card-sm) var(--spacing-card-md) 0 0;
+      margin-top: auto;
       p {
         margin: 0;
       }
@@ -590,30 +609,73 @@ export default {
   }
   .buttons {
     @extend %row;
-    margin: var(--spacing-card-md) var(--spacing-card-md) var(--spacing-card-md)
-      0;
 
     button,
     a {
-      margin: 0.2rem 0 0 0.2rem;
+      margin: 0;
+      padding: 0.2rem 0.5rem;
+      display: flex;
+
+      &:not(:last-child) {
+        margin-right: 0.5rem;
+        @media screen and (min-width: 1024px) {
+          margin-right: 0;
+          margin-bottom: 0.5rem;
+        }
+      }
+    }
+  }
+
+  > div {
+    margin-bottom: 1rem;
+    &:last-child {
+      margin-bottom: 0;
     }
   }
 
   @media screen and (min-width: 1024px) {
-    align-items: unset;
+    display: grid;
-    text-align: unset;
+    grid-template-columns: auto 1fr auto;
-    flex-direction: row;
+    padding: 1rem;
+    grid-gap: 1rem;
+    text-align: left;
 
     .buttons {
+      align-self: flex-start;
       flex-direction: column;
-      margin-left: auto;
+    }
+
+    > div {
+      margin-bottom: 0;
     }
   }
 }
 
 .mod-navigation {
   @extend %card-spaced-b;
-  padding-bottom: 0.2rem;
+  padding: 0 1rem;
+
+  .tabs {
+    overflow-x: auto;
+    padding: 0;
+
+    .tab {
+      padding: 0;
+      margin: 0.9rem 0.5rem 0.8rem 0.5rem;
+      &:first-child {
+        margin-left: 0;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .settings-tab {
+    @media screen and (min-width: 1024px) {
+      margin-left: auto !important;
+    }
+  }
 }
 
 .mod-info {

pages/mod/_id/settings.vue

@@ -42,7 +42,7 @@
         </div>
       </label>
     </section>
-    <div class="section-header columns">
+    <div class="section-header columns team-invite">
       <h3 class="column-grow-1">Team members</h3>
       <div class="column">
         <input
@@ -417,12 +417,30 @@ export default {
 
     .main-info {
       margin-bottom: var(--spacing-card-lg);
+
+      @media screen and (min-width: 1024px) {
+        label {
+          align-items: center;
+          input {
+            margin-left: 1rem;
+          }
+        }
+      }
     }
     .permissions {
       margin: 1rem 0;
+      max-width: 45rem;
       display: grid;
-      grid-template-columns: 10rem 10rem 10rem;
+      grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-      grid-template-rows: 1.5rem 1.5rem 1.5rem;
+      grid-gap: 0.5rem;
+
+      label {
+        flex-direction: row;
+        input {
+          flex: none;
+          margin-right: 0.5rem;
+        }
+      }
     }
   }
 
@@ -469,10 +487,37 @@ section {
       text-align: center;
       height: fit-content;
       flex: 1;
+      @media screen and (max-width: 1024px) {
+        margin: 0.5rem 0 1rem 0;
+      }
     }
     div:hover {
       cursor: pointer;
     }
   }
 }
+
+.team-invite {
+  @media screen and (max-width: 1024px) {
+    flex-direction: column;
+    h3 {
+      margin-bottom: 0.5rem;
+    }
+  }
+  > div {
+    input {
+      margin-right: 1rem;
+    }
+    @media screen and (max-width: 500px) {
+      display: flex;
+      flex-direction: column;
+      input {
+        margin: 0;
+      }
+      button {
+        margin-top: 0.5rem;
+      }
+    }
+  }
+}
 </style>

pages/mods.vue

@@ -613,9 +613,11 @@ export default {
 
         this.currentPage = newPageNumber
         if (pageAmount > 4) {
-          if (this.currentPage + 1 >= pageAmount) {
+          if (this.currentPage + 3 >= pageAmount) {
             this.pages = [
               1,
+              '-',
+              pageAmount - 4,
               pageAmount - 3,
               pageAmount - 2,
               pageAmount - 1,
@@ -624,13 +626,15 @@ export default {
           } else if (this.currentPage > 4) {
             this.pages = [
               1,
+              '-',
               this.currentPage - 1,
               this.currentPage,
               this.currentPage + 1,
+              '-',
               pageAmount,
             ]
           } else {
-            this.pages = [1, 2, 3, 4, pageAmount]
+            this.pages = [1, 2, 3, 4, 5, '-', pageAmount]
           }
         } else {
           this.pages = Array.from({ length: pageAmount }, (_, i) => i + 1)
@@ -716,6 +720,12 @@ export default {
     margin-right: 0.5rem;
     display: flex;
     width: auto;
+    @media screen and (max-width: 350px) {
+      flex-direction: column;
+      .mobile-filters-button {
+        margin: 0.5rem 0 0 0;
+      }
+    }
     .per-page {
       margin-left: 0.5rem;
       display: none;
@@ -739,7 +749,7 @@ export default {
 .search-bottom {
   align-items: center;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   background: var(--color-raised-bg);
   border-radius: var(--size-rounded-card);
   padding: 0 1rem;
@@ -752,6 +762,7 @@ export default {
   }
   @media screen and (min-width: 550px) {
     padding: 0.25rem 1rem 0.25rem 1rem;
+    justify-content: flex-end;
     .per-page {
       display: unset;
     }

pages/user/_id.vue

@@ -227,6 +227,8 @@ export default {
   .buttons {
     @extend %column;
 
+    margin-top: 16px;
+
     .iconified-button {
       max-width: 4.5rem;
     }

vercel.json

@@ -0,0 +1,9 @@
+{
+  "builds": [
+    {
+      "src": "nuxt.config.js",
+      "use": "@nuxtjs/vercel-builder",
+      "config": {}
+    }
+  ]
+}