Desktop CSS Optimize

KeeJef · Apr 25, 2022 · e167d9a · e167d9a
1 parent c22fc17
commit e167d9a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -9,9 +9,10 @@
       type="button"
       class="arconnectButton"
     >
-      Arconnect 💵
+      Arconnect
+      <span v-if="!walletConnected">💵</span>
+      <span v-if="walletConnected">🟢</span>
     </button>
-    <button class="arconnectButton" v-if="walletConnected">🟢</button>
   </div>
   <div class="titleImage">
     <a href=""><img class="logoSize" src="./assets/nav-logo.png" /></a>
@@ -72,6 +73,7 @@ export default {
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   text-align: center;
 }
+
 .recentTorrents {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
@@ -88,10 +90,14 @@ export default {
   font-size: 15px;
   cursor: pointer;
   background-color: #eee;
+  display: block;
+  margin-left: auto;
+  margin-right: 0;
 }
 .connectHeader {
-  text-align: right;
-  width: 90%;
+  margin: 0 auto;
+  max-width: 1200px;
+  text-align: center;
 }
 .active {
   background: #ccc;

diff --git a/src/components/tableComp.vue b/src/components/tableComp.vue
@@ -106,6 +106,7 @@ export default {
 #torrentTable {
   width: 80%;
   border-collapse: collapse;
+  max-width: 1200px;
 }
 
 #torrentTable td,

diff --git a/src/components/torrentComp.vue b/src/components/torrentComp.vue
@@ -6,13 +6,13 @@
     <td>
       <span class="magnetSpan"> <a v-bind:href="magnetLink">🧲</a></span>
     </td>
-    <td>{{seeders}}</td>
-    <td>{{leechers}}</td>
+    <td>{{ seeders }}</td>
+    <td>{{ leechers }}</td>
   </tr>
 </template>
 
 <script>
-import {getSeedersAndLeechers} from '../composables/arweaveFunctions.js'
+import { getSeedersAndLeechers } from "../composables/arweaveFunctions.js";
 
 export default {
   name: "TorrentComp",
@@ -22,22 +22,21 @@ export default {
     dateUploaded: String,
     magnetLink: String,
   },
-  data(){
-    return{
+  data() {
+    return {
       seeders: "",
-      leechers: ""
-    }
+      leechers: "",
+    };
   },
-  async mounted () {
-
+  async mounted() {
     try {
-      var seedLeechData = await getSeedersAndLeechers(btoa(this.magnetLink))
-      this.seeders = await seedLeechData.seeds 
-      this.leechers = await seedLeechData.leechers
+      var seedLeechData = await getSeedersAndLeechers(btoa(this.magnetLink));
+      this.seeders = await seedLeechData.seeds;
+      this.leechers = await seedLeechData.leechers;
     } catch (error) {
-      console.log(error)
+      console.log(error);
     }
-  }
+  },
 };
 </script>
 
@@ -53,4 +52,13 @@ body {
     "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
+
+.magnetSpan {
+  transform: rotate(270deg);
+  display: inline-block;
+}
+
+.magnetSpan a {
+  text-decoration: none;
+}
 </style>
diff --git a/src/components/uploadTorrentComp.vue b/src/components/uploadTorrentComp.vue
@@ -137,6 +137,7 @@ export default {
   overflow: hidden;
   background-color: #f1f1f1;
   display: block;
+  max-width: 600px;
 }
 
 .inline-buttons {