From a4d1e913a1a74b69d492cef01097e94ee9d8bca6 Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Thu, 16 Sep 2021 14:27:47 +0700 Subject: [PATCH] bug: fix recipeCard mobile and MenuNavigationProductList --- next-env.d.ts | 3 - .../MenuNavigationProductList.module.scss | 4 +- .../common/RecipeCard/RecipeCard.module.scss | 13 +++- .../BlogDetailImg/BlogDetailImg.module.scss | 3 +- .../RecipesItem/RecipesItem.module.scss | 61 ------------------- .../RecipesList/RecipesItem/RecipesItem.tsx | 32 ---------- .../RecipesList/RecipesList.module.scss | 13 +++- 7 files changed, 27 insertions(+), 102 deletions(-) delete mode 100644 src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss delete mode 100644 src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx diff --git a/next-env.d.ts b/next-env.d.ts index 9bc3dd46b..c6643fda1 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,3 @@ /// /// /// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss index 353b9073e..3732c00d8 100644 --- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss +++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss @@ -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{ diff --git a/src/components/common/RecipeCard/RecipeCard.module.scss b/src/components/common/RecipeCard/RecipeCard.module.scss index 19f3eb76a..6b07d9109 100644 --- a/src/components/common/RecipeCard/RecipeCard.module.scss +++ b/src/components/common/RecipeCard/RecipeCard.module.scss @@ -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; + } } } \ No newline at end of file diff --git a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss index aad3aebbf..b07e8ef46 100644 --- a/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss +++ b/src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss @@ -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; diff --git a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss deleted file mode 100644 index dac6dbbc9..000000000 --- a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss +++ /dev/null @@ -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; - } - -} diff --git a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx deleted file mode 100644 index 01918c86e..000000000 --- a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx +++ /dev/null @@ -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 ( -
-
- - - - - -
- - -
{name}
-
{description}
- - -
- ) -} - -export default RecipesItem diff --git a/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss index 5f9ded191..51ed15a3e 100644 --- a/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss +++ b/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss @@ -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;