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/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);