[FeaturedBrandsPanel] virtualGridList 단위 및 css 수정
Detail Notes : 1. LiveProductList and QuickMenu, ri.scale → scaleW, scaleH (from helpMethods) 2. css 수정, color 변수 적용 및 BG 변경
This commit is contained in:
@@ -1,15 +1,15 @@
|
||||
import React, { useCallback } from "react";
|
||||
|
||||
import { VirtualGridList } from "@enact/sandstone/VirtualList";
|
||||
import ri from "@enact/ui/resolution";
|
||||
|
||||
import TItemCard from "../../../../components/TItemCard/TItemCard";
|
||||
import { scaleH, scaleW } from "../../../../utils/helperMethods";
|
||||
import css from "./LiveProductList.module.less";
|
||||
|
||||
const LIST_ITEM_CONF = {
|
||||
ITEM_WIDTH: 660 * 2,
|
||||
ITEM_HEIGHT: 236 * 2,
|
||||
SAPCING: 12 * 2,
|
||||
ITEM_WIDTH: 660,
|
||||
ITEM_HEIGHT: 236,
|
||||
SAPCING: 12,
|
||||
};
|
||||
|
||||
export default function LiveProductList({ brandProductInfo, onCardClick }) {
|
||||
@@ -50,12 +50,12 @@ export default function LiveProductList({ brandProductInfo, onCardClick }) {
|
||||
direction="vertical"
|
||||
itemRenderer={renderItem}
|
||||
itemSize={{
|
||||
minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
|
||||
minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
|
||||
minWidth: scaleW(LIST_ITEM_CONF.ITEM_WIDTH),
|
||||
minHeight: scaleH(LIST_ITEM_CONF.ITEM_HEIGHT),
|
||||
}}
|
||||
noScrollByWheel
|
||||
scrollMode="translate"
|
||||
spacing={ri.scale(LIST_ITEM_CONF.SAPCING)}
|
||||
spacing={scaleW(LIST_ITEM_CONF.SAPCING)}
|
||||
verticalScrollbar="hidden"
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
&::after {
|
||||
.position(@position: absolute, @bottom: 0, @left: 0);
|
||||
.size(@w: 100%, @h: 50px);
|
||||
background-image: linear-gradient(to bottom, transparent 65%, @COLOR_WHITE);
|
||||
background-image: linear-gradient(to bottom, transparent 65%, @BG_COLOR_01);
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
||||
@@ -2,14 +2,14 @@ import React, { useCallback, useEffect } from "react";
|
||||
|
||||
import { VirtualGridList } from "@enact/sandstone/VirtualList";
|
||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
||||
import ri from "@enact/ui/resolution";
|
||||
|
||||
import { scaleH, scaleW } from "../../../utils/helperMethods";
|
||||
import QuickMenuItem from "../QuickMenu/QuickMenuItem/QuickMenuItem";
|
||||
import css from "./QuickMenu.module.less";
|
||||
|
||||
const LIST_ITEM_CONF = {
|
||||
ITEM_WIDTH: 138 * 2,
|
||||
ITEM_HEIGHT: 138 * 2,
|
||||
ITEM_WIDTH: 138,
|
||||
ITEM_HEIGHT: 138,
|
||||
};
|
||||
|
||||
const Container = SpotlightContainerDecorator(
|
||||
@@ -48,8 +48,8 @@ export default function QuickMenu({
|
||||
horizontalScrollbar="hidden"
|
||||
itemRenderer={renderItem}
|
||||
itemSize={{
|
||||
minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
|
||||
minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
|
||||
minWidth: scaleW(LIST_ITEM_CONF.ITEM_WIDTH),
|
||||
minHeight: scaleH(LIST_ITEM_CONF.ITEM_HEIGHT),
|
||||
}}
|
||||
noScrollByWheel
|
||||
scrollMode="translate"
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
.container {
|
||||
.size(@w: 100%, @h: 180px);
|
||||
padding: 18px 60px;
|
||||
background-color: #e7e7e7;
|
||||
background-color: @BG_COLOR_01;
|
||||
|
||||
.virtualGridList {
|
||||
overflow: unset;
|
||||
|
||||
Reference in New Issue
Block a user