feat: Consider using feat view related utility classnames (#519)

aeternity · Oct 19, 2023 · eb9284d · eb9284d
1 parent 85927f4
commit eb9284d
Show file tree

Hide file tree

Showing 42 changed files with 143 additions and 667 deletions.
diff --git a/src/components/AccountActivitiesPanel.vue b/src/components/AccountActivitiesPanel.vue
@@ -7,12 +7,12 @@
       @prev-clicked="loadPrevActivities"
       @next-clicked="loadNextActivities">
       <account-activities-table
-        class="account-activities-panel__account-activities-table"
+        class="account-activities-panel__account-activities-table u-hidden-mobile"
         :account-details="accountDetails"
         :account-activities="accountActivities"/>
 
       <account-activities-table-condensed
-        class="account-activities-panel__account-activities-table-condensed"
+        class="u-hidden-desktop"
         :account-details="accountDetails"
         :account-activities="accountActivities"/>
     </paginated-content>
@@ -50,24 +50,14 @@ function loadNextActivities() {
 <style scoped>
 .account-activities-panel {
   padding: var(--space-4) var(--space-1);
-
   @media (--desktop) {
     padding: var(--space-4);
   }
 
   &__account-activities-table {
-    display: none;
-
     @media (--desktop) {
-      display: revert;
       margin-bottom: var(--space-2);
     }
   }
-
-  &__account-activities-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/components/AccountNamesPanel.vue b/src/components/AccountNamesPanel.vue
@@ -5,11 +5,11 @@
       @prev-clicked="loadPrevAccountNames"
       @next-clicked="loadNextAccountNames">
       <account-names-table
-        class="account-names-panel__account-names-table"
+        class="account-names-panel__account-names-table u-hidden-mobile"
         :account-names="accountNames"/>
 
       <account-names-table-condensed
-        class="account-names-panel__account-names-table-condensed"
+        class="u-hidden-desktop"
         :account-names="accountNames"/>
     </paginated-content>
   </app-panel>
@@ -37,20 +37,9 @@ async function loadNextAccountNames() {
 </script>
 
 <style scoped>
-.account-names-panel {
-  &__account-names-table {
-    display: none;
-
-    @media (--desktop) {
-      display: revert;
-      margin-bottom: var(--space-4);
-    }
-  }
-
-  &__account-names-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
+.account-names-panel__account-names-table {
+  @media (--desktop) {
+    margin-bottom: var(--space-4);
   }
 }
 </style>
diff --git a/src/components/AccountTokensPanel.vue b/src/components/AccountTokensPanel.vue
@@ -5,11 +5,11 @@
       @prev-clicked="loadPrevAccountTokens"
       @next-clicked="loadNextAccountTokens">
       <account-tokens-table
-        class="account-tokens-panel__account-tokens-table"
+        class="u-hidden-mobile"
         :account-tokens="accountTokens"/>
 
       <account-tokens-table-condensed
-        class="account-tokens-panel__account-tokens-table-condensed"
+        class="account-tokens-panel__account-tokens-table-condensed u-hidden-desktop"
         :account-tokens="accountTokens"/>
     </paginated-content>
   </app-panel>
@@ -37,20 +37,9 @@ async function loadNextAccountTokens() {
 </script>
 
 <style scoped>
-.account-tokens-panel {
-  &__account-tokens-table {
-    display: none;
-
-    @media (--desktop) {
-      display: revert;
-      margin-bottom: var(--space-4);
-    }
-  }
-
-  &__account-tokens-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
+.account-tokens-panel__account-tokens-table {
+  @media (--desktop) {
+    margin-bottom: var(--space-4);
   }
 }
 </style>
diff --git a/src/components/AccountTransactionsPanel.vue b/src/components/AccountTransactionsPanel.vue
@@ -12,11 +12,11 @@
       </template>
 
       <account-transactions-table
-        class="account-transactions-panel__account-transactions-table"
+        class="account-transactions-panel__account-transactions-table u-hidden-mobile"
         :account-transactions="accountTransactions"/>
 
       <account-transactions-table-condensed
-        class="account-transactions-panel__account-transactions-table-condensed"
+        class="u-hidden-desktop"
         :account-transactions="accountTransactions"/>
     </paginated-content>
   </app-panel>
@@ -65,20 +65,9 @@ function loadNextTransactions() {
 </script>
 
 <style scoped>
-.account-transactions-panel {
-  &__account-transactions-table {
-    display: none;
-
-    @media (--desktop) {
-      display: revert;
-      margin-bottom: var(--space-4);
-    }
-  }
-
-  &__account-transactions-table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
+.account-transactions-panel__account-transactions-table {
+  @media (--desktop) {
+    margin-bottom: var(--space-4);
   }
 }
 </style>
diff --git a/src/components/ContractCallTransactionsPanel.vue b/src/components/ContractCallTransactionsPanel.vue
@@ -9,11 +9,11 @@
       @prev-clicked="loadPrevTransactions"
       @next-clicked="loadNextTransactions">
       <contract-call-transactions-table
-        class="contract-call-transactions-panel__table"
+        class="u-hidden-mobile"
         :contract-call-transactions="contractCallTransactions"/>
 
       <contract-call-transactions-table-condensed
-        class="contract-call-transactions-panel__table-condensed"
+        class="u-hidden-desktop"
         :contract-call-transactions="contractCallTransactions"/>
     </paginated-content>
   </app-panel>
@@ -53,20 +53,3 @@ if (process.client) {
   })
 }
 </script>
-
-<style scoped>
-.contract-call-transactions-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/ContractDetailsPanel.vue b/src/components/ContractDetailsPanel.vue
@@ -4,10 +4,10 @@
       DETAILS
     </template>
     <template #header>
-      <div class="contract-details-panel__hash">
+      <div class="u-hidden-mobile">
         <copy-chip :label="contractDetails.id"/>
       </div>
-      <div class="contract-details-panel__hash-ellipse">
+      <div class="u-hidden-desktop">
         <copy-chip
           :label="formatEllipseHash(contractDetails.id)"
           :clipboard-text="contractDetails.id"/>
@@ -58,10 +58,10 @@
           </th>
           <td class="contract-details-panel__data">
             <app-link :to="`/transactions/${contractDetails.createTransactionHash}`">
-              <span class="contract-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ contractDetails.createTransactionHash }}
               </span>
-              <span class="contract-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(contractDetails.createTransactionHash) }}
               </span>
             </app-link>
@@ -94,10 +94,10 @@
           </th>
           <td class="contract-details-panel__data">
             <app-link :to="`/accounts/${contractDetails.createdBy}`">
-              <span class="contract-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ contractDetails.createdBy }}
               </span>
-              <span class="contract-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(contractDetails.createdBy) }}
               </span>
             </app-link>
@@ -127,10 +127,10 @@
           </th>
           <td class="contract-details-panel__data">
             <app-link :to="`/accounts/${contractDetails.contractAccount}`">
-              <span class="contract-details-panel__hash">
+              <span class="u-hidden-mobile">
                 {{ contractDetails.contractAccount }}
               </span>
-              <span class="contract-details-panel__hash-ellipse">
+              <span class="u-hidden-desktop">
                 {{ formatEllipseHash(contractDetails.contractAccount) }}
               </span>
             </app-link>
@@ -273,18 +273,5 @@ const contractMiddlewareUrl = computed(() =>
       margin-bottom: 0;
     }
   }
-
-  &__hash {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__hash-ellipse {
-    @media (--desktop) {
-      display: none;
-    }
-  }
 }
 </style>
diff --git a/src/components/ContractEventsPanel.vue b/src/components/ContractEventsPanel.vue
@@ -9,13 +9,13 @@
         v-if="contractEvents"
         :contract-details="contractDetails"
         :contract-events="contractEvents"
-        class="contract-events-panel__table"/>
+        class="u-hidden-mobile"/>
 
       <contract-events-table-condensed
         v-if="contractEvents"
         :contract-details="contractDetails"
         :contract-events="contractEvents"
-        class="contract-events-panel__table-condensed"/>
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -40,20 +40,3 @@ function loadNextEvents() {
   fetchContractEvents({ queryParameters: contractEvents.value.next })
 }
 </script>
-
-<style scoped>
-.contract-events-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/ContractsPanel.vue b/src/components/ContractsPanel.vue
@@ -8,12 +8,12 @@
       pagination-style="history"
       @prev-clicked="loadPrevContracts"
       @next-clicked="loadNextContracts">
-      <contract-table-condensed
-        :contracts="contracts"
-        class="contracts-panel__table-condensed"/>
       <contracts-table
         :contracts="contracts"
-        class="contracts-panel__table"/>
+        class="u-hidden-mobile"/>
+      <contract-table-condensed
+        :contracts="contracts"
+        class="u-hidden-desktop"/>
     </paginated-content>
   </app-panel>
 </template>
@@ -53,20 +53,3 @@ if (process.client) {
 }
 
 </script>
-
-<style scoped>
-.contracts-panel {
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
-
-  &__table-condensed {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/DashboardAuctionsPanel.vue b/src/components/DashboardAuctionsPanel.vue
@@ -11,8 +11,8 @@
         name. The shorter the name, the longer the auction lives.
       </template>
     </dashboard-panel-header>
-    <dashboard-auctions-table class="dashboard-auctions-panel__table"/>
-    <dashboard-auctions-swiper class="dashboard-auctions-panel__swiper"/>
+    <dashboard-auctions-table class="u-hidden-mobile"/>
+    <dashboard-auctions-swiper class="u-hidden-desktop"/>
   </app-panel>
 </template>
 
@@ -26,18 +26,5 @@ import AppPanel from '@/components/AppPanel'
   @media (--desktop) {
     padding: var(--space-4);
   }
-
-  &__swiper {
-    @media (--desktop) {
-      display: none;
-    }
-  }
-
-  &__table {
-    display: none;
-    @media (--desktop) {
-      display: revert;
-    }
-  }
 }
 </style>
diff --git a/src/components/DashboardKeyblockPanel.vue b/src/components/DashboardKeyblockPanel.vue
@@ -45,13 +45,13 @@
 
       <keyblock-table
         v-if="selectedKeyblock"
-        class="dashboard-keyblock-panel__keyblock-table"
+        class="dashboard-keyblock-panel__keyblock-table u-hidden-mobile"
         :keyblock="selectedKeyblock"
         :stats="selectedDeltaStats"/>
 
       <keyblock-table-condensed
         v-if="selectedKeyblock"
-        class="dashboard-keyblock-panel__keyblock-table-condensed"
+        class="dashboard-keyblock-panel__keyblock-table-condensed u-hidden-desktop"
         :keyblock="selectedKeyblock"
         :stats="selectedDeltaStats"/>
     </div>
@@ -95,9 +95,7 @@ const {
   }
 
   &__keyblock-table {
-    display: none;
     @media (--desktop) {
-      display: revert;
       margin-bottom: var(--space-2);
     }
   }
@@ -106,7 +104,6 @@ const {
     margin: var(--space-4) 0;
     @media (--desktop) {
       margin: 0;
-      display: none;
     }
   }