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

Sidebar Styling issues with Mobile

Browse Source
This commit is contained in:
Bel Curcio 2021-06-01 17:40:39 -03:00
parent 3414739913
commit c1535cb8a6
10 changed files with 59 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/cart/CartSidebarView/CartSidebarView.tsx
View File

@ -38,13 +38,13 @@ const CartSidebarView: FC = () => {
[s.empty]: error || success || isLoading || isEmpty,
})}
>
<header className="px-4 pt-6 pb-4 sm:px-6">
<header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
<div className="flex items-start justify-between space-x-3">
<div className="h-7 flex items-center">
<button
onClick={handleClose}
aria-label="Close panel"
className="hover:text-gray-500 transition ease-in-out duration-150 flex items-center focus:outline-none"
className="hover:text-accent-3 transition ease-in-out duration-150 flex items-center focus:outline-none"
>
<Cross className="h-6 w-6" />
<span className="ml-2 text-accent-7 text-xs hover:text-gray-500">

2
components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
View File

@ -45,7 +45,7 @@ const CheckoutSidebarView: FC = () => {
[s.empty]: error || success || isLoading || isEmpty,
})}
>
<header className="px-4 pt-6 pb-4 sm:px-6">
<header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
<div className="flex items-start justify-between space-x-3">
<div className="h-7 flex items-center">
<button

2
components/checkout/PaymentMethodView/PaymentMethodView.tsx
View File

@ -11,7 +11,7 @@ const PaymentMethodView: FC = () => {
return (
<div className={s.root}>
<header className="px-4 pt-6 pb-4 sm:px-6">
<header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
<div className="flex items-start justify-between space-x-3">
<div className="h-7 flex items-center">
<button

2
components/checkout/ShippingView/ShippingView.tsx
View File

@ -11,7 +11,7 @@ const PaymentMethodView: FC = () => {
return (
<div className={s.root}>
<header className="px-4 pt-6 pb-4 sm:px-6">
<header className="pl-4 pr-6 pt-4 pb-4 lg:pt-6">
<div className="flex items-start justify-between space-x-3">
<div className="h-7 flex items-center">
<button

48
components/product/ProductSlider/ProductSlider.module.css
View File

@ -3,6 +3,15 @@
overflow-y: hidden;
}
.slider {
@apply relative h-full transition-opacity duration-150;
opacity: 0;
}
.slider.show {
opacity: 1;
}
.control {
@apply bg-violet absolute bottom-10 right-10 flex flex-row
border-accent-0 border text-accent-0 z-30 shadow-xl;
@ -36,23 +45,46 @@
.thumb {
@apply transition-transform transition-colors ease-linear duration-75 overflow-hidden
inline-block cursor-pointer;
width: 275px;
width: 125px;
}
.thumb:focus,
.thumb.selected {
@apply bg-white;
}
.thumb:hover {
transform: scale(1.02);
background-color: rgba(255, 255, 255, 0.08);
}
.album {
@apply bg-violet-dark;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
height: 275px;
height: 125px;
}
@screen md {
.thumb:hover {
transform: scale(1.02);
background-color: rgba(255, 255, 255, 0.08);
}
.thumb.selected {
@apply bg-white;
}
.album {
height: 235px;
}
.slider {
max-height: 700px;
}
.thumb {
width: 235px;
}
}
@screen lg {
.slider {
max-height: 750px;
}
}

3
components/product/ProductSlider/ProductSlider.tsx
View File

@ -77,8 +77,7 @@ const ProductSlider: FC = ({ children }) => {
<div className={s.root} ref={sliderContainerRef}>
<div
ref={ref}
className="relative keen-slider h-full transition-opacity duration-150"
style={{ opacity: isMounted ? 1 : 0 }}
className={cn(s.slider, { [s.show]: isMounted }, 'keen-slider')}
>
{slider && (
<div className={s.control}>

16
components/product/ProductView/ProductView.module.css
View File

@ -4,7 +4,7 @@
.main {
@apply relative px-0 pb-0 box-border flex flex-col col-span-1;
min-height: 600px;
min-height: 500px;
}
.nameBox {
@ -22,13 +22,17 @@
}
.sidebar {
@apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;
@apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 py-6 w-full h-full;
}
.sliderContainer {
@apply flex items-center justify-center overflow-x-hidden bg-violet;
}
.imageContainer {
@apply text-center;
}
.imageContainer > div,
.imageContainer > div > div {
@apply h-full;
@ -39,7 +43,7 @@
}
.button {
min-width: 300px;
width: 100%;
}
.wishlistButton {
@ -47,13 +51,7 @@
}
@screen md {
.main {
min-height: 700px;
}
.button {
text-align: center;
width: 100%;
max-width: 300px;
}
}

1
components/product/ProductView/ProductView.tsx
View File

@ -185,7 +185,6 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
>
<ProductCard
key={p.path}
className={s.relatedProduct}
variant="simple"
className="animated fadeIn"
product={p}

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

@ -1,3 +1,8 @@
.root {
@apply fixed inset-0 overflow-hidden h-full z-50;
}
.sidebar {
@apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto;
min-width: 335px;
}

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

@ -43,9 +43,7 @@ const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
/>
<section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none">
<div className="h-full md:w-screen md:max-w-md">
<div className="h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto">
{children}
</div>
<div className={s.sidebar}>{children}</div>
</div>
</section>
</div>