[Mypagepanel] favorite,Recentlyviewed,reminders 초기화
- 원복건
This commit is contained in:
junghoon86.park
@@ -5,9 +5,6 @@ import classNames from "classnames";
|
|||||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
||||||
import Spottable from "@enact/spotlight/Spottable";
|
import Spottable from "@enact/spotlight/Spottable";
|
||||||
|
|
||||||
import { $L } from "../../utils/helperMethods";
|
|
||||||
import TButton, { SIZES, TYPES } from "../TButton/TButton";
|
|
||||||
import TSwitch from "../TSwitch/TSwitch";
|
|
||||||
import css from "./THeader.module.less";
|
import css from "./THeader.module.less";
|
||||||
|
|
||||||
const Container = SpotlightContainerDecorator(
|
const Container = SpotlightContainerDecorator(
|
||||||
@@ -15,31 +12,13 @@ const Container = SpotlightContainerDecorator(
|
|||||||
"div"
|
"div"
|
||||||
);
|
);
|
||||||
const SpottableComponent = Spottable("button");
|
const SpottableComponent = Spottable("button");
|
||||||
export default function THeader({
|
export default function THeader({ title, className, onBackButton, onClick }) {
|
||||||
title,
|
|
||||||
className,
|
|
||||||
onBackButton,
|
|
||||||
onClick,
|
|
||||||
chkDelete,
|
|
||||||
}) {
|
|
||||||
return (
|
return (
|
||||||
<Container className={classNames(css.tHeader, className)}>
|
<Container className={classNames(css.tHeader, className)}>
|
||||||
{onBackButton && (
|
{onBackButton && (
|
||||||
<SpottableComponent className={css.button} onClick={onClick} />
|
<SpottableComponent className={css.button} onClick={onClick} />
|
||||||
)}
|
)}
|
||||||
<div className={css.title}>{title}</div>
|
<div className={css.title}>{title}</div>
|
||||||
{title === "Reminders" && chkDelete && (
|
|
||||||
<>
|
|
||||||
<TSwitch onClick={onClick} />
|
|
||||||
<TButton
|
|
||||||
type={TYPES.mypage}
|
|
||||||
className={css.deleteBtn}
|
|
||||||
size={SIZES.small}
|
|
||||||
>
|
|
||||||
{$L("Delete")}
|
|
||||||
</TButton>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,27 +16,3 @@
|
|||||||
margin-left: 61px;
|
margin-left: 61px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
|
||||||
.size(@w: 60px, @h: 60px);
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-image: url("../../../assets/images/btn/btn-60-bk-back-nor@3x.png");
|
|
||||||
border: none;
|
|
||||||
margin-right: -49px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background-image: url("../../../assets/images/btn/btn-60-wh-back-foc@3x.png");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.deleteBtn {
|
|
||||||
.size(@w: 180px, @h: 60px);
|
|
||||||
.position(@position: absolute, @top: 15px, @right: 60px, @bottom: auto, @left: auto);
|
|
||||||
&:focus {
|
|
||||||
&::after {
|
|
||||||
.focused(@boxShadow: 22px, @borderRadius:12px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -23,7 +23,6 @@ export default function MyPagePanel() {
|
|||||||
const { panelInfo } = panelInfos || {};
|
const { panelInfo } = panelInfos || {};
|
||||||
const { menuNm, menuOrd } = panelInfo || {};
|
const { menuNm, menuOrd } = panelInfo || {};
|
||||||
const { getScrollTo, scrollTop } = useScrollTo();
|
const { getScrollTo, scrollTop } = useScrollTo();
|
||||||
const [hasBtn, setHasBtn] = useState(false);
|
|
||||||
|
|
||||||
const myPageComponents = {
|
const myPageComponents = {
|
||||||
"My Info": MyInfo,
|
"My Info": MyInfo,
|
||||||
@@ -37,25 +36,6 @@ export default function MyPagePanel() {
|
|||||||
|
|
||||||
const SelectedComponent = menuNm && myPageComponents[menuNm];
|
const SelectedComponent = menuNm && myPageComponents[menuNm];
|
||||||
|
|
||||||
const [isOn, setIsOn] = useState(false);
|
|
||||||
const [checkTmp, setCheckTmp] = useState(false);
|
|
||||||
|
|
||||||
const ToggleHandler = () => {
|
|
||||||
setIsOn(!isOn);
|
|
||||||
};
|
|
||||||
const btnComponents = ["Recently Viewed", "Favorites", "Reminders"];
|
|
||||||
const btnLength = btnComponents.filter(
|
|
||||||
(btnComponents) => btnComponents === menuNm
|
|
||||||
).length;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOn === true) {
|
|
||||||
setCheckTmp(true);
|
|
||||||
} else {
|
|
||||||
setCheckTmp(false);
|
|
||||||
}
|
|
||||||
}, [ToggleHandler]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
Spotlight.focus(SpotlightIds.TBODY);
|
Spotlight.focus(SpotlightIds.TBODY);
|
||||||
scrollTop();
|
scrollTop();
|
||||||
@@ -63,18 +43,9 @@ export default function MyPagePanel() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<TPanel>
|
<TPanel>
|
||||||
<THeader
|
<THeader title={menuNm} />
|
||||||
title={menuNm}
|
|
||||||
onClick={ToggleHandler}
|
|
||||||
chkDelete={btnLength >= 1 ? true : false}
|
|
||||||
/>
|
|
||||||
<TBody className={css.tBody} cbScrollTo={getScrollTo}>
|
<TBody className={css.tBody} cbScrollTo={getScrollTo}>
|
||||||
{SelectedComponent && (
|
{SelectedComponent && <SelectedComponent scrollTop={scrollTop} />}
|
||||||
<SelectedComponent
|
|
||||||
scrollTop={scrollTop}
|
|
||||||
checkTmp={menuNm === "Reminders" && isOn === true ? checkTmp : null}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</TBody>
|
</TBody>
|
||||||
</TPanel>
|
</TPanel>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,294 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import { useSelector } from "react-redux";
|
|
||||||
|
|
||||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
|
||||||
import Spottable from "@enact/spotlight/Spottable";
|
|
||||||
|
|
||||||
import TButton, { SIZES, TYPES } from "../../../../components/TButton/TButton";
|
|
||||||
import TScroller from "../../../../components/TScroller/TScroller";
|
|
||||||
import css from "../Favorites/Favorites.module.less";
|
import css from "../Favorites/Favorites.module.less";
|
||||||
|
|
||||||
const SpottableComponent = Spottable("div");
|
|
||||||
const Container = SpotlightContainerDecorator(
|
|
||||||
{ enterTo: "last-focused" },
|
|
||||||
"div"
|
|
||||||
);
|
|
||||||
export default function Favorites() {
|
export default function Favorites() {
|
||||||
const favoriteDatas = useSelector((state) => state.myPage.favoriteData);
|
return <div>Favorites</div>;
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={css.favoriteContainer}>
|
|
||||||
<div className={css.contentsBox}>
|
|
||||||
<TScroller>
|
|
||||||
<Container className={css.contents}>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
<div className={css.soldout}>
|
|
||||||
<div className={css.soldOutBg}></div>
|
|
||||||
<div className={css.soldOutText}>Sold Out</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
<div className={css.soldout}>
|
|
||||||
<div className={css.soldOutBg}></div>
|
|
||||||
<div className={css.soldOutText}>Sold Out</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
</Container>
|
|
||||||
</TScroller>
|
|
||||||
</div>
|
|
||||||
{/* <div className={css.contentsBox}>
|
|
||||||
<div className={classNames(css.contents, css.noContents)}>
|
|
||||||
<div className={css.noTitle}>
|
|
||||||
<div className={css.textBox}>You have no Favorites</div>
|
|
||||||
<div className={css.emptyBtnBox}>
|
|
||||||
<TButton
|
|
||||||
type={TYPES.agree}
|
|
||||||
className={css.noTitleBtnBox}
|
|
||||||
size={SIZES.small}
|
|
||||||
>
|
|
||||||
{$L("Previous")}
|
|
||||||
</TButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,126 +1,2 @@
|
|||||||
@import "../../../../style/CommonStyle.module.less";
|
@import "../../../../style/CommonStyle.module.less";
|
||||||
@import "../../../../style/utils.module.less";
|
@import "../../../../style/utils.module.less";
|
||||||
|
|
||||||
.favoriteContainer {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
background: @BG_COLOR_01;
|
|
||||||
overflow-y: auto;
|
|
||||||
.contentsBox {
|
|
||||||
margin: 0 60px;
|
|
||||||
|
|
||||||
.buttonBox {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
.locateBox {
|
|
||||||
min-width: 180px;
|
|
||||||
width: 180px;
|
|
||||||
height: 54px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.contents {
|
|
||||||
margin-top: 42px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
&.noContents {
|
|
||||||
text-align: center;
|
|
||||||
flex: none;
|
|
||||||
.noTitle {
|
|
||||||
margin-top: 246px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.textBox {
|
|
||||||
font-size: 50px;
|
|
||||||
font-family: @baseFont;
|
|
||||||
color: @COLOR_GRAY06;
|
|
||||||
}
|
|
||||||
.emptyBtnBox {
|
|
||||||
margin-top: 88px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: row;
|
|
||||||
.noTitleBtnBox {
|
|
||||||
min-width: 180px;
|
|
||||||
.size(@w: 180px, @h: 54px);
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: @baseFont;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.itemBox {
|
|
||||||
flex: none;
|
|
||||||
margin-right: 26px;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
.position(@position: relative, @top: auto, @right: auto, @bottom: auto, @left: auto);
|
|
||||||
.size(@w: 315px, @h: 265px);
|
|
||||||
border-radius: 12px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid @COLOR_GRAY09;
|
|
||||||
overflow: hidden;
|
|
||||||
&:focus {
|
|
||||||
&::after {
|
|
||||||
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
|
||||||
}
|
|
||||||
.productbox {
|
|
||||||
background: @COLOR_WHITE;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:nth-child(5n + 5) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.imgBox {
|
|
||||||
.size(@w: 313px, @h: 177px);
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.soldout {
|
|
||||||
position: absolute;
|
|
||||||
.position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
|
|
||||||
.size(@w: 313px, @h: 177px);
|
|
||||||
text-align: center;
|
|
||||||
.soldOutBg {
|
|
||||||
.position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
|
|
||||||
.size(@w: 313px, @h: 177px);
|
|
||||||
background: #ccc;
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
.soldOutText {
|
|
||||||
.size(@w: 313px, @h: 177px);
|
|
||||||
line-height: 177px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.productbox {
|
|
||||||
.size(@w: 313px, @h: 88px);
|
|
||||||
background-color: #e3e7ee;
|
|
||||||
padding: 15px 11px 0;
|
|
||||||
.pdName {
|
|
||||||
.elip(@clamp:1);
|
|
||||||
line-height: normal;
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: @baseFont;
|
|
||||||
color: @COLOR_GRAY06;
|
|
||||||
}
|
|
||||||
.pdAccount {
|
|
||||||
.elip(@clamp:1);
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: @baseFontBold;
|
|
||||||
color: @COLOR_GRAY06;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,244 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
|
|
||||||
import Spottable from "@enact/spotlight/Spottable";
|
|
||||||
|
|
||||||
import TScroller from "../../../../components/TScroller/TScroller";
|
|
||||||
import css from "../RecentlyViewed/RecentlyViewed.module.less";
|
import css from "../RecentlyViewed/RecentlyViewed.module.less";
|
||||||
|
|
||||||
const SpottableComponent = Spottable("div");
|
|
||||||
const Container = SpotlightContainerDecorator(
|
|
||||||
{ enterTo: "last-focused" },
|
|
||||||
"div"
|
|
||||||
);
|
|
||||||
|
|
||||||
export default function RecentlyViewed() {
|
export default function RecentlyViewed() {
|
||||||
return (
|
return <div>RecentlyViewed</div>;
|
||||||
<div className={css.recentContainer}>
|
|
||||||
<div className={css.contentsBox}>
|
|
||||||
<TScroller>
|
|
||||||
<div className={css.lineBox}>
|
|
||||||
<div className={css.subTitle}>Today</div>
|
|
||||||
</div>
|
|
||||||
<Container className={css.contents}>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
<div className={css.soldout}>
|
|
||||||
<div className={css.soldOutBg}></div>
|
|
||||||
<div className={css.soldOutText}>Sold Out</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
</Container>
|
|
||||||
<div className={css.lineBox}>
|
|
||||||
<div className={css.subTitle}>07/20</div>
|
|
||||||
</div>
|
|
||||||
<Container className={css.contents}>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
<div className={css.soldout}>
|
|
||||||
<div className={css.soldOutBg}></div>
|
|
||||||
<div className={css.soldOutText}>Sold Out</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
<div className={css.soldout}>
|
|
||||||
<div className={css.soldOutBg}></div>
|
|
||||||
<div className={css.soldOutText}>Sold Out</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent className={css.itemBox}>
|
|
||||||
<div className={css.imgBox}>
|
|
||||||
<img src="https://picsum.photos/315/177" />
|
|
||||||
</div>
|
|
||||||
<div className={css.productbox}>
|
|
||||||
<div className={css.pdName}>
|
|
||||||
7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with
|
|
||||||
LG EasyLoad™ Door and AI Sensing
|
|
||||||
</div>
|
|
||||||
<div className={css.pdAccount}>$999.99</div>
|
|
||||||
</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
</Container>
|
|
||||||
</TScroller>
|
|
||||||
</div>
|
|
||||||
{/* <div className={css.contentsBox}>
|
|
||||||
<div className={classNames(css.contents, css.noContents)}>
|
|
||||||
<div className={css.noTitle}>
|
|
||||||
<div className={css.textBox}>
|
|
||||||
You have no recently watched Shows or Item
|
|
||||||
</div>
|
|
||||||
<div className={css.emptyBtnBox}>
|
|
||||||
<TButton
|
|
||||||
type={TYPES.agree}
|
|
||||||
className={css.noTitleBtnBox}
|
|
||||||
size={SIZES.small}
|
|
||||||
>
|
|
||||||
{$L("Previous")}
|
|
||||||
</TButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,133 +1,2 @@
|
|||||||
@import "../../../../style/CommonStyle.module.less";
|
@import "../../../../style/CommonStyle.module.less";
|
||||||
@import "../../../../style/utils.module.less";
|
@import "../../../../style/utils.module.less";
|
||||||
|
|
||||||
.recentContainer {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
background: @BG_COLOR_01;
|
|
||||||
.contentsBox {
|
|
||||||
margin: 0 60px;
|
|
||||||
.lineBox {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 30px;
|
|
||||||
margin-top: 35px;
|
|
||||||
&.first-child {
|
|
||||||
margin-top: 42px;
|
|
||||||
}
|
|
||||||
.subTitle {
|
|
||||||
flex: none;
|
|
||||||
font-size: 36px;
|
|
||||||
font-family: @baseFontBold;
|
|
||||||
width: 132px;
|
|
||||||
color: @COLOR_GRAY06;
|
|
||||||
letter-spacing: -0.9px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.contents {
|
|
||||||
margin-top: 30px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
&.noContents {
|
|
||||||
text-align: center;
|
|
||||||
.noTitle {
|
|
||||||
margin-top: 246px;
|
|
||||||
width: 100%;
|
|
||||||
.textBox {
|
|
||||||
font-size: 50px;
|
|
||||||
font-family: @baseFont;
|
|
||||||
color: @COLOR_GRAY06;
|
|
||||||
}
|
|
||||||
.emptyBtnBox {
|
|
||||||
margin-top: 88px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: row;
|
|
||||||
.noTitleBtnBox {
|
|
||||||
min-width: 180px;
|
|
||||||
.size(@w: 180px, @h: 54px);
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: @baseFont;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.itemBox {
|
|
||||||
flex: none;
|
|
||||||
margin-right: 26px;
|
|
||||||
margin-top: 50px;
|
|
||||||
.position(@position: relative, @top: auto, @right: auto, @bottom: auto, @left: auto);
|
|
||||||
.size(@w: 315px, @h: 265px);
|
|
||||||
border-radius: 12px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid @COLOR_GRAY09;
|
|
||||||
overflow: hidden;
|
|
||||||
&:focus {
|
|
||||||
&::after {
|
|
||||||
.focused(@boxShadow: 22px, @borderRadius: 12px);
|
|
||||||
}
|
|
||||||
.productbox {
|
|
||||||
background: @COLOR_WHITE;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:nth-child(5n + 5) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
&:nth-child(1),
|
|
||||||
&:nth-child(2),
|
|
||||||
&:nth-child(3),
|
|
||||||
&:nth-child(4),
|
|
||||||
&:nth-child(5) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.imgBox {
|
|
||||||
.size(@w: 313px, @h: 177px);
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.soldout {
|
|
||||||
position: absolute;
|
|
||||||
.position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
|
|
||||||
.size(@w: 313px, @h: 177px);
|
|
||||||
text-align: center;
|
|
||||||
.soldOutBg {
|
|
||||||
.position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
|
|
||||||
.size(@w: 313px, @h: 177px);
|
|
||||||
background: #ccc;
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
.soldOutText {
|
|
||||||
.size(@w: 313px, @h: 177px);
|
|
||||||
line-height: 177px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.productbox {
|
|
||||||
.size(@w: 313px, @h: 88px);
|
|
||||||
background-color: #e3e7ee;
|
|
||||||
padding: 15px 11px 0;
|
|
||||||
.pdName {
|
|
||||||
.elip(@clamp:1);
|
|
||||||
line-height: normal;
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: @baseFont;
|
|
||||||
color: @COLOR_GRAY06;
|
|
||||||
}
|
|
||||||
.pdAccount {
|
|
||||||
.elip(@clamp:1);
|
|
||||||
font-size: 20px;
|
|
||||||
font-family: @baseFontBold;
|
|
||||||
color: @COLOR_GRAY06;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,257 +1,5 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React from "react";
|
||||||
|
|
||||||
import classNames from "classnames";
|
export default function Reminders() {
|
||||||
|
return <div>Reminders</div>;
|
||||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
|
||||||
import Spottable from "@enact/spotlight/Spottable";
|
|
||||||
|
|
||||||
import css from "../Reminders/Reminders.module.less";
|
|
||||||
|
|
||||||
const SpottableComponent = Spottable("div");
|
|
||||||
const Container = SpotlightContainerDecorator(
|
|
||||||
{ enterTo: "last-focused" },
|
|
||||||
"div"
|
|
||||||
);
|
|
||||||
|
|
||||||
export default function Reminders({ checkTmp }) {
|
|
||||||
const [isCheck, setIsCheck] = useState(false);
|
|
||||||
useEffect(() => {
|
|
||||||
checkTmp === true ? setIsCheck(true) : setIsCheck(false);
|
|
||||||
}, [checkTmp]);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className={css.reminderContainer}>
|
|
||||||
<div className={css.contentsBox}>
|
|
||||||
<div className={css.headerBox}></div>
|
|
||||||
|
|
||||||
<Container className={css.showItem}>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true ? css.checked : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true ? css.checked : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true && css.checked
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true && css.checked
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true ? css.checked : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true ? css.checked : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true && css.checked
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true ? css.checked : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true ? css.checked : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true ? css.checked : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true ? css.checked : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true && css.checked
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true ? css.checked : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true && css.checked
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true ? css.checked : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
<SpottableComponent
|
|
||||||
className={classNames(
|
|
||||||
css.listItem,
|
|
||||||
isCheck === true ? css.checked : null
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={css.logo}>HSN</div>
|
|
||||||
<div className={css.date}>03/21/2020 12:01 PM</div>
|
|
||||||
<div className={css.title}>
|
|
||||||
G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design
|
|
||||||
Fashions
|
|
||||||
</div>
|
|
||||||
<div className={css.actor}>with Host Michelle Yarn</div>
|
|
||||||
</SpottableComponent>
|
|
||||||
</Container>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,109 +1,2 @@
|
|||||||
@import "../../../../style/CommonStyle.module.less";
|
@import "../../../../style/CommonStyle.module.less";
|
||||||
@import "../../../../style/utils.module.less";
|
@import "../../../../style/utils.module.less";
|
||||||
|
|
||||||
.reminderContainer {
|
|
||||||
width: 100%;
|
|
||||||
.contentsBox {
|
|
||||||
padding: 0 60px;
|
|
||||||
.headerBox {
|
|
||||||
}
|
|
||||||
.tabContainer {
|
|
||||||
margin-top: 34px;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
.tButtonTab {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.tButton {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.contents {
|
|
||||||
}
|
|
||||||
.showItem {
|
|
||||||
margin-top: 50px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.listItem {
|
|
||||||
flex: none;
|
|
||||||
.size(@w:315px,@h:177px);
|
|
||||||
padding: 26px 60px 26px 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0 26px 50px 0;
|
|
||||||
position: relative;
|
|
||||||
&:nth-child(5n + 1) {
|
|
||||||
border: 1px solid #0077c8;
|
|
||||||
background: #eef6fb;
|
|
||||||
}
|
|
||||||
&:nth-child(5n + 2) {
|
|
||||||
border: 1px solid #167aac;
|
|
||||||
background: #eef6fb;
|
|
||||||
}
|
|
||||||
&:nth-child(5n + 3) {
|
|
||||||
border: 1px solid #182535;
|
|
||||||
background: #f5f9fd;
|
|
||||||
}
|
|
||||||
&:nth-child(5n + 4) {
|
|
||||||
border: 1px solid #f57c67;
|
|
||||||
background: #fef6f5;
|
|
||||||
}
|
|
||||||
&:nth-child(5n + 5) {
|
|
||||||
border: 1px solid #0077c8;
|
|
||||||
background: #eef6fb;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.logo {
|
|
||||||
.size(@w:30px,@h:30px);
|
|
||||||
border-radius: 50%;
|
|
||||||
.position(@position: absolute, @top: 11px, @right: 11px, @bottom: auto, @left: auto);
|
|
||||||
background-color: #0077c8;
|
|
||||||
font-size: 10px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
.date {
|
|
||||||
color: #cf0652;
|
|
||||||
font-family: @baseFontBold;
|
|
||||||
font-size: 20px;
|
|
||||||
height: 15px;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
margin-top: 15px;
|
|
||||||
color: @COLOR_GRAY06;
|
|
||||||
font-family: @baseFontBold;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 1.33;
|
|
||||||
.size(@w:235px,@h:56px);
|
|
||||||
.elip(@clamp:2);
|
|
||||||
}
|
|
||||||
.actor {
|
|
||||||
margin-top: 20px;
|
|
||||||
color: #666;
|
|
||||||
font-family: @baseFont;
|
|
||||||
font-size: 18px;
|
|
||||||
height: 13px;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
&.checked {
|
|
||||||
&::after {
|
|
||||||
.position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0);
|
|
||||||
.size(@w:315px,@h:177px);
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
content: "";
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
&::after {
|
|
||||||
.focused(@boxShadow: 22px, @borderRadius: 0px);
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user