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"

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 0.5rem;
-  height: 2rem;
-  border-radius: 2rem;
+  padding: 0;
+  margin: 0;
+  width: 2em;
+  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: 2rem;
+  height: 2em;
   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;