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

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 {
-      margin: 0.2rem 0 0 0;
+    button,
+    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">
-      <nuxt-link v-if="isModrinth" :to="'/mod/' + id">
-        <img
-          :src="
-            iconUrl
-              ? iconUrl
-              : 'https://cdn.modrinth.com/placeholder.svg?inline'
-          "
-          :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 class="columns">
+      <div class="icon">
+        <nuxt-link v-if="isModrinth" :to="'/mod/' + id">
+          <img
+            :src="iconUrl || 'https://cdn.modrinth.com/placeholder.svg?inline'"
+            :alt="name"
+          />
+        </nuxt-link>
       </div>
-      <p class="description">
-        {{ description }}
-      </p>
-      <div :class="{ vertical: editMode }" class="bottom">
-        <div class="stats">
-          <div v-if="status !== null" class="stat">
-            <div class="info">
-              <h4>Status</h4>
-              <span v-if="status === 'approved'" class="badge green">
-                Approved
-              </span>
-              <span v-if="status === 'rejected'" class="badge red">
-                Rejected
-              </span>
-              <span v-if="status === 'draft'" class="badge yellow">Draft</span>
-              <span v-if="status === 'processing'" class="badge yellow">
-                Processing
-              </span>
-              <span v-if="status === 'unlisted'" class="badge gray">
-                Unlisted
-              </span>
-              <span v-if="status === 'unknown'" class="badge gray">
-                Unknown
-              </span>
-            </div>
-          </div>
-          <div class="stat">
-            <DownloadIcon aria-hidden="true" />
-            <div class="info">
-              <h4>Downloads</h4>
-              <p class="value">{{ formatNumber(downloads) }}</p>
-            </div>
-          </div>
-          <div class="stat">
-            <CalendarIcon aria-hidden="true" />
-            <div class="info">
-              <h4>Created</h4>
-              <p
-                v-tooltip="
-                  $dayjs(createdAt).format(
-                    '[Created on] YYYY-MM-DD [at] HH:mm A'
-                  )
-                "
-                class="value"
-              >
-                {{ $dayjs(createdAt).fromNow() }}
-              </p>
-            </div>
-          </div>
-          <div class="stat">
-            <EditIcon aria-hidden="true" />
-            <div class="info">
-              <h4>Updated</h4>
-              <p
-                v-tooltip="
-                  $dayjs(updatedAt).format(
-                    '[Updated on] YYYY-MM-DD [at] HH:mm A'
-                  )
-                "
-                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 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">
+          {{ description }}
+        </p>
+        <div :class="{ vertical: editMode }" class="bottom">
+          <div class="stats">
+            <div v-if="status !== null" class="stat">
+              <div class="info">
+                <h4>Status</h4>
+                <span v-if="status === 'approved'" class="badge green">
+                  Approved
+                </span>
+                <span v-if="status === 'rejected'" class="badge red">
+                  Rejected
+                </span>
+                <span v-if="status === 'draft'" class="badge yellow"
+                  >Draft</span
+                >
+                <span v-if="status === 'processing'" class="badge yellow">
+                  Processing
+                </span>
+                <span v-if="status === 'unlisted'" class="badge gray">
+                  Unlisted
+                </span>
+                <span v-if="status === 'unknown'" class="badge gray">
+                  Unknown
+                </span>
+              </div>
+            </div>
+            <div class="stat">
+              <DownloadIcon aria-hidden="true" />
+              <div class="info">
+                <h4>Downloads</h4>
+                <p class="value">{{ formatNumber(downloads) }}</p>
+              </div>
+            </div>
+            <div class="stat">
+              <CalendarIcon aria-hidden="true" />
+              <div class="info">
+                <h4>Created</h4>
+                <p
+                  v-tooltip="
+                    $dayjs(createdAt).format(
+                      '[Created on] YYYY-MM-DD [at] HH:mm A'
+                    )
+                  "
+                  class="value"
+                >
+                  {{ $dayjs(createdAt).fromNow() }}
+                </p>
+              </div>
+            </div>
+            <div class="stat">
+              <EditIcon aria-hidden="true" />
+              <div class="info">
+                <h4>Updated</h4>
+                <p
+                  v-tooltip="
+                    $dayjs(updatedAt).format(
+                      '[Updated on] YYYY-MM-DD [at] HH:mm A'
+                    )
+                  "
+                  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>