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

fix: fix animation MenuNavigationProductList

Browse Source
This commit is contained in:
quangnhankie
2021-09-10 11:36:32 +07:00
parent 0b0f0c631e
commit 7997dbc8c5
4 changed files with 45 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,12 +16,12 @@
box-sizing: border-box; box-sizing: border-box;
&::after{ &::after{
@apply absolute; @apply absolute;
top: 110%; bottom: -1rem;
content: ""; content: "";
width: 100%; width: 100%;
border-bottom: 1px solid var(--border-line); border-bottom: 1px solid var(--border-line);
} }
li{ li{
margin: 1rem 0; margin: 1rem 0;
padding:0; padding:0;

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

@@ -5,34 +5,49 @@
} }
} }
.menuNavigationProductListMobile{ .menuNavigationProductListMobile{
@apply relative transition-all duration-100;
// transform: translateY(-20%);
@screen md{
@apply hidden;
}
@screen xl{
@apply hidden;
}
&.isShow{
&::after{
content: "";
background: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100vh;
position: fixed;
z-index: 9999;
}
}
.menuNavigationProductModal{ .menuNavigationProductModal{
@apply transition-all duration-100 hidden; @apply transition-all duration-200;
background: rgba(0, 0, 0, 0.5);
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100vh;
z-index: 10000; z-index: 10000;
transform: translateY(100%);
&.isShow{ &.animation{
@apply block; transform: translateY(0%)
} }
.content{ .content{
@apply relative w-full hidden; @apply relative w-full h-full;
margin-top: 3rem; margin-top: 3rem;
padding-top: 8rem ; padding-top: 8rem ;
padding-bottom: 5rem; padding-bottom: 10rem;
background-color: white; background-color: white;
overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100vh;
border-radius: 2.4rem 2.4rem 0 0; border-radius: 2.4rem 2.4rem 0 0;
// transform: translateY();
.head{ .head{
@apply flex justify-between fixed; @apply flex justify-between fixed;
top:0; top:0;

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

@@ -33,21 +33,19 @@ const MenuNavigationProductList = ({categories,brands,featured,visible,onClose}:
<MenuNavigation categories={brands} heading="Brands"/> <MenuNavigation categories={brands} heading="Brands"/>
<MenuNavigation categories={featured} heading="Featured"/> <MenuNavigation categories={featured} heading="Featured"/>
</div> </div>
<div className={s.menuNavigationProductListMobile} > <div className={classNames({ [s.menuNavigationProductListMobile] :true,[s.isShow]: visible})}>
<div className={classNames({ [s.menuNavigationProductModal] :true,[s.isShow]: visible})} onClick={onClose}> <div className={classNames({ [s.menuNavigationProductModal] :true,[s.animation]: visible})}>
<div className={classNames({[s.hideAnimation]:true,[s.animation]: visible})}> <div className={s.content}>
<div className={s.content}> <div className={s.head}>
<div className={s.head}> <h3>FILTER</h3>
<h3>FILTER</h3> <div onClick={onClose}><IconHide/></div>
<div onClick={onClose}><IconHide/></div> </div>
</div> <MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
<MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/> <MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
<MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/> <MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
<MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/> <MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
<MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/> <div className={s.foot}>
<div className={s.foot}> <ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
<ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@@ -11,14 +11,9 @@
margin: 0.8rem 0; margin: 0.8rem 0;
} }
.menuSortList{ .menuSortList{
margin-bottom: 2rem;
box-sizing: border-box; box-sizing: border-box;
&::after{
@apply absolute;
top: 110%;
content: "";
width: 100%;
border-bottom: 1px solid var(--border-line);
}
li{ li{
div{ div{
height: 4.8rem; height: 4.8rem;