Skip to content

Commit

Permalink
feat: fix x scroll layout on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@martapanc-resourcify
martapanc-resourcify committed Jul 25, 2023
1 parent 964486f commit 5aab00e
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 93 deletions.
44 changes: 21 additions & 23 deletions src/components/organisms/about-free-time/Books.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,30 +16,28 @@ const Books = ({ books }: BookProps) => {
<h2>Best books ever written</h2>
</div>

<div className='rounded p-3 dark:bg-slate-900'>
<ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 md:mx-0 md:w-full md:px-0'>
{books.map((book) => (
<li
key={book._id}
className='h-[168px] w-[120px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-blue-300 hover:to-blue-600'
<ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 dark:bg-slate-900 md:mx-0 md:w-full md:px-0'>
{books.map((book) => (
<li
key={book._id}
className='mt-2 h-[168px] w-[120px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-blue-300 hover:to-blue-600'
>
<a
href={book.goodreadsLink}
target='_blank'
rel='noopener noreferrer'
>
<a
href={book.goodreadsLink}
target='_blank'
rel='noopener noreferrer'
>
<Image
className='rounded-md'
alt={book.title}
src={book.cover}
width={114}
height={114}
/>
</a>
</li>
))}
</ul>
</div>
<Image
className='rounded-md'
alt={book.title}
src={book.cover}
width={114}
height={114}
/>
</a>
</li>
))}
</ul>
</div>
);
};
Expand Down
44 changes: 21 additions & 23 deletions src/components/organisms/about-free-time/Podcasts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,30 +16,28 @@ const Podcasts = ({ podcasts }: PodcastProps) => {
<h2>Podcasts I follow</h2>
</div>

<div className='rounded p-3 dark:bg-slate-900'>
<ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 md:mx-0 md:w-full md:px-0'>
{podcasts.map((podcast) => (
<li
key={podcast._id}
className='h-[136px] w-[136px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-orange-400 hover:to-orange-700'
<ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 dark:bg-slate-900 md:mx-0 md:w-full md:px-0'>
{podcasts.map((podcast) => (
<li
key={podcast._id}
className='mt-2 h-[136px] w-[136px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-orange-400 hover:to-orange-700'
>
<a
href={podcast.mediaLink}
target='_blank'
rel='noopener noreferrer'
>
<a
href={podcast.mediaLink}
target='_blank'
rel='noopener noreferrer'
>
<Image
className='rounded-md'
alt={podcast.name}
src={podcast.cover}
width={130}
height={130}
/>
</a>
</li>
))}
</ul>
</div>
<Image
className='rounded-md'
alt={podcast.name}
src={podcast.cover}
width={130}
height={130}
/>
</a>
</li>
))}
</ul>
</div>
);
};
Expand Down
44 changes: 21 additions & 23 deletions src/components/organisms/about-free-time/TvSeries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,30 +16,28 @@ const TvSeries = ({ tvSeries }: TvSeriesProps) => {
<h2>Favourite TV Series</h2>
</div>

<div className='rounded p-3 dark:bg-slate-900'>
<ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 md:mx-0 md:w-full md:px-0'>
{tvSeries.map((tvSeries) => (
<li
key={tvSeries._id}
className='h-[200px] w-[136px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-yellow-300 hover:to-yellow-700'
<ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 dark:bg-slate-900 md:mx-0 md:w-full md:px-0'>
{tvSeries.map((tvSeries) => (
<li
key={tvSeries._id}
className='mt-2 h-[200px] w-[136px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-yellow-300 hover:to-yellow-700'
>
<a
href={tvSeries.mediaLink}
target='_blank'
rel='noopener noreferrer'
>
<a
href={tvSeries.mediaLink}
target='_blank'
rel='noopener noreferrer'
>
<Image
className='rounded-md'
alt={tvSeries.title}
src={tvSeries.poster}
width={130}
height={130}
/>
</a>
</li>
))}
</ul>
</div>
<Image
className='rounded-md'
alt={tvSeries.title}
src={tvSeries.poster}
width={130}
height={130}
/>
</a>
</li>
))}
</ul>
</div>
);
};
Expand Down
42 changes: 18 additions & 24 deletions src/components/organisms/about-free-time/VideoGames.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,30 +16,24 @@ const VideoGames = ({ videoGames }: VideoGameProps) => {
<h2>Games I'm addicted to</h2>
</div>

<div className='rounded p-3 dark:bg-slate-900'>
<ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 md:mx-0 md:w-full md:px-0'>
{videoGames.map((game) => (
<li
key={game._id}
className='h-[180px] w-[136px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-purple-300 hover:to-purple-700'
>
<a
href={game.mediaLink}
target='_blank'
rel='noopener noreferrer'
>
<Image
className='rounded-md'
alt={game.title}
src={game.cover}
width={130}
height={130}
/>
</a>
</li>
))}
</ul>
</div>
<ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 dark:bg-slate-900 md:mx-0 md:w-full md:px-0'>
{videoGames.map((game) => (
<li
key={game._id}
className='mt-2 h-[180px] w-[136px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-purple-300 hover:to-purple-700'
>
<a href={game.mediaLink} target='_blank' rel='noopener noreferrer'>
<Image
className='rounded-md'
alt={game.title}
src={game.cover}
width={130}
height={130}
/>
</a>
</li>
))}
</ul>
</div>
);
};
Expand Down

0 comments on commit 5aab00e

Please sign in to comment.