crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +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
Show Stats 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;
&::after{
@apply absolute;
top: 110%;
bottom: -1rem;
content: "";
width: 100%;
border-bottom: 1px solid var(--border-line);
}
li{
margin: 1rem 0;
padding:0;

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

@ -5,34 +5,49 @@
}
}
.menuNavigationProductListMobile{
// transform: translateY(-20%);
@apply relative transition-all duration-100;
@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{
@apply transition-all duration-100 hidden;
background: rgba(0, 0, 0, 0.5);
@apply transition-all duration-200;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
height: 100vh;
z-index: 10000;
transform: translateY(100%);
&.isShow{
@apply block;
&.animation{
transform: translateY(0%)
}
.content{
@apply relative w-full hidden;
@apply relative w-full h-full;
margin-top: 3rem;
padding-top: 8rem ;
padding-bottom: 5rem;
padding-bottom: 10rem;
background-color: white;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
height: 100vh;
border-radius: 2.4rem 2.4rem 0 0;
// transform: translateY();
.head{
@apply flex justify-between fixed;
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={featured} heading="Featured"/>
</div>
<div className={s.menuNavigationProductListMobile} >
<div className={classNames({ [s.menuNavigationProductModal] :true,[s.isShow]: visible})} onClick={onClose}>
<div className={classNames({[s.hideAnimation]:true,[s.animation]: visible})}>
<div className={s.content}>
<div className={s.head}>
<h3>FILTER</h3>
<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}/>
<div className={s.foot}>
<ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
</div>
<div className={classNames({ [s.menuNavigationProductListMobile] :true,[s.isShow]: visible})}>
<div className={classNames({ [s.menuNavigationProductModal] :true,[s.animation]: visible})}>
<div className={s.content}>
<div className={s.head}>
<h3>FILTER</h3>
<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}/>
<div className={s.foot}>
<ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
</div>
</div>
</div>

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

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