keep aside when empty

telosnetwork · Jan 29, 2024 · ec066f7 · ec066f7
1 parent 5098291
commit ec066f7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/src/components/evm/CollapsibleAside.vue b/src/components/evm/CollapsibleAside.vue
@@ -5,6 +5,7 @@ const props = defineProps<{
     header: string;
     content: { text: string; bold?: boolean; }[];
     alwaysOpen?: boolean, // if true, the expansion item will always be open with no toggle
+    centerOnDesktop?: boolean, // if true, the aside will be centered on large screens (default is off to the side)
 }>();
 
 // data
@@ -25,6 +26,7 @@ function handleExpansionItemUpdate() {
     :class="{
         'c-collapsible-aside': true,
         'c-collapsible-aside--always-open': alwaysOpen,
+        'c-collapsible-aside--centered': centerOnDesktop,
     }"
 >
     <q-expansion-item
@@ -58,6 +60,13 @@ function handleExpansionItemUpdate() {
         }
     }
 
+    &--centered {
+        @include md-and-up {
+            display: flex;
+            justify-content: center;
+        }
+    }
+
     &__expansion-item {
         border-radius: 4px;
         border: 2px solid var(--accent-color-5);

diff --git a/src/pages/evm/allowances/AllowancesPage.vue b/src/pages/evm/allowances/AllowancesPage.vue
@@ -70,6 +70,7 @@ const numberOfAllowancesToBatchRevoke = ref(0);
 
 // computed
 const userAddress = computed(() => useAccountStore().currentAccount.account);
+const showEmptyState = computed(() => !loading.value && shapedAllowanceRows.value.length === 0);
 const shapedAllowanceRows = computed(() => {
     const {
         asset,
@@ -253,20 +254,20 @@ function handleRevokeSelectedClicked() {
     </template>
 
     <div class="c-allowances-page__body">
-        <template v-if="loading || shapedAllowanceRows.length > 0">
-            <CollapsibleAside
-                :header="asideHeader"
-                :content="asideContent"
-                class="q-mb-lg"
-            />
+        <CollapsibleAside
+            :header="asideHeader"
+            :content="asideContent"
+            :center-on-desktop="showEmptyState"
+            class="q-mb-lg"
+        />
 
-            <AllowancesPageControls
-                :enable-revoke-button="enableRevokeButton"
-                @search-updated="handleSearchUpdated"
-                @include-cancelled-updated="handleIncludeCancelledUpdated"
-                @revoke-selected="handleRevokeSelectedClicked"
-            />
-        </template>
+        <AllowancesPageControls
+            v-if="!showEmptyState"
+            :enable-revoke-button="enableRevokeButton"
+            @search-updated="handleSearchUpdated"
+            @include-cancelled-updated="handleIncludeCancelledUpdated"
+            @revoke-selected="handleRevokeSelectedClicked"
+        />
 
         <div v-if="loading" class="q-mt-lg">
             <q-skeleton
@@ -276,7 +277,7 @@ function handleRevokeSelectedClicked() {
                 type="rect"
             />
         </div>
-        <div v-else-if="!loading && shapedAllowanceRows.length === 0">
+        <div v-else-if="showEmptyState">
             <h2 class="c-allowances-page__empty-title">
                 {{ $t('evm_allowances.no_allowances') }}
             </h2>