Remove redundant bottom borders

chaintope · May 8, 2024 · 89d9245 · 89d9245
1 parent fffe419
commit 89d9245
Showing 5 changed files with 31 additions and 22 deletions.
diff --git a/frontend/src/app/address/address.page.html b/frontend/src/app/address/address.page.html
@@ -152,10 +152,7 @@
                 </ng-container>
               </ion-col>
             </ion-row>
-            <ion-row
-              *ngIf="!!input.prevout.colorId"
-              class="table-border-bottom"
-            >
+            <ion-row *ngIf="!!input.prevout.colorId">
               <ion-col
                 size="8"
                 class="ion-margin-bottom link-color cursor-pointer font-14 ellipsis"
@@ -164,6 +161,7 @@
                 Color ID: {{ input.prevout?.colorId | formatColorId }}
               </ion-col>
             </ion-row>
+            <ion-row class="table-border-bottom"></ion-row>
           </ng-container>
         </ion-col>
         <ion-col size="4">
@@ -193,7 +191,7 @@
                 </ng-container>
               </ion-col>
             </ion-row>
-            <ion-row *ngIf="!!output.colorId" class="table-border-bottom">
+            <ion-row *ngIf="!!output.colorId">
               <ion-col
                 size="8"
                 class="ion-margin-bottom link-color cursor-pointer font-14 ellipsis"
@@ -202,6 +200,7 @@
                 Color ID: {{ output.colorId | formatColorId }}
               </ion-col>
             </ion-row>
+            <ion-row class="table-border-bottom"></ion-row>
           </ng-container>
         </ion-col>
       </ion-row>

diff --git a/frontend/src/app/block/block.page.html b/frontend/src/app/block/block.page.html
@@ -190,10 +190,7 @@
                       </ng-container>
                     </ion-col>
                   </ion-row>
-                  <ion-row
-                    *ngIf="!!input.prevout.colorId"
-                    class="table-border-bottom"
-                  >
+                  <ion-row *ngIf="!!input.prevout.colorId">
                     <ion-col
                       size="8"
                       class="ion-margin-bottom link-color cursor-pointer font-14 ellipsis"
@@ -202,6 +199,7 @@
                       Color ID: {{ input.prevout.colorId | formatColorId }}
                     </ion-col>
                   </ion-row>
+                  <span class="table-border-bottom"></span>
                 </div>
               </div>
             </ion-col>

diff --git a/frontend/src/app/color/color.page.html b/frontend/src/app/color/color.page.html
@@ -91,7 +91,7 @@ <h3 id="color-header-text">Transactions</h3>
                   *ngIf="!input.is_coinbase && !!input.prevout.colorId && input.prevout.colorId === colorId"
                 >
                   {{ input.prevout?.value }}
-                  <span class="cursor-pointer">COIN</span>
+                  <span>COIN</span>
                 </ng-container>
                 <ng-container
                   *ngIf="!input.is_coinbase && !input.prevout.colorId"
@@ -102,8 +102,7 @@ <h3 id="color-header-text">Transactions</h3>
               </ion-col>
             </ion-row>
             <ion-row
-              *ngIf="!!input.prevout.colorId"
-              class="table-border-bottom"
+              *ngIf="!!input.prevout.colorId && input.prevout.colorId !== colorId"
             >
               <ion-col
                 size="8"
@@ -113,6 +112,14 @@ <h3 id="color-header-text">Transactions</h3>
                 Color ID: {{ input.prevout.colorId | formatColorId }}
               </ion-col>
             </ion-row>
+            <ion-row
+              *ngIf="!!input.prevout.colorId && input.prevout.colorId === colorId"
+            >
+              <ion-col size="8" class="font-14 ellipsis">
+                Color ID: {{ input.prevout.colorId | formatColorId }}
+              </ion-col>
+            </ion-row>
+            <ion-row class="table-border-bottom"></ion-row>
           </ng-container>
         </ion-col>
         <ion-col size="4">
@@ -142,15 +149,15 @@ <h3 id="color-header-text">Transactions</h3>
                   *ngIf="!!output.colorId && output.colorId === colorId"
                 >
                   {{ output.value }}
-                  <span class="cursor-pointer">COIN</span>
+                  <span>COIN</span>
                 </ng-container>
                 <ng-container *ngIf="!output.colorId">
                   {{ output.value | asTpc }}
                   <span>TPC</span>
                 </ng-container>
               </ion-col>
             </ion-row>
-            <ion-row *ngIf="!!output.colorId" class="table-border-bottom">
+            <ion-row *ngIf="!!output.colorId && output.colorId !== colorId">
               <ion-col
                 size="8"
                 class="link-color cursor-pointer font-14 ellipsis"
@@ -159,6 +166,12 @@ <h3 id="color-header-text">Transactions</h3>
                 Color ID: {{ output.colorId | formatColorId }}
               </ion-col>
             </ion-row>
+            <ion-row *ngIf="!!output.colorId && output.colorId === colorId">
+              <ion-col size="8" class="font-14 ellipsis">
+                Color ID: {{ output.colorId | formatColorId }}
+              </ion-col>
+            </ion-row>
+            <ion-row class="table-border-bottom"></ion-row>
           </ng-container>
         </ion-col>
       </ion-row>

diff --git a/frontend/src/app/transaction/transaction.page.html b/frontend/src/app/transaction/transaction.page.html
@@ -120,10 +120,7 @@
                           </ng-container>
                         </ion-col>
                       </ion-row>
-                      <ion-row
-                        *ngIf="!!vin.prevout.colorId"
-                        class="table-border-bottom"
-                      >
+                      <ion-row *ngIf="!!vin.prevout.colorId">
                         <ion-col
                           size="8"
                           class="link-color cursor-pointer font-14 ellipsis"
@@ -242,10 +239,7 @@
                           </ng-container>
                         </ion-col>
                       </ion-row>
-                      <ion-row
-                        *ngIf="!!vout.colorId"
-                        class="table-border-bottom"
-                      >
+                      <ion-row *ngIf="!!vout.colorId">
                         <ion-col
                           size="8"
                           class="link-color cursor-pointer font-14 ellipsis"

diff --git a/frontend/src/global.scss b/frontend/src/global.scss
@@ -99,6 +99,11 @@ ion-toast {
   padding: 10px 10px;
 }
 
+:last-child.table-border-bottom {
+  border-bottom: 0px;
+  padding: 10px 10px;
+}
+
 .ellipsis {
   text-overflow: ellipsis;
   white-space: nowrap;