Partial Mobile Support (#156)

* Add partial mobile support

* Remove file used for seperate PR

* Add mobile support for cookie consent, make dropdown close on page change

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,24 @@
+---
+name: Bug report
+about: Create a report to help us improve labrinth
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: feature request
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

assets/styles/components.scss

@@ -239,7 +239,10 @@
   align-items: center;
   padding: 0.5rem 0.25rem 0.2rem;
   margin: auto 0.5rem;
-  border-bottom: 3px solid transparent;
+
+  span {
+    border-bottom: 3px solid transparent;
+  }
 
   svg {
     width: 1rem;
@@ -249,13 +252,19 @@
 
   &:hover,
   &:focus {
-    border-bottom: 3px solid var(--color-brand-disabled);
     color: var(--color-text-medium);
+
+    span {
+      border-bottom: 3px solid var(--color-brand-disabled);
+    }
   }
 
   &.nuxt-link-exact-active {
-    border-bottom: 3px solid var(--color-brand);
     color: var(--color-text-dark);
+
+    span {
+      border-bottom: 3px solid var(--color-brand);
+    }
   }
 }
 
@@ -300,7 +309,10 @@
 
 .sidebar-l {
   @extend .sidebar;
-  margin-right: var(--spacing-card-lg);
+
+  @media screen and (min-width: 1024px) {
+    margin-right: var(--spacing-card-lg);
+  }
 }
 
 .sidebar-r {
@@ -420,6 +432,53 @@
   }
 }
 
+label {
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (min-width: 1024px) {
+    flex-direction: row;
+  }
+
+  span {
+    flex: 2;
+    padding-right: var(--spacing-card-lg);
+  }
+
+  input,
+  .multiselect,
+  .input-group {
+    flex: 3;
+    height: fit-content;
+  }
+
+  input[type='button'] {
+    height: fit-content;
+    flex: 1;
+  }
+  input[type='button']:hover {
+    cursor: pointer;
+  }
+
+  div,
+  a {
+    height: fit-content;
+    flex: 1;
+  }
+  div:hover {
+    cursor: pointer;
+  }
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+
+  * {
+    margin-bottom: var(--spacing-card-sm);
+  }
+}
+
 .switch {
   -webkit-appearance: none;
   -moz-appearance: none;

assets/styles/layout.scss

@@ -22,13 +22,12 @@
   margin: var(--spacing-card-lg);
   .page-contents {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     .content {
       width: 100%;
     }
-    @media screen and (min-width: 900px) {
-    }
     @media screen and (min-width: 1024px) {
+      flex-direction: row;
       max-width: 1280px;
       margin-left: auto;
       margin-right: auto;

components/ads/CookieConsent.vue

@@ -45,6 +45,8 @@ export default {
       this.$store.commit('consent/add_scope', true)
       this.$store.commit('consent/remove_scope', true)
       this.$store.dispatch('consent/save', this.$cookies)
+
+      this.shown = false
     },
     review() {
       this.shown = false
@@ -56,25 +58,43 @@ export default {
 
 <style scoped lang="scss">
 .container {
+  width: 100%;
+  text-align: center;
+
   z-index: 20;
   position: fixed;
   bottom: 0;
   right: 0;
   .banner {
     @extend %card;
-    margin: 0 2rem 2rem 0;
     padding: 1rem;
-    max-width: 18vw;
-    border-left: solid 5px var(--color-brand);
     font-size: 1.05rem;
+    border-radius: 0;
   }
   .actions {
     display: flex;
     flex-direction: row;
     margin-top: 1rem;
+    justify-content: center;
+
     .btn {
       margin-right: 0.5rem;
     }
   }
+
+  @media screen and (min-width: 1024px) {
+    width: unset;
+    text-align: unset;
+
+    .banner {
+      max-width: 18vw;
+      border-left: solid 5px var(--color-brand);
+      margin: 0 2rem 2rem 0;
+    }
+
+    .actions {
+      justify-content: unset;
+    }
+  }
 }
 </style>

components/layout/MFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer :class="{ centered }">
+  <footer :class="{ centered, 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>.
@@ -47,6 +47,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    hideSmall: {
+      type: Boolean,
+      default: false,
+    },
+    hideBig: {
+      type: Boolean,
+      default: false,
+    },
   },
 }
 </script>
@@ -57,7 +65,7 @@ export default {
 }
 
 footer {
-  padding: 2rem 0 5rem 0;
+  padding: 2rem 0 2rem 0;
   display: flex;
   flex-direction: column;
 
@@ -86,4 +94,16 @@ footer {
 a {
   text-decoration: underline;
 }
+
+.hideSmall {
+  @media screen and (max-width: 1024px) {
+    display: none;
+  }
+}
+
+.hideBig {
+  @media screen and (min-width: 1024px) {
+    display: none;
+  }
+}
 </style>

components/layout/ModPage.vue

@@ -74,20 +74,20 @@
               :to="'/mod/' + (mod.slug ? mod.slug : mod.id)"
               class="tab"
             >
-              Description
+              <span>Description</span>
             </nuxt-link>
             <nuxt-link
               :to="'/mod/' + (mod.slug ? mod.slug : mod.id) + '/versions'"
               class="tab"
             >
-              Versions
+              <span>Versions</span>
             </nuxt-link>
             <nuxt-link
               v-if="currentMember"
               :to="'/mod/' + mod.id + '/settings'"
               class="tab"
             >
-              Settings
+              <span>Settings</span>
             </nuxt-link>
             <a
               v-if="mod.wiki_url"
@@ -96,7 +96,7 @@
               class="tab"
             >
               <ExternalIcon />
-              Wiki
+              <span>Wiki</span>
             </a>
             <a
               v-if="mod.issues_url"
@@ -105,7 +105,7 @@
               class="tab"
             >
               <ExternalIcon />
-              Issues
+              <span>Issues</span>
             </a>
             <a
               v-if="mod.source_url"
@@ -114,7 +114,7 @@
               class="tab"
             >
               <ExternalIcon />
-              Source
+              <span>Source</span>
             </a>
             <a
               v-if="mod.discord_url"
@@ -123,7 +123,7 @@
               class="tab"
             >
               <ExternalIcon />
-              Discord
+              <span>Discord</span>
             </a>
             <div class="filler" />
           </div>
@@ -476,7 +476,11 @@ export default {
 
 <style lang="scss" scoped>
 .header {
-  @extend %row;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
   @extend %card-spaced-b;
   width: 100%;
   .icon {
@@ -508,12 +512,24 @@ export default {
     }
   }
   .buttons {
-    @extend %column;
+    @extend %row;
     margin: var(--spacing-card-md) var(--spacing-card-md) var(--spacing-card-md)
-      auto;
+      0;
 
-    button {
+    button,
-      margin: 0.2rem 0 0 0;
+    a {
+      margin: 0.2rem 0 0 0.2rem;
+    }
+  }
+
+  @media screen and (min-width: 1024px) {
+    align-items: unset;
+    text-align: unset;
+    flex-direction: row;
+
+    .buttons {
+      flex-direction: column;
+      margin-left: auto;
     }
   }
 }
@@ -524,9 +540,12 @@ export default {
 }
 
 .mod-info {
-  width: 30rem;
   height: auto;
-  margin-left: var(--spacing-card-lg);
+
+  @media screen and (min-width: 1024px) {
+    width: 30rem;
+    margin-left: var(--spacing-card-lg);
+  }
 
   .section {
     padding: var(--spacing-card-sm);

components/ui/ProjectCard.vue

@@ -1,103 +1,105 @@
 <template>
   <article class="project-card">
-    <div class="icon">
+    <div class="columns">
-      <nuxt-link v-if="isModrinth" :to="'/mod/' + id">
+      <div class="icon">
-        <img
+        <nuxt-link v-if="isModrinth" :to="'/mod/' + id">
-          :src="
+          <img
-            iconUrl
+            :src="iconUrl || 'https://cdn.modrinth.com/placeholder.svg?inline'"
-              ? iconUrl
+            :alt="name"
-              : 'https://cdn.modrinth.com/placeholder.svg?inline'
+          />
-          "
+        </nuxt-link>
-          :alt="name"
-        />
-      </nuxt-link>
-    </div>
-    <div class="info">
-      <div class="top">
-        <h2 class="title">
-          <nuxt-link v-if="isModrinth" :to="'/mod/' + id">{{ name }}</nuxt-link>
-          <a v-else :href="pageUrl">{{ name }}</a>
-        </h2>
-        <p v-if="author" class="author">
-          by <nuxt-link :to="'/user/' + author">{{ author }}</nuxt-link>
-        </p>
       </div>
-      <p class="description">
+      <div class="info">
-        {{ description }}
+        <div class="top">
-      </p>
+          <h2 class="title">
-      <div :class="{ vertical: editMode }" class="bottom">
+            <nuxt-link v-if="isModrinth" :to="'/mod/' + id">{{
-        <div class="stats">
+              name
-          <div v-if="status !== null" class="stat">
+            }}</nuxt-link>
-            <div class="info">
+            <a v-else :href="pageUrl">{{ name }}</a>
-              <h4>Status</h4>
+          </h2>
-              <span v-if="status === 'approved'" class="badge green">
+          <p v-if="author" class="author">
-                Approved
+            by <nuxt-link :to="'/user/' + author">{{ author }}</nuxt-link>
-              </span>
+          </p>
-              <span v-if="status === 'rejected'" class="badge red">
+        </div>
-                Rejected
+        <p class="description">
-              </span>
+          {{ description }}
-              <span v-if="status === 'draft'" class="badge yellow">Draft</span>
+        </p>
-              <span v-if="status === 'processing'" class="badge yellow">
+        <div :class="{ vertical: editMode }" class="bottom">
-                Processing
+          <div class="stats">
-              </span>
+            <div v-if="status !== null" class="stat">
-              <span v-if="status === 'unlisted'" class="badge gray">
+              <div class="info">
-                Unlisted
+                <h4>Status</h4>
-              </span>
+                <span v-if="status === 'approved'" class="badge green">
-              <span v-if="status === 'unknown'" class="badge gray">
+                  Approved
-                Unknown
+                </span>
-              </span>
+                <span v-if="status === 'rejected'" class="badge red">
-            </div>
+                  Rejected
-          </div>
+                </span>
-          <div class="stat">
+                <span v-if="status === 'draft'" class="badge yellow"
-            <DownloadIcon aria-hidden="true" />
+                  >Draft</span
-            <div class="info">
+                >
-              <h4>Downloads</h4>
+                <span v-if="status === 'processing'" class="badge yellow">
-              <p class="value">{{ formatNumber(downloads) }}</p>
+                  Processing
-            </div>
+                </span>
-          </div>
+                <span v-if="status === 'unlisted'" class="badge gray">
-          <div class="stat">
+                  Unlisted
-            <CalendarIcon aria-hidden="true" />
+                </span>
-            <div class="info">
+                <span v-if="status === 'unknown'" class="badge gray">
-              <h4>Created</h4>
+                  Unknown
-              <p
+                </span>
-                v-tooltip="
+              </div>
-                  $dayjs(createdAt).format(
+            </div>
-                    '[Created on] YYYY-MM-DD [at] HH:mm A'
+            <div class="stat">
-                  )
+              <DownloadIcon aria-hidden="true" />
-                "
+              <div class="info">
-                class="value"
+                <h4>Downloads</h4>
-              >
+                <p class="value">{{ formatNumber(downloads) }}</p>
-                {{ $dayjs(createdAt).fromNow() }}
+              </div>
-              </p>
+            </div>
-            </div>
+            <div class="stat">
-          </div>
+              <CalendarIcon aria-hidden="true" />
-          <div class="stat">
+              <div class="info">
-            <EditIcon aria-hidden="true" />
+                <h4>Created</h4>
-            <div class="info">
+                <p
-              <h4>Updated</h4>
+                  v-tooltip="
-              <p
+                    $dayjs(createdAt).format(
-                v-tooltip="
+                      '[Created on] YYYY-MM-DD [at] HH:mm A'
-                  $dayjs(updatedAt).format(
+                    )
-                    '[Updated on] YYYY-MM-DD [at] HH:mm A'
+                  "
-                  )
+                  class="value"
-                "
+                >
-                class="value"
+                  {{ $dayjs(createdAt).fromNow() }}
-              >
+                </p>
-                {{ $dayjs(updatedAt).fromNow() }}
+              </div>
-              </p>
+            </div>
-            </div>
+            <div class="stat">
-          </div>
+              <EditIcon aria-hidden="true" />
-          <div v-if="latestVersion" class="stat">
+              <div class="info">
-            <TagIcon aria-hidden="true" />
+                <h4>Updated</h4>
-            <div class="info">
+                <p
-              <h4>Available For</h4>
+                  v-tooltip="
-              <p class="value">
+                    $dayjs(updatedAt).format(
-                {{ latestVersion }}
+                      '[Updated on] YYYY-MM-DD [at] HH:mm A'
-              </p>
+                    )
-            </div>
+                  "
-          </div>
+                  class="value"
+                >
+                  {{ $dayjs(updatedAt).fromNow() }}
+                </p>
+              </div>
+            </div>
+            <div v-if="latestVersion" class="stat">
+              <TagIcon aria-hidden="true" />
+              <div class="info">
+                <h4>Available For</h4>
+                <p class="value">
+                  {{ latestVersion }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <Categories :categories="categories" />
         </div>
-        <Categories :categories="categories" />
       </div>
     </div>
     <div v-if="editMode" class="buttons">
@@ -182,10 +184,6 @@ export default {
       type: String,
       default: null,
     },
-    role: {
-      type: String,
-      default: null,
-    },
     isModrinth: {
       type: Boolean,
       default: false,
@@ -204,6 +202,12 @@ export default {
   @extend %row;
   @extend %card-spaced-b;
   width: 100%;
+  flex-direction: column;
+
+  @media screen and (min-width: 1024px) {
+    flex-direction: row;
+  }
+
   .icon {
     margin: auto 0;
     img {
@@ -277,6 +281,11 @@ export default {
   }
   .buttons {
     @extend %column;
+    margin-bottom: 1rem;
+
+    @media screen and (min-width: 1024px) {
+      margin-bottom: 0;
+    }
   }
 }
 </style>

layouts/default.vue

@@ -12,22 +12,25 @@
           </NuxtLink>
           <span class="badge yellow">Beta</span>
         </section>
-        <section class="column-grow-5 nav">
+        <section class="menu-icon">
-          <div class="tabs">
+          <button @click="toggleNavBar">
-            <NuxtLink to="/mods" class="tab">
+            <HamburgerIcon />
-              <span>Mods</span>
+          </button>
-            </NuxtLink>
+        </section>
-            <client-only>
+        <section ref="nav" class="right-group columns">
+          <section class="column-grow-5 nav">
+            <div class="tabs">
+              <NuxtLink to="/mods" class="tab">
+                <span>Mods</span>
+              </NuxtLink>
               <div v-if="this.$auth.user" class="section">
                 <NuxtLink to="/dashboard/projects" class="tab">
                   <span>Dashboard</span>
                 </NuxtLink>
               </div>
-            </client-only>
+            </div>
-          </div>
+          </section>
-        </section>
+          <section class="column-grow">
-        <section class="column-grow">
-          <client-only>
             <template v-if="this.$auth.user">
               <section class="user-controls">
                 <div
@@ -57,11 +60,11 @@
                         </NuxtLink>
                       </li>
                       <!--<li v-tooltip="'Not implemented yet'" class="hidden">
-                        <NuxtLink :to="userTeamsUrl" disabled>
+                          <NuxtLink :to="userTeamsUrl" disabled>
-                          <UsersIcon />
+                            <UsersIcon />
-                          <span>Teams</span>
+                            <span>Teams</span>
-                        </NuxtLink>
+                          </NuxtLink>
-                      </li>-->
+                        </li>-->
                       <li>
                         <button @click="changeTheme">
                           <MoonIcon v-if="$colorMode.value === 'light'" />
@@ -91,7 +94,7 @@
                 >
               </section>
             </template>
-          </client-only>
+          </section>
         </section>
       </section>
     </header>
@@ -115,6 +118,8 @@ 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 HamburgerIcon from '~/assets/images/utils/hamburger.svg?inline'
+
 import NotificationIcon from '~/assets/images/sidebar/notifications.svg?inline'
 
 import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
@@ -136,6 +141,7 @@ export default {
     LogOutIcon,
     GitHubIcon,
     NotificationIcon,
+    HamburgerIcon,
   },
   directives: {
     ClickOutside,
@@ -156,7 +162,22 @@ export default {
       return `${this.userUrl}/teams`
     },
   },
+  watch: {
+    $route() {
+      this.$refs.nav.className = 'right-group'
+    },
+  },
   methods: {
+    toggleNavBar() {
+      window.scrollTo(0, 0)
+      const currentlyActive = this.$refs.nav.className === 'right-group active'
+      this.$refs.nav.className = `right-group${
+        currentlyActive ? '' : ' active'
+      }`
+      document.body.scrollTop = 0
+      document.body.style.overflow =
+        document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
+    },
     toggleDropdown() {
       this.isDropdownOpen = !this.isDropdownOpen
     },
@@ -211,162 +232,201 @@ export default {
           }
         }
       }
-      section.nav {
+
-        .tabs {
+      section.menu-icon {
+        display: flex;
+        margin-left: auto;
+        align-items: center;
+      }
+
+      section.right-group {
+        display: flex;
+        flex-grow: 5;
+
+        flex-direction: column-reverse;
+
+        overflow-y: auto;
+        position: fixed;
+        width: 100vw;
+        top: var(--size-navbar-height);
+        height: calc(100vh - var(--size-navbar-height));
+        right: -100vw;
+        background-color: var(--color-raised-bg);
+        transition: right 150ms;
+        z-index: 100;
+
+        &.active {
+          right: 0;
+        }
+
+        section.nav {
+          .tabs {
+            flex-direction: column;
+
+            .section {
+              border-top: 3px solid var(--color-brand-disabled);
+              margin-top: 0.75rem;
+              padding-top: 0.75rem;
+            }
+            .tab {
+              font-size: var(--font-size-md);
+
+              span {
+                margin: 0 auto;
+              }
+            }
+          }
+        }
+        section.user-controls {
+          align-items: center;
+          display: flex;
+          justify-content: space-between;
           position: relative;
           top: 50%;
           transform: translateY(-50%);
-          .section {
+          min-width: 12rem;
-            border-left: 3px solid var(--color-brand-disabled);
+
-            margin-left: 0.75rem;
+          width: 13rem;
-            padding-left: 0.75rem;
+          margin: 0 auto;
-          }
+
-          .tab {
+          .dropdown {
-            font-size: var(--font-size-md);
+            position: relative;
-          }
+            display: inline-block;
-        }
+            flex-grow: 1;
-      }
+            &:hover .control {
-      section.user-controls {
+              border-radius: var(--size-rounded-control);
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
-        min-width: 12rem;
-        .dropdown {
-          position: relative;
-          display: inline-block;
-          flex-grow: 1;
-          &:hover .control {
-            border-radius: var(--size-rounded-control);
-            background: var(--color-button-bg);
-          }
-          &.open {
-            .control {
               background: var(--color-button-bg);
-              border-radius: var(--size-rounded-control)
+            }
-                var(--size-rounded-control) 0 0;
+            &.open {
+              .control {
+                background: var(--color-button-bg);
+                border-radius: var(--size-rounded-control)
+                  var(--size-rounded-control) 0 0;
+                .dropdown-icon {
+                  transform: rotate(180deg);
+                }
+              }
+              .content {
+                display: unset;
+              }
+            }
+            .control {
+              border-radius: var(--size-rounded-control);
+              align-items: center;
+              display: flex;
+              padding: 0.3rem 0.75rem;
+              position: relative;
+              z-index: 11;
+              width: 100%;
+              .avatar {
+                align-items: center;
+                display: flex;
+                flex-grow: 1;
+                .icon {
+                  border-radius: 50%;
+                  height: 2rem;
+                  width: 2rem;
+                  margin-left: 0.5rem;
+                  margin-right: 0.25rem;
+                }
+                span {
+                  display: block;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  color: var(--color-text-dark);
+                  font-weight: var(--font-weight-medium);
+                }
+              }
               .dropdown-icon {
-                transform: rotate(180deg);
+                color: var(--color-text-dark);
+                transition: 150ms ease transform;
               }
             }
             .content {
-              display: unset;
+              margin: 0 0 0 0;
+              min-width: 10rem;
+              width: 100%;
+              position: fixed;
+              display: none;
             }
-          }
+            button {
-          .control {
+              background-color: transparent;
-            border-radius: var(--size-rounded-control);
-            align-items: center;
-            display: flex;
-            padding: 0.3rem 0.75rem;
-            position: relative;
-            z-index: 10;
-            width: 100%;
-            .avatar {
-              align-items: center;
-              display: flex;
-              flex-grow: 1;
-              .icon {
-                border-radius: 50%;
-                height: 2rem;
-                width: 2rem;
-                margin-left: 0.5rem;
-                margin-right: 0.25rem;
-              }
-              span {
-                display: block;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                color: var(--color-text-dark);
-                font-weight: var(--font-weight-medium);
-              }
-            }
-            .dropdown-icon {
               color: var(--color-text-dark);
-              transition: 150ms ease transform;
-            }
-          }
-          .content {
-            margin: 0rem 0 0 0rem;
-            min-width: 10rem;
-            width: 100%;
-            position: fixed;
-            display: none;
-          }
-          button {
-            background-color: transparent;
-            color: var(--color-text-dark);
-            margin: 0;
-            padding: 0;
-            font-weight: var(--font-weight-medium);
-          }
-          ul {
-            background-color: var(--color-button-bg);
-            border-radius: 0 0 var(--size-rounded-control)
-              var(--size-rounded-control);
-            box-shadow: var(--shadow-dropdown);
-            display: flex;
-            flex-direction: column;
-            margin: 0;
-            list-style: none;
-            padding: 0.5rem 0;
-            z-index: 1;
-            hr {
-              background-color: var(--color-divider-dark);
-              border: none;
-              color: var(--color-divider-dark);
-              height: 2px;
-              margin: 0.5rem 0;
-            }
-            li {
               margin: 0;
-              &:hover,
+              padding: 0;
-              &:focus,
+              font-weight: var(--font-weight-medium);
-              &:active {
+            }
-                background-color: var(--color-button-bg-active);
+            ul {
-                color: var(--color-text-dark);
+              background-color: var(--color-button-bg);
+              border-radius: 0 0 var(--size-rounded-control)
+                var(--size-rounded-control);
+              box-shadow: var(--shadow-dropdown);
+              display: flex;
+              flex-direction: column;
+              margin: 0;
+              list-style: none;
+              padding: 0.5rem 0;
+              z-index: 1;
+              hr {
+                background-color: var(--color-divider-dark);
+                border: none;
+                color: var(--color-divider-dark);
+                height: 2px;
+                margin: 0.5rem 0;
               }
-              a,
+              li {
-              button {
+                margin: 0;
-                align-items: center;
+                &:hover,
-                display: flex;
+                &:focus,
-                padding: 0.75rem 1.5rem;
+                &:active {
-                color: var(--color-text-dark);
+                  background-color: var(--color-button-bg-active);
-                svg {
+                  color: var(--color-text-dark);
-                  color: inherit;
-                  height: 1rem;
-                  width: 1rem;
                 }
-                span {
+                a,
-                  margin-left: 0.5rem;
+                button {
+                  align-items: center;
+                  display: flex;
+                  padding: 0.75rem 1.5rem;
+                  color: var(--color-text-dark);
+                  svg {
+                    color: inherit;
+                    height: 1rem;
+                    width: 1rem;
+                  }
+                  span {
+                    margin-left: 0.5rem;
+                  }
                 }
               }
             }
           }
         }
-      }
+
-      section.auth-prompt {
+        section.auth-prompt {
-        display: flex;
+          display: flex;
-        align-items: center;
+          align-items: center;
-        height: 100%;
+          height: 100%;
-        .log-in-button {
+
-          text-align: center;
+          .log-in-button {
-          border-radius: var(--size-rounded-control);
+            margin: 0 auto;
-          background-color: var(--color-brand);
+
-          white-space: nowrap;
+            text-align: center;
-          outline: none;
+            border-radius: var(--size-rounded-control);
-          color: var(--color-brand-inverted);
+            background-color: var(--color-brand);
-          display: block;
+            white-space: nowrap;
-          padding: 0.5rem 0.75rem;
+            outline: none;
-          svg {
+            color: var(--color-brand-inverted);
-            vertical-align: middle;
+            display: block;
-            margin-right: 0.5rem;
+            padding: 0.5rem 0.75rem;
-          }
+            svg {
-          &:hover,
+              vertical-align: middle;
-          &:focus {
+              margin-right: 0.5rem;
-            background-color: var(--color-brand-2);
+            }
+            &:hover,
+            &:focus {
+              background-color: var(--color-brand-2);
+            }
           }
         }
       }
@@ -374,12 +434,57 @@ export default {
         max-width: 1280px;
         margin-left: auto;
         margin-right: auto;
+
+        section.menu-icon {
+          display: none;
+        }
+
+        section.right-group {
+          flex-direction: unset;
+          overflow-y: unset;
+          position: unset;
+          width: unset;
+          top: unset;
+          height: unset;
+          right: unset;
+          background-color: unset;
+          transition: unset;
+          z-index: unset;
+
+          section.nav {
+            .tabs {
+              flex-direction: unset;
+              position: relative;
+              top: 50%;
+              transform: translateY(-50%);
+
+              .section {
+                margin-top: unset;
+                padding-top: unset;
+                border-top: unset;
+
+                border-left: 3px solid var(--color-brand-disabled);
+                margin-left: 0.75rem;
+                padding-left: 0.75rem;
+              }
+            }
+          }
+
+          section.user-controls {
+            width: unset;
+            margin: unset;
+          }
+
+          section.auth-prompt {
+            margin: 0;
+          }
+        }
       }
     }
   }
 
   main {
-    grid-area: 'main';
+    grid-area: main;
   }
 }
 

middleware/auth.js

@@ -6,11 +6,15 @@ export default async function (context) {
     }
 
     if (context.route.query.code) {
+      const date = new Date()
+      date.setFullYear(new Date().getFullYear() + 1)
+
       context.app.$cookies.set('auth-token', context.route.query.code, {
         secure: true,
         sameSite: 'Strict',
         maxAge: 60 * 60 * 2, // 2 hours
         httpOnly: true,
+        expires: date,
         path: '/',
       })
 

pages/dashboard.vue

@@ -44,10 +44,11 @@
             Privacy Settings
           </nuxt-link>
         </div>
-        <m-footer class="footer" />
+        <m-footer class="footer" hide-small />
       </div>
       <div class="content">
         <NuxtChild />
+        <m-footer class="footer" hide-big centered />
       </div>
     </div>
   </div>
@@ -79,7 +80,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.footer {
+.hideSmall {
   padding-top: 0;
 }
 </style>

pages/dashboard/privacy.vue

@@ -118,12 +118,6 @@ export default {
   }
 }
 .consent-container {
-  overflow-x: auto;
-  max-height: 90vh;
-
-  @media screen and (min-width: 900px) {
-    max-height: 50vh;
-  }
   .h1 {
     font-size: 2rem;
     font-weight: bold;

pages/dashboard/settings.vue

@@ -232,35 +232,4 @@ section {
   @extend %card;
   padding: var(--spacing-card-md) var(--spacing-card-lg);
 }
-
-label {
-  display: flex;
-
-  span {
-    flex: 2;
-    padding-right: var(--spacing-card-lg);
-  }
-
-  input {
-    flex: 3;
-    height: fit-content;
-  }
-  input[type='button'] {
-    height: fit-content;
-    flex: 1;
-  }
-  input[type='button']:hover {
-    cursor: pointer;
-  }
-
-  div,
-  a {
-    text-align: center;
-    height: fit-content;
-    flex: 1;
-  }
-  div:hover {
-    cursor: pointer;
-  }
-}
 </style>

pages/mod/_id/version/_version/index.vue

@@ -408,6 +408,7 @@ export default {
   .version-header {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
 
     h4,
     span {
@@ -416,9 +417,13 @@ export default {
 
     .buttons {
       display: flex;
-      margin-left: auto;
+      align-self: flex-end;
 
-      .action {
+      @media screen and (min-width: 1024px) {
+        margin-left: auto;
+      }
+
+      .action:not(:first-child) {
         margin: 0 0 0 0.5rem;
       }
     }

pages/mod/create.vue

@@ -741,31 +741,6 @@ export default {
   }
 }
 
-label {
-  display: flex;
-
-  span {
-    flex: 2;
-    padding-right: var(--spacing-card-lg);
-  }
-
-  input,
-  .multiselect,
-  .input-group {
-    flex: 3;
-    height: fit-content;
-  }
-}
-
-.input-group {
-  display: flex;
-  flex-direction: column;
-
-  * {
-    margin-bottom: var(--spacing-card-sm);
-  }
-}
-
 .textarea-wrapper {
   display: flex;
   flex-direction: column;
@@ -784,14 +759,31 @@ label {
   grid-template:
     'header       header      header' auto
     'advert       advert      advert' auto
-    'essentials   essentials  mod-icon' auto
+    'essentials   essentials  essentials' auto
+    'mod-icon     mod-icon    mod-icon' auto
     'game-sides   game-sides  game-sides' auto
     'description  description description' auto
     'versions     versions    versions' auto
-    'extra-links  license     license' auto
+    'extra-links  extra-links extra-links' auto
-    'donations    donations   .' auto
+    'license      license     license' auto
+    'donations    donations   donations' auto
     'footer       footer      footer' auto
     / 4fr 1fr 4fr;
+
+  @media screen and (min-width: 1024px) {
+    grid-template:
+      'header       header      header' auto
+      'advert       advert      advert' auto
+      'essentials   essentials  mod-icon' auto
+      'game-sides   game-sides  game-sides' auto
+      'description  description description' auto
+      'versions     versions    versions' auto
+      'extra-links  license     license' auto
+      'donations    donations   .' auto
+      'footer       footer      footer' auto
+      / 4fr 1fr 4fr;
+  }
+
   column-gap: var(--spacing-card-md);
   row-gap: var(--spacing-card-md);
 }

pages/mods.vue

@@ -52,8 +52,9 @@
               >
               </Multiselect>
             </div>
-            <div class="mobile-filters-button">
+            <div class="labeled-control mobile-filters-button">
-              <button @click="toggleFiltersMenu">Filter</button>
+              <h3>Filters</h3>
+              <button @click="toggleFiltersMenu">Open</button>
             </div>
           </div>
           <pagination
@@ -92,7 +93,7 @@
           </div>
         </div>
         <section v-if="pages.length > 1" class="search-bottom">
-          <div class="labeled-control">
+          <div class="per-page labeled-control">
             <h3>Per Page</h3>
             <Multiselect
               v-model="maxResults"
@@ -113,19 +114,22 @@
             @switch-page="onSearchChangeToTop"
           ></pagination>
         </section>
+        <m-footer class="footer" hide-big centered />
       </div>
-      <section id="filters" class="filters">
+      <section ref="filters" class="filters">
         <div class="filters-wrapper">
           <section class="filter-group">
-            <button class="filter-button-done" @click="toggleFiltersMenu">
-              Done
-            </button>
             <div class="filter-clear-button">
               <h3>Categories</h3>
-              <button class="iconified-button" @click="clearFilters">
+              <div class="columns">
-                <ExitIcon />
+                <button class="filter-button-done" @click="toggleFiltersMenu">
-                Clear filters
+                  Close
-              </button>
+                </button>
+                <button class="iconified-button" @click="clearFilters">
+                  <ExitIcon />
+                  Clear filters
+                </button>
+              </div>
             </div>
             <SearchFilter
               :active-filters="facets"
@@ -280,7 +284,7 @@
           />
         </div>
         <Advertisement ad-unit="square" size="250x250,200x200" />
-        <m-footer class="footer" />
+        <m-footer class="footer" hide-small />
       </section>
     </div>
   </div>
@@ -584,9 +588,10 @@ export default {
       }
     },
     toggleFiltersMenu() {
-      const filters = document.getElementById('filters')
+      const currentlyActive = this.$refs.filters.className === 'filters active'
-      const currentlyActive = filters.className === 'filters active'
+      this.$refs.filters.className = `filters${
-      filters.className = `filters${currentlyActive ? '' : ' active'}`
+        currentlyActive ? '' : ' active'
+      }`
       document.body.style.overflow =
         document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
     },
@@ -631,28 +636,26 @@ export default {
     min-width: 200px;
   }
   .iconified-input {
-    width: 100%;
+    width: auto;
+    margin-right: auto;
   }
   .sort-paginate {
     margin-left: 0.5rem;
     margin-right: 0.5rem;
     display: flex;
-    width: 100%;
+    width: auto;
     .per-page {
       margin-left: 0.5rem;
       display: none;
     }
   }
-  @media screen and (min-width: 900px) {
+  @media screen and (min-width: 1050px) {
     flex-flow: row;
-    .iconified-input {
-      width: auto;
-    }
     .sort-paginate {
       width: auto;
     }
   }
-  @media screen and (min-width: 1024px) {
+  @media screen and (min-width: 450px) {
     .sort-paginate {
       .per-page {
         display: unset;
@@ -667,22 +670,32 @@ export default {
   justify-content: flex-end;
   background: var(--color-raised-bg);
   border-radius: var(--size-rounded-card);
-  padding: 0.25rem 1rem 0.25rem 1rem;
+  padding: 0 1rem;
   select {
     width: 100px;
     margin-right: 20px;
   }
+  .per-page {
+    display: none;
+  }
+  @media screen and (min-width: 550px) {
+    padding: 0.25rem 1rem 0.25rem 1rem;
+    .per-page {
+      display: unset;
+    }
+  }
 }
 
 .labeled-control {
   h3 {
     @extend %small-label;
-    margin-left: 0.5rem;
+    margin-left: 0.25rem;
   }
 }
 
 .mobile-filters-button {
   display: inline-block;
+  margin-left: 0.5rem;
   button {
     margin-top: 0;
     height: 2.5rem;
@@ -691,7 +704,7 @@ export default {
   }
 
   // Hide button on larger screens where it's not needed
-  @media screen and (min-width: 900px) {
+  @media screen and (min-width: 1250px) {
     display: none;
   }
 }
@@ -720,7 +733,7 @@ export default {
     right: 0;
   }
   // Larger screens that don't need to collapse
-  @media screen and (min-width: 900px) {
+  @media screen and (min-width: 1250px) {
     top: 0;
     right: auto;
     position: unset;
@@ -737,7 +750,7 @@ export default {
       border-radius: var(--size-rounded-card);
     }
   }
-  @media screen and (min-width: 1024px) {
+  @media screen and (min-width: 1250px) {
     width: 300px;
   }
 }
@@ -752,13 +765,8 @@ export default {
     justify-content: space-between;
   }
 
-  .filter-button-done {
-    display: block;
-    width: 100%;
-  }
-
   // Large screens that don't collapse
-  @media screen and (min-width: 900px) {
+  @media screen and (min-width: 1250px) {
     .filter-button-done {
       display: none;
     }

pages/user/_id.vue

@@ -56,7 +56,7 @@
           </div>
         </div>
         <Advertisement ad-unit="square" size="250x250,200x200" />
-        <m-footer class="footer" />
+        <m-footer class="footer" hide-small />
       </div>
       <div class="content">
         <Advertisement ad-unit="banner" size="728x90,468x60" />
@@ -76,6 +76,7 @@
             :is-modrinth="true"
           />
         </div>
+        <m-footer class="footer" hide-big centered />
       </div>
     </div>
   </div>
@@ -194,7 +195,9 @@ export default {
 
 <style lang="scss" scoped>
 .sidebar-l {
-  min-width: 21rem;
+  @media screen and (min-width: 1024px) {
+    min-width: 21rem;
+  }
 
   .user-info {
     @extend %row;