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

Scroll for Mobile on IOs devises

Browse Source
This commit is contained in:
Bel Curcio 2021-06-07 14:31:42 -03:00
parent 844a3ad215
commit 633fd0c98d
5 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/common/SidebarLayout/SidebarLayout.module.css
View File

@ -1,5 +1,5 @@
.root {
@apply relative h-full flex flex-col min-h-full w-full overflow-y-auto;
@apply relative h-full flex flex-col;
}
.header {
@ -9,12 +9,12 @@
min-height: 66px;
}
.container {
@apply flex flex-col flex-1 box-border;
}
@screen lg {
.header {
min-height: 74px;
}
}
.container {
@apply flex flex-col flex-1 box-border;
}

8
components/ui/Sidebar/Sidebar.module.css
View File

@ -1,14 +1,14 @@
.root {
@apply fixed inset-0 overflow-hidden h-full z-50 box-border;
@apply fixed inset-0 h-full z-50 box-border;
}
.sidebar {
@apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto;
-webkit-overflow-scrolling: touch;
@apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto overflow-x-hidden;
-webkit-overflow-scrolling: touch !important;
}
.backdrop {
@apply absolute inset-0 bg-black bg-opacity-40 transition transition-opacity duration-100 ease-linear;
@apply absolute inset-0 bg-black bg-opacity-40 duration-100 ease-linear;
backdrop-filter: blur(0.8px);
-webkit-backdrop-filter: blur(0.8px);
}

6
components/ui/Sidebar/Sidebar.tsx
View File

@ -28,12 +28,14 @@ const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
}, [])
return (
<div className={cn(s.root)} ref={ref}>
<div className={cn(s.root)}>
<div className="absolute inset-0 overflow-hidden">
<div className={s.backdrop} onClick={onClose} />
<section className="absolute inset-y-0 right-0 max-w-full flex outline-none pl-10">
<div className="h-full w-full md:w-screen md:max-w-md">
<div className={s.sidebar}>{children}</div>
<div className={s.sidebar} ref={ref}>
{children}
</div>
</div>
</section>
</div>

2
package.json
View File

@ -22,7 +22,7 @@
"@react-spring/web": "^9.2.1",
"@vercel/fetch": "^6.1.0",
"autoprefixer": "^10.2.6",
"body-scroll-lock": "2.6.3",
"body-scroll-lock": "^3.1.5",
"bowser": "^2.11.0",
"classnames": "^2.3.1",
"cookie": "^0.4.1",

8
yarn.lock
View File

@ -1612,10 +1612,10 @@ bn.js@^5.0.0, bn.js@^5.1.1:
resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.3.tgz#beca005408f642ebebea80b042b4d18d2ac0ee6b"
integrity sha512-GkTiFpjFtUzU9CbMeJ5iazkCzGL3jrhzerzZIuqLABjbwRaFt33I9tUdSNryIptM+RxDet6OKm2WnLXzW51KsQ==
body-scroll-lock@2.6.3:
version "2.6.3"
resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.3.tgz#2b9311ef3120696d8ad5c30503f684803ade1606"
integrity sha512-yQ2VWJasZSWMawwi4bLJ9akbMRTpnS2tZWDEFuOiihwCdl+qNovuUwisnBKIdMk+99wG9FlqW6uZ9+GjKn8ARA==
body-scroll-lock@^3.1.5:
version "3.1.5"
resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
bowser@^2.11.0:
version "2.11.0"