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"
2021-05-27 09:27:13 -07:00
parent b224f1d78d
commit 4d64df37f5
20 changed files with 397 additions and 100 deletions
--- a/layouts/default.vue
+++ b/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;