📱 Make claim button visible for mobile (#1291)

likecoin · Aug 14, 2023 · cf76df0 · cf76df0
1 parent f8573f9
commit cf76df0
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 24 deletions.
diff --git a/src/components/AuthRequiredView.vue b/src/components/AuthRequiredView.vue
@@ -1,34 +1,40 @@
 <template>
   <div v-if="walletIsMatchedSession">
     <slot name="prepend" />
-    <slot />
-    <slot name="append" />
+
+    <div :class="stickyContentClass">
+      <slot />
+      <slot name="append" />
+    </div>
   </div>
   <div v-else class="flex flex-col justify-center flex-grow">
     <slot name="prepend" />
-    <Label
-      class="text-medium-gray"
-      align="center"
-      :text="loginLabel || $t('settings_page_content_with_auth_login_label')"
-    />
-    <div class="flex flex-col items-center mt-[24px]">
-      <template v-if="isLoadingStartImmediately || walletIsLoggingIn">
-        <ProgressIndicator />
-        <Label
-          class="text-medium-gray w-full mt-[4px]"
-          align="center"
-          preset="p6"
-          :text="$t('auth_required_view_hint_label_loading')"
-        />
-      </template>
-      <ButtonV2
-        v-else
-        :text="loginButtonLabel || $t('settings_page_content_with_auth_login_button')"
-        preset="secondary"
-        @click="onClickLogin"
+
+    <div :class="stickyContentClass">
+      <Label
+        class="text-medium-gray"
+        align="center"
+        :text="loginLabel || $t('settings_page_content_with_auth_login_label')"
       />
+      <div class="flex flex-col items-center mt-[24px]">
+        <template v-if="isLoadingStartImmediately || walletIsLoggingIn">
+          <ProgressIndicator />
+          <Label
+            class="text-medium-gray w-full mt-[4px]"
+            align="center"
+            preset="p6"
+            :text="$t('auth_required_view_hint_label_loading')"
+          />
+        </template>
+        <ButtonV2
+          v-else
+          :text="loginButtonLabel || $t('settings_page_content_with_auth_login_button')"
+          preset="secondary"
+          @click="onClickLogin"
+        />
+      </div>
+      <slot name="append" />
     </div>
-    <slot name="append" />
   </div>
 </template>
 
@@ -50,6 +56,27 @@ export default {
       type: Boolean,
       default: false,
     },
+    isStickToBottomAtMobile: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    stickyContentClass() {
+      if (!this.isStickToBottomAtMobile) {
+        return null;
+      }
+      return [
+        'sticky laptop:relative',
+        'bottom-0',
+        'w-full',
+        'mt-[4px]',
+        'px-[1rem]',
+        'py-[1.5rem]',
+        'shadow-[0_-4px_10px_0_rgba(0,0,0,0.1)] laptop:shadow-none',
+        'bg-white laptop:bg-transparent',
+      ];
+    },
   },
   methods: {
     async onClickLogin() {

diff --git a/src/pages/nft/claim/index.vue b/src/pages/nft/claim/index.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="flex flex-col justify-center flex-grow">
     <AuthRequiredView
-      class="relative flex flex-col justify-center items-center w-full max-w-[962px] mx-auto mb-[48px]"
+      class="relative flex flex-col justify-center items-center w-full max-w-[962px] mx-auto"
       :login-label="$t('nft_claim_login_in')"
       :login-button-label="$t('nft_claim_login_in_button')"
+      :is-stick-to-bottom-at-mobile="true"
     >
       <template #prepend>
         <NFTWidgetBaseCard class="flex justify-center items-center max-w-[400px] mb-[16px]">