crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-26 11:41:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

bug: fix bug pagination

Browse Source
This commit is contained in:
quangnhankie
2021-09-09 17:49:32 +07:00
parent 606f3e5e81
commit 1c9e1a1191
9 changed files with 739 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/MenuFilter/MenuFilter.module.scss
View File

@@ -1,6 +1,6 @@
@import "../../../styles/utilities";
.menuFilterWrapper{
@apply spacing-horizontal;
@screen md {
@apply hidden;
}

50
src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
View File

@@ -5,14 +5,12 @@
}
}
.menuNavigationProductListMobile{
@apply hidden;
&.isShow{
@apply block;
@screen md {
@apply hidden;
}
}
// transform: translateY(-20%);
.menuNavigationProductModal{
@apply transition-all duration-200;
background: rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
@@ -20,22 +18,52 @@
width: 100%;
height: 100%;
z-index: 10000;
transform: translateY(100%);
height: 100%;
&.isShow{
transform: translateY(0%);
height: 100vh;
@screen md {
@apply hidden;
}
}
.content{
@apply spacing-horizontal;
@apply relative w-full;
margin-top: 3rem;
padding-top: 2rem ;
padding-top: 8rem ;
padding-bottom: 5rem;
background-color: white;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
border-radius: 2.4rem 2.4rem 0 0;
.head{
@apply flex justify-between;
@apply flex justify-between fixed;
top:0;
left:0;
margin-top: 3rem;
border-radius: 2.4rem 2.4rem 0 0;
padding: 3rem 2rem 1rem 2rem;
width: 100%;
background-color: white;
z-index: 10000;
h3{
@apply heading-3 font-bold;
color:var(--text-base);
}
}
.foot{
@apply fixed;
bottom: 0;
left:0;
width: 100%;
background-color: white;
padding: 0 1rem 2rem 1rem;
}
button{
margin-top: 2rem;
width: 100%;

23
src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
View File

@@ -12,12 +12,13 @@ interface Props{
categories:{name:string,link:string}[],
brands:{name:string,link:string}[],
featured:{name:string,link:string}[],
visible: boolean,
onClose: () => void
}
const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{
const MenuNavigationProductList = ({categories,brands,featured,visible,onClose}:Props)=>{
const [dataSort,setDataSort] = useState({});
const [isShow,setIsShow] = useState(true);
function handleValue(value:Object){
setDataSort({...dataSort,...value});
@@ -25,12 +26,6 @@ const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{
function filter(){
console.log(dataSort)
}
function hideMenu(){
if(isShow === true){
setIsShow(false);
}
}
return(
<>
<div className={s.menuNavigationProductListDesktop}>
@@ -38,18 +33,20 @@ const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{
<MenuNavigation categories={brands} heading="Brands"/>
<MenuNavigation categories={featured} heading="Featured"/>
</div>
<div className={classNames({ [s.menuNavigationProductListMobile] :true,[s.isShow]: isShow})}>
<div className={s.menuNavigationProductModal}>
<div className={s.content}>
<div className={s.menuNavigationProductListMobile} >
<div className={classNames({ [s.menuNavigationProductModal] :true,[s.isShow]: visible})}>
<div className={classNames({ [s.content] :true,[s.animation]: visible})}>
<div className={s.head}>
<h3>FILTER</h3>
<div onClick={hideMenu}><IconHide/></div>
<div onClick={onClose}><IconHide/></div>
</div>
<MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
<MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
<MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
<MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
<ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
<div className={s.foot}>
<ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
</div>
</div>
</div>
</div>

2
src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
View File

@@ -1,6 +1,6 @@
@import "../../../../styles/utilities";
.menuSortWrapper{
@apply spacing-horizontal;
@screen md {
@apply hidden;
}

2
src/components/modules/blog-detail/BlogContent/BlogContent.tsx
View File

@@ -55,7 +55,7 @@ const BlogContent = ({}:BlogContentProps) => {
You can eat broccoli stems. In fact, they are delicious. Just use a peeler to peel off the outsides and then trim the stalks into small 1/4”-1/2” cubes.
</p>
<br/>
<img src="https://i.pinimg.com/236x/f0/bd/a6/f0bda6a9ed04a6c4ac9453be80c95f75.jpg" alt="blog-detail" />
<img src="https://cdn.pastaxi-manager.onepas.vn/content/uploads/articles/An-%C4%91%E1%BA%B7c%20s%E1%BA%A3n%20v%C3%B9ng%20mi%E1%BB%81n/An-2-21%20%C4%91%E1%BA%B7c%20s%E1%BA%A3n%20SG%20ngon%20n%E1%BB%95i%20ti%E1%BA%BFng/tong-hop-21-dac-san-sai-gon-ngon-noi-tieng-khong-an-that-co-loi-2.jpg" alt="blog-detail" />
</section>

65
src/components/modules/recipes-list/RecipesList/RecipesList.tsx
View File

@@ -1,42 +1,53 @@
import React from 'react';
import { SelectCommon } from 'src/components/common';
import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon';
import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard';
import image12 from "../../../../../public/assets/images/image12.png";
import image13 from "../../../../../public/assets/images/image13.png";
import image14 from "../../../../../public/assets/images/image14.png";
import RecipesItem from './RecipesItem/RecipesItem';
import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
import s from './RecipesList.module.scss';
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
import { SelectCommon } from 'src/components/common';
import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
import RecipesItem from './RecipesItem/RecipesItem';
import s from './RecipesList.module.scss';
const recipe:RecipeCardProps[] = [{
const recipe:RecipeCardProps[] = [
{
title: "Special Recipe of Vietnamese Phở",
description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
imageSrc: image12.src
},{
description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png',
slug: "special-recipe-of-vietnamese-pho"
},
{
title: "Original Recipe of Curry",
description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
imageSrc: image13.src
},{
description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png',
slug:"original-recipe-of-curry"
},
{
title: "The Best Recipe of Beef Noodle Soup",
description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
imageSrc: image14.src
},{
description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
slug:"the-best-recipe-of-beef-noodle-soup"
},
{
title: "Special Recipe of Vietnamese Phở",
description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
imageSrc: image12.src
},{
description: "Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159257-f92574c7-d00d-4142-8ea7-0ca9515fb737.png',
slug: "special-recipe-of-vietnamese-pho"
},
{
title: "Original Recipe of Curry",
description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
imageSrc: image13.src
},{
description: "Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159259-ae4c986d-ab53-4758-9137-d06bafdd15d0.png',
slug:"original-recipe-of-curry"
},
{
title: "The Best Recipe of Beef Noodle Soup",
description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
imageSrc: image14.src
}];
description: "The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...",
imageSrc: 'https://user-images.githubusercontent.com/76729908/132159262-f28a9fb9-4852-47e6-80b5-d600521b548a.png',
slug:"the-best-recipe-of-beef-noodle-soup"
},];
const DEFAULT_PAGESIZE_RECIPELIST = 6;
const BREADCRUMB = [
{
name: 'Special Recipes',
@@ -203,7 +214,7 @@ const RecipesList = ({ data =recipe}:Props) => {
</div>
</div>
<div className={s.recipesPagination}>
<PaginationCommon pageSize={6} total={9}/>
<PaginationCommon pageSize={DEFAULT_PAGESIZE_RECIPELIST} total={data?.length}/>
</div>
</div>