Skip to content

Commit

Permalink
mobile styles
Browse files Browse the repository at this point in the history
  • Loading branch information
GFier committed Apr 3, 2024
1 parent c764f37 commit e10479a
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 51 deletions.
42 changes: 33 additions & 9 deletions app/(pages)/shopify/(components)/product/product.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,59 @@
.product {
margin: auto;
height: 50vh;
align-items: center;
justify-items: center;

@include desktop {
height: 50vh;
}

@include mobile {
margin-top: mobile-vw(150px);
}

.details {
grid-column: 4/-4;
grid-column: 1/-1;
display: flex;
flex-direction: column;
gap: desktop-vw(16px);
gap: mobile-vw(16px);
text-align: center;
margin-bottom: desktop-vw(16px);
margin-bottom: mobile-vw(16px);

@include desktop {
grid-column: 4/-4;
gap: desktop-vw(16px);
margin-bottom: desktop-vw(16px);
}
}

.media {
position: relative;
grid-column: 3/-3;
grid-column: 1/-1;
aspect-ratio: 341/1404;
height: 50vh;
height: 40vh;

@include desktop {
grid-column: 3/-3;
height: 50vh;
}
}

.add {
position: relative;
grid-column: 4/-4;
grid-column: 1/-1;
display: flex;
border: 2px solid var(--black);
padding: desktop-vw(16px);
border-radius: desktop-vw(8px);
padding: mobile-vw(16px);
border-radius: mobile-vw(8px);
overflow: hidden;
cursor: pointer;

@include desktop {
grid-column: 4/-4;
padding: desktop-vw(16px);
border-radius: desktop-vw(8px);
}

&::before {
content: '';
position: absolute;
Expand Down
9 changes: 7 additions & 2 deletions app/(pages)/storyblok/(component)/tutorial/tutorial.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,14 @@
}

code {
padding: desktop-vw(8px);
padding: mobile-vw(8px);
border: 1px solid var(--theme-secondary);
border-radius: desktop-vw(8px);
border-radius: mobile-vw(8px);
display: inline-block;

@include desktop {
padding: desktop-vw(8px);
border-radius: desktop-vw(8px);
}
}
}
4 changes: 4 additions & 0 deletions app/(pages)/storyblok/storyblok.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,9 @@
align-items: center;
justify-content: center;
flex-grow: 1;

@include mobile {
padding: 0 mobile-vw(16px);
}
}
}
20 changes: 8 additions & 12 deletions libs/shopify/cart/modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,13 @@ export function CartModal({ children, cart }) {
}

function EmptyCart() {
return <p className={cn('p-l', s.heading)}>your cart is empty</p>
return <p className={s.heading}>your cart is empty</p>
}

function InnerCart({ cart }) {
console.log(cart)

return (
<>
<p className={cn('p-l', s.heading)}>your cart</p>
<p className={s.heading}>your cart</p>
<div className={s.lines} data-lenis-prevent>
{cart?.lines?.map(({ id, merchandise, cost, quantity }, idx) => (
<div className={s.line} key={`${idx}-${id}`}>
Expand All @@ -58,14 +56,12 @@ function InnerCart({ cart }) {
</div>
<div className={s.info}>
<div className={s.details}>
<p className={cn('p-s', s.title)}>
{merchandise?.product?.title}
</p>
<p className={cn('p-xs', s.description)}>
<p className={s.title}>{merchandise?.product?.title}</p>
<p className={s.description}>
{merchandise?.product?.description}
</p>
</div>
<p className="p-s">$ {cost?.totalAmount?.amount}</p>
<p className={s.price}>$ {cost?.totalAmount?.amount}</p>
</div>
<Quantity
className={s.quantity}
Expand All @@ -80,7 +76,7 @@ function InnerCart({ cart }) {
))}
</div>
<div className={s.checkout}>
<div className={cn('p-s', s.top)}>
<div className={s.top}>
<p>sub total</p>
<p>$ {cart?.cost?.subtotalAmount?.amount}</p>
</div>
Expand Down Expand Up @@ -111,7 +107,7 @@ function Quantity({ className, payload }) {
return (
<div className={className}>
<QuantityButton formAction={() => formAction(-1)}>-</QuantityButton>
<span className="p-xs">{quantity}</span>
<span>{quantity}</span>
<QuantityButton formAction={() => formAction(1)}>+</QuantityButton>
</div>
)
Expand Down Expand Up @@ -149,7 +145,7 @@ function ActionButton({ children, className }) {
e.preventDefault()
}
}}
className={cn('p-s', pending && s.disable, className)}
className={cn(pending && s.disable, className)}
>
{children}
</button>
Expand Down
140 changes: 112 additions & 28 deletions libs/shopify/cart/modal/modal.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,37 +30,43 @@

.inner {
position: relative;
left: 50%;
width: 50%;
left: 25%;
width: 75%;
height: 100%;
padding: mobile-vw(12px);
background-color: var(--black);
color: var(--red);
display: flex;
flex-direction: column;
text-transform: uppercase;
transition: 800ms transform var(--gleasing);

.heading {
padding-bottom: desktop-vw(16px);
border-bottom: 1px solid var(--red);
}

@include desktop {
width: 50%;
left: 50%;
padding: desktop-vw(8px);
padding-top: desktop-vw(56px);
}

.heading {
border-bottom: 1px solid var(--red);
padding-bottom: mobile-vw(16px);

@include desktop {
padding-bottom: desktop-vw(16px);
}
}
}

.close {
position: absolute;
right: desktop-vw(8px);
top: desktop-vw(8px);
padding: mobile-vw(7px) mobile-vw(8px);
border-radius: mobile-vw(2px);
right: mobile-vw(12px);
top: mobile-vw(12px);

@include desktop {
padding: desktop-vw(7px) desktop-vw(8px);
border-radius: desktop-vw(2px);
position: absolute;
right: desktop-vw(8px);
top: desktop-vw(8px);
}

&.active {
Expand All @@ -72,57 +78,103 @@
display: flex;
flex-direction: column;
flex-grow: 1;
max-height: desktop-vw(600px);
overflow: hidden;
overflow-y: auto;
overscroll-behavior: contain;

@include desktop {
max-height: desktop-vw(600px);
}

.line {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-gap: var(--layout-columns-gap);
padding: desktop-vw(16px) 0;
padding: mobile-vw(16px) 0;
border-bottom: 1px solid var(--red);

@include desktop {
padding: desktop-vw(16px) 0;
}

.media {
position: relative;
grid-column: 1/2;
grid-column: 1/4;
width: 100%;
height: desktop-vw(250px);
aspect-ratio: 341/1404;
height: mobile-vw(150px);

img {
height: 100%;
object-fit: contain !important;
}

@include desktop {
grid-column: 1/2;
height: desktop-vw(250px);
}
}

.info {
grid-column: 2/5;
grid-column: 4/-1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: desktop-vw(8px);

@include desktop {
grid-column: 2/5;
padding-left: desktop-vw(8px);
}

.details {
display: flex;
flex-direction: column;

@include mobile {
font-size: mobile-vw(10px);
}

.title {
margin-bottom: desktop-vw(8px);
}

.description {
width: desktop-vw(308px);
@extend .ellipsis;

@include desktop {
width: desktop-vw(308px);
}
}
}

.price {
@include mobile {
align-self: flex-end;
}
}
}

.quantity {
grid-column: 5/6;
grid-column: 4/-1;
display: flex;
align-items: center;
width: fit-content;
height: fit-content;
border-radius: desktop-vw(100px);
border-radius: mobile-vw(100px);
background-color: var(--red);
color: var(--black);
padding: desktop-vw(7px) desktop-vw(16px);
padding: mobile-vw(8px) mobile-vw(16px);

@include mobile {
grid-row: 2;
justify-self: flex-end;
font-size: mobile-vw(12px);
}

@include desktop {
grid-column: 5/6;
border-radius: desktop-vw(100px);
padding: desktop-vw(7px) desktop-vw(16px);
}

button {
&.disable {
Expand All @@ -132,14 +184,23 @@
}

span {
padding: 0 desktop-vw(16px);
padding: 0 mobile-vw(8px);

@include desktop {
padding: 0 desktop-vw(16px);
}
}
}

.remove {
grid-column: 6/-1;
align-self: flex-start;
justify-self: flex-end;
grid-column: 1/4;
align-self: flex-end;

@include desktop {
grid-column: 6/-1;
justify-self: flex-end;
align-self: flex-start;
}

button {
&.disable {
Expand All @@ -152,10 +213,29 @@
}

.checkout {
position: relative;
width: 100%;
align-self: flex-end;

&::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: desktop-vw(-50px);
background: linear-gradient(
0deg,
rgba(0, 0, 0, 1) 55%,
rgba(12, 0, 36, 0) 100%
);

@include mobile {
top: mobile-vw(-50px);
}
}

.top {
position: relative;
display: flex;
justify-content: space-between;
margin-bottom: desktop-vw(16px);
Expand Down Expand Up @@ -206,4 +286,8 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;

@include mobile {
-webkit-line-clamp: 8;
}
}

0 comments on commit e10479a

Please sign in to comment.