fix: fix gap in proposal sidebar bottom (#1003)

* fix: fix gap in proposal sidebar bottom * fix: move global bottom padding to each view * fix: fix gap in votes page bottom --------- Co-authored-by: Chaitanya <[email protected]>
snapshot-labs · Dec 3, 2024 · 7253f12 · 7253f12
1 parent 3519562
commit 7253f12
Show file tree

Hide file tree

Showing 11 changed files with 306 additions and 281 deletions.
diff --git a/apps/ui/src/components/Layout/App.vue b/apps/ui/src/components/Layout/App.vue
@@ -67,10 +67,6 @@ const hasTopNav = computed(() => {
   return 'space-editor' !== String(route.matched[1]?.name);
 });
 
-const bottomPadding = computed(
-  () => !['space-proposal-votes'].includes(String(route.name))
-);
-
 async function handleTransactionAccept() {
   if (
     !walletConnectSpaceKey.value ||
@@ -165,7 +161,7 @@ router.afterEach(() => {
     :class="{ 'overflow-clip': scrollDisabled }"
   >
     <UiLoading v-if="app.loading || !app.init" class="overlay big" />
-    <div v-else :class="['flex min-h-screen', { 'pb-6': bottomPadding }]">
+    <div v-else :class="['flex min-h-screen']">
       <AppBottomNav
         v-if="web3.account && !isWhiteLabel"
         :class="[
@@ -209,7 +205,7 @@ router.afterEach(() => {
       />
       <main class="flex-auto w-full flex">
         <div class="flex-auto w-0 mt-[72px]">
-          <router-view />
+          <router-view class="pb-6" />
         </div>
         <div
           v-if="hasPlaceHolderSidebar"

diff --git a/apps/ui/src/views/My/Explore.vue b/apps/ui/src/views/My/Explore.vue
@@ -144,70 +144,72 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex justify-between p-4 gap-2 gap-y-3 flex-row">
-    <div class="flex flex-row flex-wrap gap-2">
-      <UiSelectDropdown
-        v-model="protocol"
-        class="min-h-[46px]"
-        title="Protocol"
-        gap="12"
-        placement="start"
-        :items="protocols"
-      />
-      <Combobox
-        v-model="network"
-        class="mb-0"
-        inline
-        :gap="12"
-        :definition="{
-          type: 'string',
-          title: 'Network',
-          enum: networks.map(c => c.id),
-          options: networks
-        }"
-      />
-      <UiSelectDropdown
-        v-if="protocol === 'snapshot'"
-        v-model="category"
-        class="min-h-[46px]"
-        title="Category"
-        gap="12"
-        placement="start"
-        :items="categories"
-      />
-    </div>
-    <UiTooltip title="Create new space">
-      <UiButton
-        :to="
-          protocol === 'snapshot' ? 'https://snapshot.org/#/setup' : 'create'
-        "
-        class="!px-0 w-[46px]"
-      >
-        <IH-plus-sm />
-      </UiButton>
-    </UiTooltip>
-  </div>
   <div>
-    <UiLabel label="Spaces" sticky />
-    <UiLoading v-if="spacesStore.loading" class="block m-4" />
-    <div v-else-if="spacesStore.loaded">
-      <UiContainerInfiniteScroll
-        v-if="spacesStore.explorePageSpaces.length"
-        :loading-more="spacesStore.loadingMore"
-        class="justify-center max-w-screen-md 2xl:max-w-screen-xl 3xl:max-w-screen-2xl mx-auto p-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-explore-3 2xl:grid-cols-explore-4 3xl:grid-cols-explore-5 gap-3"
-        @end-reached="
-          spacesStore.fetchMore({ searchQuery: route.query.q as string })
-        "
-      >
-        <SpacesListItem
-          v-for="space in spacesStore.explorePageSpaces"
-          :key="space.id"
-          :space="space"
+    <div class="flex justify-between p-4 gap-2 gap-y-3 flex-row">
+      <div class="flex flex-row flex-wrap gap-2">
+        <UiSelectDropdown
+          v-model="protocol"
+          class="min-h-[46px]"
+          title="Protocol"
+          gap="12"
+          placement="start"
+          :items="protocols"
+        />
+        <Combobox
+          v-model="network"
+          class="mb-0"
+          inline
+          :gap="12"
+          :definition="{
+            type: 'string',
+            title: 'Network',
+            enum: networks.map(c => c.id),
+            options: networks
+          }"
         />
-      </UiContainerInfiniteScroll>
-      <div v-else class="px-4 py-3 flex items-center space-x-2">
-        <IH-exclamation-circle class="inline-block shrink-0" />
-        <span>No results found for your search</span>
+        <UiSelectDropdown
+          v-if="protocol === 'snapshot'"
+          v-model="category"
+          class="min-h-[46px]"
+          title="Category"
+          gap="12"
+          placement="start"
+          :items="categories"
+        />
+      </div>
+      <UiTooltip title="Create new space">
+        <UiButton
+          :to="
+            protocol === 'snapshot' ? 'https://snapshot.org/#/setup' : 'create'
+          "
+          class="!px-0 w-[46px]"
+        >
+          <IH-plus-sm />
+        </UiButton>
+      </UiTooltip>
+    </div>
+    <div>
+      <UiLabel label="Spaces" sticky />
+      <UiLoading v-if="spacesStore.loading" class="block m-4" />
+      <div v-else-if="spacesStore.loaded">
+        <UiContainerInfiniteScroll
+          v-if="spacesStore.explorePageSpaces.length"
+          :loading-more="spacesStore.loadingMore"
+          class="justify-center max-w-screen-md 2xl:max-w-screen-xl 3xl:max-w-screen-2xl mx-auto p-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-explore-3 2xl:grid-cols-explore-4 3xl:grid-cols-explore-5 gap-3"
+          @end-reached="
+            spacesStore.fetchMore({ searchQuery: route.query.q as string })
+          "
+        >
+          <SpacesListItem
+            v-for="space in spacesStore.explorePageSpaces"
+            :key="space.id"
+            :space="space"
+          />
+        </UiContainerInfiniteScroll>
+        <div v-else class="px-4 py-3 flex items-center space-x-2">
+          <IH-exclamation-circle class="inline-block shrink-0" />
+          <span>No results found for your search</span>
+        </div>
       </div>
     </div>
   </div>

diff --git a/apps/ui/src/views/My/Home.vue b/apps/ui/src/views/My/Home.vue
@@ -125,48 +125,50 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Onboarding />
-  <div class="flex justify-between">
-    <div class="flex flex-row p-4 space-x-2">
-      <UiSelectDropdown
-        v-model="state"
-        title="Status"
-        gap="12"
-        placement="start"
-        :items="[
-          {
-            key: 'any',
-            label: 'Any'
-          },
-          {
-            key: 'pending',
-            label: 'Pending',
-            component: ProposalIconStatus,
-            componentProps: { ...selectIconBaseProps, state: 'pending' }
-          },
-          {
-            key: 'active',
-            label: 'Active',
-            component: ProposalIconStatus,
-            componentProps: { ...selectIconBaseProps, state: 'active' }
-          },
-          {
-            key: 'closed',
-            label: 'Closed',
-            component: ProposalIconStatus,
-            componentProps: { ...selectIconBaseProps, state: 'passed' }
-          }
-        ]"
-      />
+  <div>
+    <Onboarding />
+    <div class="flex justify-between">
+      <div class="flex flex-row p-4 space-x-2">
+        <UiSelectDropdown
+          v-model="state"
+          title="Status"
+          gap="12"
+          placement="start"
+          :items="[
+            {
+              key: 'any',
+              label: 'Any'
+            },
+            {
+              key: 'pending',
+              label: 'Pending',
+              component: ProposalIconStatus,
+              componentProps: { ...selectIconBaseProps, state: 'pending' }
+            },
+            {
+              key: 'active',
+              label: 'Active',
+              component: ProposalIconStatus,
+              componentProps: { ...selectIconBaseProps, state: 'active' }
+            },
+            {
+              key: 'closed',
+              label: 'Closed',
+              component: ProposalIconStatus,
+              componentProps: { ...selectIconBaseProps, state: 'passed' }
+            }
+          ]"
+        />
+      </div>
     </div>
+    <ProposalsList
+      title="Proposals"
+      limit="off"
+      :loading="!followedSpacesStore.followedSpacesLoaded || !loaded"
+      :loading-more="loadingMore"
+      :proposals="proposals"
+      show-space
+      @end-reached="handleEndReached"
+    />
   </div>
-  <ProposalsList
-    title="Proposals"
-    limit="off"
-    :loading="!followedSpacesStore.followedSpacesLoaded || !loaded"
-    :loading-more="loadingMore"
-    :proposals="proposals"
-    show-space
-    @end-reached="handleEndReached"
-  />
 </template>
diff --git a/apps/ui/src/views/Proposal.vue b/apps/ui/src/views/Proposal.vue
@@ -58,6 +58,10 @@ const currentVote = computed(
     votes.value[`${proposal.value.network}:${proposal.value.id}`]
 );
 
+const withoutBottomPadding = computed(
+  () => 'space-proposal-votes' === String(route.name)
+);
+
 async function handleVoteClick(choice: Choice) {
   if (!web3.value.account) {
     modalAccountOpen.value = true;
@@ -126,7 +130,12 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div class="flex items-stretch md:flex-row flex-col w-full md:h-full">
+  <div
+    :class="[
+      'flex items-stretch md:flex-row flex-col w-full md:h-full',
+      { '!pb-0': withoutBottomPadding }
+    ]"
+  >
     <UiLoading v-if="!proposal" class="ml-4 mt-3" />
     <template v-else>
       <div class="flex-1 grow min-w-0">
@@ -203,7 +212,10 @@ watchEffect(() => {
       <Affix
         :class="[
           'shrink-0 md:w-[340px] border-l-0 md:border-l',
-          { 'hidden md:block': route.name === 'space-proposal-votes' }
+          {
+            'hidden md:block': route.name === 'space-proposal-votes',
+            '-mb-6': !withoutBottomPadding
+          }
         ]"
         :top="72"
         :bottom="64"

diff --git a/apps/ui/src/views/Proposal/Votes.vue b/apps/ui/src/views/Proposal/Votes.vue
@@ -190,7 +190,7 @@ watch([sortBy, choiceFilter], () => {
           @end-reached="handleEndReached"
         >
           <template #loading>
-            <UiLoading class="px-4 py-3 block absolute" />
+            <UiLoading class="px-4 py-3 block" />
           </template>
           <div
             v-for="(vote, i) in votes"

diff --git a/apps/ui/src/views/Settings/Contacts.vue b/apps/ui/src/views/Settings/Contacts.vue
@@ -72,12 +72,12 @@ function handleContactEdit(contact) {
       <IH-exclamation-circle />
       <span v-text="'There are no contacts here.'" />
     </div>
+    <teleport to="#modal">
+      <ModalEditContact
+        :open="modalOpen.editContact"
+        :initial-state="modalState.editContact"
+        @close="modalOpen.editContact = false"
+      />
+    </teleport>
   </div>
-  <teleport to="#modal">
-    <ModalEditContact
-      :open="modalOpen.editContact"
-      :initial-state="modalState.editContact"
-      @close="modalOpen.editContact = false"
-    />
-  </teleport>
 </template>