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

fix: products grid items

Browse Source
This commit is contained in:
MTG2000
2022-07-25 19:43:22 +03:00
parent 480e8bdefa
commit 2f67c99864
2 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
View File

@@ -116,7 +116,7 @@ export default function StoryForm(props: Props) {
{editMode && <>
<div
className='bg-white border-2 border-gray-200 rounded-16 overflow-hidden'>
<div className="p-16 md:p-32">
<div className="p-16 md:p-24 lg:p-32">
<Controller
control={control}
name="cover_image"

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

@@ -1,4 +1,4 @@
import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
import { ReactNode, useCallback, useLayoutEffect, useEffect, useRef, useState } from "react";
import { ProjectCard } from "src/utils/interfaces";
import Carousel from 'react-multi-carousel';
import { MdDoubleArrow, } from 'react-icons/md';
@@ -30,8 +30,8 @@ const responsive = {
// return items;
// }
function calcNumItems() {
const items = (((window.innerWidth - 2 * 32) / (296 + 20)));
function calcNumItems(width = window.innerWidth) {
const items = ((width / (296 + 20)));
return items;
}
@@ -39,11 +39,9 @@ function calcNumItems() {
export default function ProjectsRow({ title, link, projects }: Props) {
const [carouselItmsCnt, setCarouselItmsCnt] = useState(calcNumItems);
const dispatch = useAppDispatch()
let drag = useRef(false);
responsive.all.items = carouselItmsCnt
const rowRef = useRef<HTMLDivElement>(null!);
useEffect(() => {
@@ -62,7 +60,6 @@ export default function ProjectsRow({ title, link, projects }: Props) {
const handleClick = (projectId: number) => {
console.log(projectId);
if (!drag.current) {
dispatch(openModal({ Modal: "ProjectDetailsCard", props: { projectId } }))
@@ -71,10 +68,15 @@ export default function ProjectsRow({ title, link, projects }: Props) {
const recalcItemsCnt = useCallback(
() => {
setCarouselItmsCnt(calcNumItems());
if (rowRef.current) {
responsive.all.items = calcNumItems(rowRef.current.clientWidth)
responsive.all.slidesToSlide = Math.floor(responsive.all.items);
}
},
[],
)
);
useLayoutEffect(recalcItemsCnt, [recalcItemsCnt]);
useResizeListener(recalcItemsCnt)
@@ -91,7 +93,7 @@ export default function ProjectsRow({ title, link, projects }: Props) {
<MdDoubleArrow className='text-gray-200 ml-8 hover:cursor-pointer transform scale-y-110 scale-x-125 origin-left' />
</Link>}
</h3>
<div className="">
<div ref={rowRef} className="">
<Carousel
showDots={false}
autoPlay={false}