feat: add responsive

Author: alexiscolin

.prettierrc.json

@@ -1,11 +1,10 @@
 {
-    "bracketSpacing": true,
-    "jsxSingleQuote": false,
-    "printWidth": 120,
-    "proseWrap": "always",
-    "semi": false,
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "all"
-  }
-  
+  "bracketSpacing": true,
+  "jsxSingleQuote": false,
+  "printWidth": 360,
+  "proseWrap": "always",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all"
+}

src/App.vue

@@ -44,8 +44,8 @@ onMounted(() => {
   <div ref="DOMSiteloader" class="fixed top-0 left-0 right-0 bottom-0 z-max bg-dark"></div>
   <main class="js-main flex flex-col justify-between min-h-screen">
     <Header />
-    <section class="px-20 w-full grid grid-cols-12">
-      <h1 class="col-span-5 font-termina text-700" ref="DOMTitle">Welcome to Faucet Hub</h1>
+    <section class="px-4 md:px-14 lg:px-20 mx-auto max-w-[110rem] w-full grid grid-cols-12">
+      <h1 class="col-span-12 lg:col-span-5 font-termina text-600 md:text-700 text-center md:text-left" ref="DOMTitle">Welcome to Faucet Hub</h1>
       <FaucetsList />
     </section>
 

src/components/faucet/FaucetCard.vue

@@ -14,13 +14,13 @@ import { computed } from 'vue'
 import Card from '@/components/ui/Card.vue'
 import FaucetAvailability from './FaucetAvailability.vue'
 
-import { MotionTracker } from '@/composables/useMouseDelegation'
+import { type MotionTracker } from '@/composables/useMouseDelegation'
 
 import { Faucet } from '@/types'
 
 interface Props {
   faucet: Faucet
-  motion: MotionTracker
+  motion?: MotionTracker
   isLoading: boolean
 }
 

src/components/faucet/FaucetDetail.vue

@@ -1,33 +1,18 @@
 <template>
-  <div
-    ref="DOMbackground"
-    class="fixed w-screen h-screen top-0 left-0 z-30 bg-darkblur backdrop-blur-sm invisible opacity-0"
-  ></div>
+  <div ref="DOMbackground" class="fixed w-screen h-screen top-0 left-0 z-30 bg-darkblur backdrop-blur-sm invisible opacity-0"></div>
 
   <section
     ref="DOMpopup"
-    class="popup fixed flex flex-col items-center rounded w-[36rem] bg-grey-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1000] justify-center text-grey-50 before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:rounded before:bg-500 before:z-min after:absolute after:top-px after:left-px after:bottom-px after:right-px after:bg-grey-500 after:rounded after:z-min"
+    class="popup fixed flex flex-col items-center rounded w-[90vw] max-w-[36rem] bg-grey-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1000] justify-center text-grey-50 before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:rounded before:bg-500 before:z-min after:absolute after:top-px after:left-px after:bottom-px after:right-px after:bg-grey-500 after:rounded after:z-min"
   >
     <div ref="DOMFaucetRequest" class="p-12">
-      <FaucetContentForm
-        :name="store.selectedFaucet.name ?? 'Faucet'"
-        :options="store.faucetAmount"
-        v-show="store.contentStep === 0"
-        class="js-faucetform opacity-100"
-        :error="error"
-        @requestFaucet="requestFaucet"
-      />
+      <FaucetContentForm :name="store.selectedFaucet.name ?? 'Faucet'" :options="store.faucetAmount" v-show="store.contentStep === 0" class="js-faucetform opacity-100" :error="error" @requestFaucet="requestFaucet" />
       <div>
         <div ref="gnoRequestLogo" v-show="store.contentStep >= 1" class="opacity-0">
           <Vue3Lottie :animationData="GnoJSON" :loop="true" :height="200" :width="200" :autoPlay="true" />
         </div>
         <FaucetContentRequest v-show="store.contentStep === 1" class="js-faucetpending" />
-        <FaucetContentSuccess
-          v-show="store.contentStep === 2"
-          :tx-link="txLink"
-          class="js-faucetsuccess opacity-0"
-          @doneFaucet="donefaucet()"
-        />
+        <FaucetContentSuccess v-show="store.contentStep === 2" :tx-link="txLink" class="js-faucetsuccess opacity-0" @doneFaucet="donefaucet()" />
       </div>
     </div>
   </section>
@@ -190,11 +175,6 @@ watch(
 }
 .popup::before {
   opacity: var(--op);
-  background: radial-gradient(
-    farthest-corner circle at var(--mx, 0%) var(--my, 100%),
-    #aeffb6 0%,
-    #121212 20%,
-    #121212 100%
-  );
+  background: radial-gradient(farthest-corner circle at var(--mx, 0%) var(--my, 100%), #aeffb6 0%, #121212 20%, #121212 100%);
 }
 </style>

src/components/faucet/FaucetsList.vue

@@ -1,21 +1,9 @@
 <template>
   <div ref="projectCarouselEL" class="col-span-12 my-20">
     <Carousel name="Carousel">
-      <li
-        v-for="(faucet, idx) in faucets"
-        :key="idx"
-        class="js-card p-4 flex-none w-full"
-        role="group"
-        aria-roledescription="slide"
-      >
+      <li v-for="(faucet, idx) in faucets" :key="idx" class="js-card p-4 flex-none w-full" role="group" aria-roledescription="slide">
         <div ref="cards" class="translate-x-12 opacity-0 h-full" @click.prevent="openFaucet(faucet)">
-          <FaucetCard
-            :data-ref="motions[idx].value.id"
-            :motion="motions[idx]"
-            :data-index="idx"
-            :faucet="faucet"
-            :is-loading="isLoading"
-          />
+          <FaucetCard :data-ref="motions[idx].value.id" :motion="width >= 768 ? motions[idx] : undefined" :data-index="idx" :faucet="faucet" :is-loading="isLoading" />
         </div>
       </li>
     </Carousel>
@@ -31,6 +19,8 @@ import FaucetCard from '@/components/faucet/FaucetCard.vue'
 import { useMouseDelegation } from '@/composables/useMouseDelegation'
 import { useFaucetDetail } from '@/stores/faucetDetail'
 
+import { useWindowSize } from '@vueuse/core'
+
 import { Faucet } from '@/types'
 
 // TODO: Top replace with real data
@@ -43,6 +33,8 @@ const cards = ref<null | HTMLElement[]>(null)
 // TODO: To custom with async data
 let isLoading = false
 
+const { width } = useWindowSize()
+
 const { motions } = useMouseDelegation(projectCarouselEL, faucets, 'ref')
 
 const store = useFaucetDetail()

src/components/layout/Footer.vue

@@ -1,13 +1,8 @@
 <template>
-  <footer class="px-20 mb-12 w-full flex text-grey-100 text-100 justify-between items-center">
-    <div>
-      Faucet Hub is a community project.<br />Check out
-      <a href="https://github.com/gnolang/gno" class="hover:text-grey-50 transition-colors ease-in-out underline"
-        >Github Repo</a
-      >.
-    </div>
-    <div class="flex items-center">
-      <div class="mr-6">Learn more about Gno.land <br />and be part of the conversation:</div>
+  <footer class="px-4 md:px-14 lg:px-20 mb-12 w-full max-w-[110rem] mx-auto flex flex-col md:flex-row text-grey-100 text-100 text-center md:text-left justify-between items-center">
+    <div class="mb-10 md:mb-0">Faucet Hub is a community project.<br />Check out <a href="https://github.com/gnolang/gno" class="hover:text-grey-50 transition-colors ease-in-out underline">Github Repo</a>.</div>
+    <div class="flex flex-col md:flex-row items-center">
+      <div class="mr-6 mb-6 md:mb-0">Learn more about Gno.land <br />and be part of the conversation:</div>
       <ul class="flex space-x-4">
         <li v-for="(social, idx) in socials" :key="idx">
           <a :href="social.link" class="hover:text-grey-50 transition-colors ease-in-out">

src/components/layout/Header.vue

@@ -3,7 +3,7 @@ import IconGnoland from '@/components/icons/IconGnoland.vue'
 </script>
 
 <template>
-  <header class="flex container pt-8 pb-4 mb-16">
-    <IconGnoland />
+  <header class="flex w-full max-w-[110rem] mx-auto px-4 md:px-14 lg:px-20 pt-8 pb-4 mb-8 md:mb-16">
+    <IconGnoland class="m-auto md:m-0" />
   </header>
 </template>

src/components/ui/Carousel.vue

@@ -1,13 +1,9 @@
 <template>
   <section :aria-label="name" aria-roledescription="carousel" class="min-h-[27.5rem] md:min-h-0">
     <div
-      class="absolute md:relative -left-20 py-36 -my-36 md:py-0 md:my-0 w-full snap-x flex md:w-screen before:absolute before:w-20 before:h-full before:bg-gradient-to-r before:from-dark before:z-30 after:absolute after:w-20 after:h-full after:bg-gradient-to-l after:from-dark after:right-0 after:z-30"
+      class="relative md:-left-20 md:py-0 md:my-0 w-full md:snap-x flex md:w-[calc(100%_+_theme(spacing.20))] before:hidden md:before:block before:absolute before:w-20 before:h-full before:bg-gradient-to-r before:from-dark before:z-30 after:hidden md:after:block after:absolute after:w-20 after:h-full after:bg-gradient-to-l after:from-dark after:right-0 after:z-30"
     >
-      <ul
-        id="carousel-items"
-        aria-live="polite"
-        class="flex scroller scroller-wrap snap-x snap-mandatory scroll-px-20 md:px-20 py-10 px-0 overflow-x-auto"
-      >
+      <ul id="carousel-items" aria-live="polite" class="flex flex-col md:flex-row scroller scroller-wrap snap-x snap-mandatory w-full scroll-px-20 md:px-20 md:py-10 px-0 overflow-x-auto">
         <slot />
       </ul>
     </div>
@@ -33,6 +29,6 @@ const props = withDefaults(defineProps<Props>(), {
 }
 
 .scroller-wrap > * {
-  @apply snap-start md:w-[calc(25%_-_theme(spacing.4))];
+  @apply snap-start w-full md:w-[calc(50%_-_theme(spacing.4))] lg:w-[calc(33.33%_-_theme(spacing.4))]  2xl:w-[calc(25%_-_theme(spacing.4))];
 }
 </style>