mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
bug: fix recipeCard mobile and MenuNavigationProductList
This commit is contained in:
Quangnhankie
3
next-env.d.ts
vendored
3
next-env.d.ts
vendored
@@ -1,6 +1,3 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
z-index: 99999999999;
|
||||
}
|
||||
}
|
||||
.menuNavigationProductModal{
|
||||
@@ -30,7 +30,7 @@
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 10000;
|
||||
z-index: 999999999999;
|
||||
transform: translateY(100%);
|
||||
|
||||
&.animation{
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
@apply inline-flex flex-col justify-start;
|
||||
.image{
|
||||
width: 100%;
|
||||
max-height: 22rem;
|
||||
border-radius: 2.4rem;
|
||||
img {
|
||||
border-radius: 2.4rem;
|
||||
@@ -12,14 +11,20 @@
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
@screen md{
|
||||
max-height: 22rem;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
padding: 1.6rem 0.8rem 0.4rem 0.8rem;
|
||||
@apply font-bold;
|
||||
@apply font-bold overflow-hidden overflow-ellipsis ;
|
||||
font-size: 2rem;
|
||||
line-height: 2.8rem;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-active);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* number of lines to show */
|
||||
-webkit-box-orient: vertical;
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -30,5 +35,9 @@
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3; /* number of lines to show */
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 3rem;
|
||||
@screen md{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
@import "../../../../styles/_utilities";
|
||||
.beadcrumb{
|
||||
padding-left: 3.2rem;
|
||||
padding-bottom: 3.2rem;
|
||||
}
|
||||
.image{
|
||||
@apply spacing-horizontal;
|
||||
div{
|
||||
width: 100%;
|
||||
padding: 0 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 2.4rem;
|
||||
min-height: 45.2rem;
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
@import "../../../../../styles/_utilities";
|
||||
|
||||
.recipesItem {
|
||||
@apply flex justify-between;
|
||||
margin: 1.5rem 0;
|
||||
|
||||
@screen md{
|
||||
@apply block;
|
||||
}
|
||||
|
||||
.recipesItemImage {
|
||||
@apply transition-all duration-200;
|
||||
width: 31%;
|
||||
a{
|
||||
div{
|
||||
@apply object-cover;
|
||||
min-height: 19.6rem;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@screen md {
|
||||
@apply object-cover cursor-pointer;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
img{
|
||||
height:100%;
|
||||
border-radius: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.recipesItemText {
|
||||
width: 65%;
|
||||
.recipesItemName{
|
||||
@apply topline font-bold cursor-pointer;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
font-feature-settings: "salt" on;
|
||||
color:var(--text-active);
|
||||
margin-top: 1.6rem;
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
@screen md {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.recipesItemDescription{
|
||||
color:var(--text-label);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
import { ImgWithLink } from 'src/components/common';
|
||||
import s from './RecipesItem.module.scss';
|
||||
interface RecipesItem {
|
||||
image:string,
|
||||
name: string,
|
||||
description:string,
|
||||
link: string
|
||||
}
|
||||
|
||||
const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
|
||||
return (
|
||||
<div className={s.recipesItem}>
|
||||
<div className={s.recipesItemImage}>
|
||||
<Link href={link}>
|
||||
<a>
|
||||
<ImgWithLink src={image} alt="author" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<Link href={link}>
|
||||
<a className={s.recipesItemText}>
|
||||
<div className={s.recipesItemName}>{name}</div>
|
||||
<div className={s.recipesItemDescription}>{description}</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
export default RecipesItem
|
||||
@@ -6,6 +6,10 @@
|
||||
padding:0 3.2rem;
|
||||
padding-bottom:5.6rem;
|
||||
}
|
||||
div{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.breadcrumb{
|
||||
padding:1rem 0;
|
||||
}
|
||||
@@ -39,11 +43,16 @@
|
||||
@screen md {
|
||||
@apply flex justify-between flex-wrap;
|
||||
margin: 1rem 0;
|
||||
|
||||
}
|
||||
.item {
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
@screen md {
|
||||
width: calc(97% / 2);
|
||||
margin-top:1rem;
|
||||
|
||||
}
|
||||
@screen lg{
|
||||
width: calc(97% / 3);
|
||||
@@ -63,7 +72,9 @@
|
||||
.boxSelect{
|
||||
@apply flex justify-between w-full;
|
||||
padding: 2.5rem 0;
|
||||
|
||||
div{
|
||||
max-width: 17.6rem;
|
||||
}
|
||||
@screen xl {
|
||||
@apply block;
|
||||
width: auto;
|
||||
|
||||
Reference in New Issue
Block a user