Hide install with modrinth app button on mobile

modrinth · Aug 21, 2024 · fd75186 · fd75186
1 parent 75bf680
commit fd75186
Showing 1 changed file with 34 additions and 23 deletions.
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
@@ -175,30 +175,35 @@
         </div>
       </template>
       <template #default>
-        <div class="mx-auto flex w-[30rem] max-w-[40rem] flex-col gap-4">
-          <div class="mx-auto flex w-fit flex-col">
-            <ButtonStyled color="brand">
-              <a
-                class="w-fit"
-                :href="`modrinth://mod/${project.slug}`"
-                @click="() => installWithApp()"
-              >
-                <ModrinthIcon />
-                Install with Modrinth App
-                <ExternalIcon />
-              </a>
-            </ButtonStyled>
-            <Accordion ref="getModrinthAppAccordion">
-              <nuxt-link class="mt-2 flex justify-center text-brand-blue hover:underline" to="/app">
-                Don't have Modrinth App?
-              </nuxt-link>
-            </Accordion>
-          </div>
+        <div class="mx-auto flex max-w-[40rem] flex-col gap-4 md:w-[30rem]">
+          <div class="modrinth-app-section contents">
+            <div class="mx-auto flex w-fit flex-col">
+              <ButtonStyled color="brand">
+                <a
+                  class="w-fit"
+                  :href="`modrinth://mod/${project.slug}`"
+                  @click="() => installWithApp()"
+                >
+                  <ModrinthIcon />
+                  Install with Modrinth App
+                  <ExternalIcon />
+                </a>
+              </ButtonStyled>
+              <Accordion ref="getModrinthAppAccordion">
+                <nuxt-link
+                  class="mt-2 flex justify-center text-brand-blue hover:underline"
+                  to="/app"
+                >
+                  Don't have Modrinth App?
+                </nuxt-link>
+              </Accordion>
+            </div>
 
-          <div class="flex items-center gap-4 px-4">
-            <div class="flex h-[2px] w-full rounded-2xl bg-button-bg"></div>
-            <span class="flex-shrink-0 text-sm font-semibold text-secondary"> or </span>
-            <div class="flex h-[2px] w-full rounded-2xl bg-button-bg"></div>
+            <div class="flex items-center gap-4 px-4">
+              <div class="flex h-[2px] w-full rounded-2xl bg-button-bg"></div>
+              <span class="flex-shrink-0 text-sm font-semibold text-secondary"> or </span>
+              <div class="flex h-[2px] w-full rounded-2xl bg-button-bg"></div>
+            </div>
           </div>
           <div class="mx-auto flex w-fit flex-col gap-2">
             <ButtonStyled v-if="project.game_versions.length === 1">
@@ -1352,4 +1357,10 @@ const navLinks = computed(() => {
     }
   }
 }
+
+@media (hover: none) and (max-width: 767px) {
+  .modrinth-app-section {
+    display: none;
+  }
+}
 </style>