Mobile Optimization

src/App.vue

@@ -67,6 +67,7 @@ export default {
 </script>
 
 <style>
+
 .titleImage {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
@@ -98,8 +99,21 @@ export default {
   margin: 0 auto;
   max-width: 1200px;
   text-align: center;
+  width: 80%;
 }
 .active {
   background: #ccc;
 }
+
+@media screen and (max-width: 700px) {
+  .logoSize{
+    width: 50%;
+    min-width: 200px;
+  }
+  .connectHeader {
+    width: 100%;
+    padding-bottom: 10px;
+  }
+}
+
 </style>

src/components/searchComp.vue

@@ -137,4 +137,10 @@ export default {
   text-align: center;
   padding-bottom: 20px;
 }
+
+@media screen and (max-width: 700px) {
+  .searchBox{
+      width: 65vw;
+  }
+}
 </style>

src/components/tableComp.vue

@@ -1,14 +1,14 @@
 <template>
-<div v-if="loading" class="loadingBar" >Loading recent torrents</div>
+  <div v-if="loading" class="loadingBar">Loading recent torrents</div>
   <div class="loadedTorrentBox">
     <table id="torrentTable">
       <tr>
-        <th>Category</th>
-        <th>Title</th>
-        <th>Uploaded Date</th>
-        <th>Link</th>
-        <th>Seeders</th>
-        <th>Leachers</th>
+        <th id="category">{{ category }}</th>
+        <th>{{ title }}</th>
+        <th id="date">{{ dateUploaded }}</th>
+        <th>{{ magnetLink }}</th>
+        <th>{{ seeders }}</th>
+        <th>{{ leechers }}</th>
       </tr>
       <torrentComp
         v-for="arweaveData in store.arweaveDataArray"
@@ -28,24 +28,52 @@ import {
   getTxFromId,
 } from "../composables/arweaveFunctions.js";
 import torrentComp from "./torrentComp.vue";
-import { reactive } from 'vue'
+import { reactive } from "vue";
 
 export const store = reactive({
   arweaveDataArray: [],
-})
+});
 
 export default {
   name: "TableComp ",
   data() {
     return {
       store,
       loading: true,
+      category: "Category",
+      title: "Title",
+      dateUploaded: "Date Uploaded",
+      magnetLink: "Link",
+      seeders: "Seeders",
+      leechers: "Leechers",
+      windowWidth: 0,
     };
   },
   components: {
     torrentComp,
   },
-  methods: {},
+  methods: {
+    handleResize() {
+      this.windowWidth = window.innerWidth;
+      //shorten titles if viewport too small
+      if (window.innerWidth < 565) {
+        this.category = "Type";
+        this.title = "Title";
+        this.dateUploaded = "Date";
+        this.magnetLink = "Link";
+        this.seeders = "Seed";
+        this.leechers = "Leech";
+      }
+    },
+  },
+
+  created() {
+    window.addEventListener("resize", this.handleResize);
+    this.handleResize();
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.handleResize);
+  },
 
   async mounted() {
     try {
@@ -77,24 +105,34 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
-.loadingBar{
+.loadingBar {
   text-align: center;
   font-size: 1.5em;
 }
 
-    .loadingBar::after {
-      display: inline-block;
-      animation: dotty steps(1,end) 1s infinite;
-      content: '';
-    }
-
-    @keyframes dotty {
-        0%   { content: ''; }
-        25%  { content: '.'; }
-        50%  { content: '..'; }
-        75%  { content: '...'; }
-        100% { content: ''; }
-    }
+.loadingBar::after {
+  display: inline-block;
+  animation: dotty steps(1, end) 1s infinite;
+  content: "";
+}
+
+@keyframes dotty {
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "";
+  }
+}
 
 .loadedTorrentBox {
   padding-top: 10px;
@@ -113,12 +151,17 @@ export default {
 #torrentTable th {
   border: 1px solid #ddd;
   padding: 8px;
+  word-wrap: break-word;
 }
 
 #torrentTable tr:nth-child(even) {
   background-color: #f2f2f2;
 }
 
+#torrentTable tr {
+  background-color: #e2e2e2;
+}
+
 #torrentTable tr:hover {
   background-color: #ddd;
 }
@@ -130,4 +173,29 @@ export default {
   background-color: #005cc8;
   color: white;
 }
+
+@media screen and (max-width: 700px) {
+  #torrentTable {
+    width: 95%;
+  }
+  .loadedTorrentBox{
+    font-size: 0.85em;
+  }
+}
+@media screen and (max-width: 565px) {
+  #torrentTable td:nth-child(1){
+    display: none;
+  }
+  #category {
+    display: none;
+  }
+}
+@media screen and (max-width: 340px) {
+  #torrentTable td:nth-child(3){
+    display: none;
+  }
+  #date {
+    display: none;
+  }
+}
 </style>

src/components/torrentComp.vue

@@ -45,6 +45,7 @@ export default {
 table {
   border-collapse: collapse;
   background-color: #f2f2f2;
+  table-layout: auto
 }
 
 body {

src/components/uploadTorrentComp.vue

@@ -115,6 +115,7 @@ export default {
 
 <!-- Clean repetitive CSS  -->
 <style>
+
 .formBox {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
@@ -231,4 +232,10 @@ export default {
     transform: rotate(360deg);
   }
 }
+
+@media screen and (max-width: 700px) {
+  .content{
+      width: 80%;
+  }
+}
 </style>