Scroll snap feature (#22)

oktay · Jul 3, 2022 · ca3f9b7 · ca3f9b7 · vercel · Jul 3, 2022
1 parent add13ef
commit ca3f9b7
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/components/repo-card.js b/components/repo-card.js
@@ -41,7 +41,7 @@ export default function RepoCard({
   return (
     <div
       key={id}
-      className="relative group h-full w-3/4 sm:w-full flex-shrink-0"
+      className="relative group h-full w-3/4 sm:w-full flex-shrink-0 snap-start"
     >
       <div className="aspect-3/2">
         <div className="card flex flex-col h-full w-full p-4 md:p-6">

diff --git a/components/shot-card.js b/components/shot-card.js
@@ -16,7 +16,7 @@ export default function ShotCard({ id, title, images, html_url, tags }) {
   return (
     <div
       key={id}
-      className="relative group h-full w-3/4 md:w-full flex-shrink-0"
+      className="relative group h-full w-3/4 md:w-full flex-shrink-0 snap-start"
     >
       <div className="relative aspect-[4/3]">
         <Image

diff --git a/pages/index.js b/pages/index.js
@@ -129,7 +129,7 @@ export default function Home({ repos, shots, homepage, seo }) {
             </p>
           </div>
           <div className="col-span-12 col-start-4 mt-8 md:mt-0">
-            <div className="flex overflow-scroll gap-6 sm:overflow-auto sm:grid sm:grid-cols-2 xl:grid-cols-3">
+            <div className="flex overflow-scroll gap-6 snap-mandatory snap-x sm:overflow-auto sm:grid sm:grid-cols-2 xl:grid-cols-3">
               {repos.slice(0, 6).map(RepoCard)}
             </div>
           </div>
@@ -151,7 +151,7 @@ export default function Home({ repos, shots, homepage, seo }) {
             </p>
           </div>
           <div className="col-span-12 col-start-4 mt-8 md:mt-0">
-            <div className="flex overflow-scroll gap-6 md:overflow-auto md:grid md:grid-cols-2 xl:grid-cols-3">
+            <div className="flex overflow-scroll gap-6 snap-mandatory snap-x md:overflow-auto md:grid md:grid-cols-2 xl:grid-cols-3">
               {shots.slice(0, 6).map(ShotCard)}
             </div>
           </div>