bug: fix recipeCard mobile and MenuNavigationProductList

This commit is contained in:
Quangnhankie 2021-09-16 14:27:47 +07:00
parent c85942add4
commit a4d1e913a1
7 changed files with 27 additions and 102 deletions

3
next-env.d.ts vendored
View File

@ -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.

View File

@ -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{

View File

@ -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;
}
}
}

View File

@ -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;

View File

@ -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;
}
}

View File

@ -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

View File

@ -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;