optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Category] 리스트 아이템 스타일 수정

Browse Source 
Detail Notes :
 
1. VirtualGridList 사용한 컴포넌트에 그림자 잘려보이는 현상 수정
2. 그림자 사이즈 50px -> 22px로 축소
This commit is contained in:
jangheon Pyo
2024-02-16 10:11:54 +09:00
parent d054f6e6ab
commit 9379b14817
5 changed files with 33 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowContents.module.less
View File

@@ -2,7 +2,7 @@
@import "../../../../style/utils.module.less";
.topsTitle {
margin: 70px 0 26px;
margin-top: 70px;
color: @COLOR_GRAY08;
.font(@fontFamily: @baseFontBold, @fontSize: 36px);
}
@@ -18,19 +18,19 @@
padding: 11px 18px;
border-radius: 12px;
box-sizing: border-box;
margin-top: 26px;
position: relative;
> img {
object-fit: cover;
width: 100%;
height: 100%;
}
&:focus-within,
&:focus {
outline: 4px solid @PRIMARY_COLOR_RED;
outline-offset: -3px;
box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED,
0 0 50px 0 rgba(0, 0, 0, 0.5);
&::after {
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
}
}
}

2
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowLists.module.less
View File

@@ -3,7 +3,7 @@
.container {
.size(@w: 100%, @h: auto);
margin-top: 60px;
margin-top: 34px;
.grid {
overflow: unset;

4
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowLists/ShowListsItem.module.less
View File

@@ -7,6 +7,7 @@
border: 1px solid @COLOR_GRAY02;
background-color: @COLOR_WHITE;
padding: 18px;
position: relative;
.imgWrap {
.size(@w: 100%, @h: 288px);
@@ -30,9 +31,10 @@
}
}
&:focus-within,
&:focus {
&::after {
.focused(@boxShadow: 50px, @borderRadius:12px);
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
}
}

26
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowProductContents/ShowProductContents.jsx
View File

@@ -1,18 +1,22 @@
import React, { useCallback } from "react";
import React, { useCallback } from 'react';
import { useSelector } from "react-redux";
import { useSelector } from 'react-redux';
import { VirtualGridList } from "@enact/sandstone/VirtualList";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import { VirtualGridList } from '@enact/sandstone/VirtualList';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import TItemCard from "../../../../../components/TItemCard/TItemCard";
import { scaleH, scaleW } from "../../../../../utils/helperMethods";
import css from "./ShowProductContents.module.less";
import TItemCard from '../../../../../components/TItemCard/TItemCard';
import {
scaleH,
scaleW,
} from '../../../../../utils/helperMethods';
import css from './ShowProductContents.module.less';
const LIST_ITEM_CONF = {
ITEM_WIDTH: 324,
ITEM_HEIGHT: 438,
SPACING: 18,
ITEM_WIDTH: 342,
ITEM_HEIGHT: 490,
SPACING: 0,
};
const Container = SpotlightContainerDecorator(
@@ -49,7 +53,7 @@ export default function ShowProductContents() {
<Container className={css.container}>
{productInfos && productInfos.length > 0 && (
<VirtualGridList
classname={css.grid}
className={css.grid}
dataSize={productInfos.length}
direction="horizontal"
horizontalScrollbar="hidden"

11
com.twin.app.shoptime/src/views/CategoryPanel/CategoryContents/ShowContents/ShowProductContents/ShowProductContents.module.less
View File

@@ -3,16 +3,21 @@
.container {
.flex();
width: calc(100% - 790px);
margin: 0 18px;
width: calc(100% - 754px);
overflow: hidden;
}
.grid {
height: 438px;
height: 490px;
overflow: unset;
> div {
overflow: unset !important;
> div {
> div {
margin-left: 18px;
padding: 26px 0;
}
}
}
}