Fixed mobile version

Author: skymen

package-lock.json

@@ -9,6 +9,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@vueuse/core": "^10.1.2",
     "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.2.47",
     "vuetify": "^3.2.1",

package.json

@@ -37,4 +37,28 @@ function reportIssue() {
   padding-top: 50px;
   padding-bottom: 50px;
 }
+
+/* media query for mobile padding */
+@media (max-width: 700px) {
+  .parent {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+/* media query for small screen padding min width 801 */
+@media (min-width: 701px) and (max-width: 1200px) {
+  .parent {
+    padding-left: 10%;
+    padding-right: 10%;
+  }
+}
+
+/* media query for small screen padding min width 801 */
+@media (min-width: 1201px) and (max-width: 1500px) {
+  .parent {
+    padding-left: 20%;
+    padding-right: 20%;
+  }
+}
 </style>

src/App.vue

@@ -3,14 +3,38 @@
     <v-toolbar
       style="padding-left: 15px; padding-right: 15px"
       :color="content.hasWebsite ? 'primary' : ''"
+      v-if="!isMobile"
     >
-      <h2>{{ content.name }}</h2>
+      <h2 class="title">{{ content.name }}</h2>
       <v-spacer></v-spacer>
       <div v-if="content.hasWebsite">
-        <v-btn @click="openWebsite" text> Open Website </v-btn>
+        <v-btn @click="openWebsite" variant="text"> Open Website </v-btn>
         <v-icon right>mdi-open-in-new</v-icon>
       </div>
     </v-toolbar>
+    <div v-else>
+      <v-sheet
+        width="100%"
+        style="
+          padding-left: 15px;
+          padding-right: 15px;
+          flex-direction: row;
+          display: flex;
+          align-items: center;
+        "
+        :color="content.hasWebsite ? 'primary' : 'rgba(255, 255, 255, 0.1)'"
+      >
+        <h2 class="title">{{ content.name }}</h2>
+        <v-spacer></v-spacer>
+        <v-icon v-if="content.hasWebsite" right>mdi-open-in-new</v-icon>
+      </v-sheet>
+
+      <v-sheet v-if="content.hasWebsite" width="100%" class="button">
+        <v-btn @click="openWebsite" variant="text" style="width: 100%">
+          Open Website
+        </v-btn>
+      </v-sheet>
+    </div>
     <v-card-text>
       {{ content.description }}
     </v-card-text>
@@ -21,7 +45,7 @@
           {{ content.status }}
         </v-chip>
       </div>
-      <div>
+      <div style="display: flex; flex-wrap: nowrap">
         <v-btn @click="openRepo">Open Repo</v-btn>
         <v-icon>mdi-github</v-icon>
       </div>
@@ -31,6 +55,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { useMediaQuery } from "@vueuse/core";
 
 // define prop for content object
 const props = defineProps({
@@ -47,6 +72,8 @@ const chipColor = computed(() => {
   }[props.content.status];
 });
 
+const isMobile = useMediaQuery("(max-width: 700px)");
+
 function openWebsite() {
   window.open(props.content.url);
 }
@@ -77,4 +104,14 @@ function openRepo() {
   display: flex;
   color: white;
 }
+
+.button {
+  width: 100%;
+  /* linear gradient to white */
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.1) 100%
+  );
+}
 </style>