aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-10 09:54:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: remove empty space at the end of carousel, make categories carousel btns as the designs, fix shifting in padding between apps explore and category page

Browse Source
This commit is contained in:
MTG2000
2022-08-10 13:43:04 +03:00
parent 4e0c42a69f
commit 2e369d4b3c
4 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/Projects/pages/CategoryPage/CategoryPage.tsx
View File

@@ -36,7 +36,7 @@ export default function CategoryPage() {
<title>{`${data?.getCategory.title!} Lightning Products`}</title>
<meta property="og:title" content={`${data?.getCategory.title!} Lightning Products`} />
</Helmet>
<div className='px-32'>
<div className='page-container'>
<HeaderImage
isLoading={loading}
title={data?.getCategory.title!}

9
src/features/Projects/pages/ExplorePage/Categories/Categories.tsx
View File

@@ -19,7 +19,10 @@ const colors = [
export default function Categories() {
const { viewportRef, scrollSlides, canScrollNext, canScrollPrev, isClickAllowed } = useCarousel({ align: 'start', slidesToScroll: 2 })
const { viewportRef, scrollSlides, canScrollNext, canScrollPrev, isClickAllowed } = useCarousel({
align: 'start', slidesToScroll: 2,
containScroll: "trimSnaps",
})
const { data, loading } = useAllCategoriesQuery();
const navigate = useNavigate();
@@ -52,10 +55,10 @@ export default function Categories() {
)}
</div>
</div>
<button className={`absolute inset-y-0 w-42 left-0 opacity-0 ${canScrollPrev && 'group-hover:opacity-100'} transition-opacity rounded-l-12 bg-gradient-to-r from-gray-700 text-white`} onClick={() => scrollSlides(-1)}>
<button className={`absolute text-body6 w-[28px] aspect-square flex justify-center items-center left-0 -translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full bg-white text-gray-400 opacity-0 ${canScrollPrev && 'group-hover:opacity-100'} active:scale-90 transition-opacity border border-gray-200 shadow-md`} onClick={() => scrollSlides(-1)}>
<FaChevronLeft />
</button>
<button className={`absolute inset-y-0 w-42 right-0 opacity-0 ${canScrollNext && 'group-hover:opacity-100'} transition-opacity rounded-r-12 bg-gradient-to-l from-gray-700 text-white`} onClick={() => scrollSlides(1)}>
<button className={`absolute text-body6 w-[28px] aspect-square flex justify-center items-center right-0 translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full bg-white text-gray-400 opacity-0 ${canScrollNext && 'group-hover:opacity-100'} active:scale-90 transition-opacity border border-gray-200 shadow-md`} onClick={() => scrollSlides(1)}>
<FaChevronRight />
</button>
</div>

2
src/features/Projects/pages/ExplorePage/ExplorePage.tsx
View File

@@ -15,7 +15,7 @@ export default function ExplorePage() {
<Header />
<div className="my-32 overflow-hidden">
<div className="my-32">
<Categories />
</div>
<div className="w-full overflow-hidden">

6
src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
View File

@@ -26,7 +26,11 @@ export default function ProjectsRow({ title, link, projects }: Props) {
const [slidesToScroll, setSlidesToScroll] = useState(1)
const rowRef = useRef<HTMLDivElement>(null)
const { viewportRef, scrollSlides, canScrollNext, canScrollPrev, isClickAllowed } = useCarousel({ align: 'start', slidesToScroll })
const { viewportRef, scrollSlides, canScrollNext, canScrollPrev, isClickAllowed } = useCarousel({
align: 'start',
slidesToScroll,
containScroll: "trimSnaps",
})
const dispatch = useAppDispatch()