Merge pull request #38 from dskvr/feature/alternating-rows

add alternative rows

src/components/RelayGroupedListComponent.vue

@@ -43,7 +43,7 @@
       <span>NIP-11</span>
     </th> -->
   </tr>
-  <tr v-for="relay in query(section)" :key="{relay}" :class="getResultClass(relay)" class="relay">
+  <tr v-for="(relay, index) in query(section)" :key="{relay}" :class="getResultClass(relay, index)" class="relay">
     <RelaySingleComponent
       :relay="relay"
       :result="result[relay]"
@@ -149,12 +149,13 @@ export default defineComponent({
         restricted: this.section == "restricted"
       }
     },
-    getResultClass (relay) {
+    getResultClass (relay, index) {
       return {
         loaded: this.result?.[relay]?.state == 'complete',
         online: this.section != "offline",
         offline: this.section == "offline",
-        public: this.section == "public"
+        public: this.section == "public",
+        even: index % 2,
       }
     },
     query (aggregate) {
@@ -255,11 +256,8 @@ export default defineComponent({
   }
 
   .nip-11 a { cursor: pointer }
-  </style>
 
-  <style scoped>
-  .dark-mode div ::v-deep(.modal-content) {
-    border-color: #2d3748;
-    background-color: #1a202c;
+  tr.even {
+    background:#f9f9f9
   }
   </style>

src/components/RelayListComponent.vue

@@ -43,7 +43,7 @@
       <span>NIP-11</span>
     </th> -->
   </tr>
-  <tr v-for="relay in sortByLatency()" :key="{relay}" class="relay" :class="getResultClass(relay)">
+  <tr v-for="(relay, index) in sortByLatency()" :key="{relay}" class="relay" :class="getResultClass(relay, index)">
     <RelaySingleComponent
       :relay="relay"
       :result="result[relay]"
@@ -126,9 +126,10 @@ export default defineComponent({
     //     restricted: this.section == "restricted"
     //   }
     // },
-    getResultClass (relay) {
+    getResultClass (relay, index) {
       return {
-        loaded: this.result?.[relay]?.state == 'complete'
+        loaded: this.result?.[relay]?.state == 'complete',
+        even: index % 2
       }
     },
     sort_by_latency(ascending) {
@@ -252,11 +253,8 @@ export default defineComponent({
   }
 
   .nip-11 a { cursor: pointer }
-  </style>
 
-  <style scoped>
-  .dark-mode div ::v-deep(.modal-content) {
-    border-color: #2d3748;
-    background-color: #1a202c;
+  tr.even {
+    background:#f9f9f9
   }
   </style>

src/components/RelaySingleComponent.vue

@@ -276,4 +276,9 @@ td.verified span {
   position:relative;
   left:-7px;
 }
+
+ td {
+    padding-top:2px;
+    padding-bottom:2px;
+  }
 </style>

src/pages/ByStatus.vue

@@ -301,3 +301,8 @@ export default defineComponent({
 
 })
 </script>
+<style scoped>
+table {
+  border-collapse: collapse !important;
+}
+</style>

src/pages/HomePage.vue

@@ -134,4 +134,7 @@ export default defineComponent({
   position:relative;
   z-index:1;
 }
+table {
+  border-collapse: collapse !important;
+}
 </style>