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

[components] TItemCard, container tag 및 css 수정

Browse Source 
Detail Notes :

1. container tag, li → div 변경
2. chrome version issue로 css property 수정  (gap → margin)
This commit is contained in:
younghoon100.park
2024-02-05 20:34:36 +09:00
parent f07b1c62b3
commit 57f791d1ff
2 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx
View File

@@ -1,17 +1,14 @@
import React, {
memo,
useCallback,
} from 'react';
import React, { memo, useCallback } from "react";
import classNames from 'classnames';
import classNames from "classnames";
import Spottable from '@enact/spotlight/Spottable';
import Spottable from "@enact/spotlight/Spottable";
import { $L } from '../../utils/helperMethods';
import { SpotlightIds } from '../../utils/SpotlightIds';
import css from './TItemCard.module.less';
import { $L } from "../../utils/helperMethods";
import { SpotlightIds } from "../../utils/SpotlightIds";
import css from "./TItemCard.module.less";
const SpottableComponent = Spottable("li");
const SpottableComponent = Spottable("div");
const TYPE_VERTICAL = "vertical";
const TYPE_HORIZONTAL = "horizontal";
@@ -48,6 +45,7 @@ export default memo(function TItemCard({
.map((item) => item.trim());
let originalPrice, discountedPrice, discountRate;
if (priceParts.length === 4) {
[originalPrice, discountedPrice, , discountRate] = priceParts;
} else if (priceParts.length === 2) {

10
com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
View File

@@ -5,7 +5,6 @@
.horizontal {
/* normal */
display: flex;
gap: 20px;
.size(@w: 660px, @h: 236px);
padding: 18px;
border-radius: 12px;
@@ -15,6 +14,7 @@
// left contents (image contetns)
> div:nth-child(1) {
position: relative;
margin-right: 20px;
color: @COLOR_WHITE;
img {
@@ -60,11 +60,11 @@
p {
.flex(@justifyCenter: flex-start);
gap: 5px;
.font(@fontFamily: @baseFontBold, @fontSize: 30px);
color: @PRIMARY_COLOR_RED;
span {
margin-left: 5px;
.font(@fontFamily: @baseFont, @fontSize: 18px);
color: @COLOR_GRAY04;
text-decoration: line-through;
@@ -86,7 +86,6 @@
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
.size(@w: 324px, @h: 438px);
padding: 18px;
border-radius: 12px;
@@ -97,6 +96,7 @@
> div:nth-child(1) {
position: relative;
.size(@w: 288px, @h: 288px);
margin-bottom: 12px;
color: @COLOR_WHITE;
img {
@@ -129,10 +129,10 @@
// bottom contents
> div:nth-child(2) {
.flex(@direction: column, @alignCenter: flex-start);
gap: 6px;
flex-grow: 1;
h3 {
margin-bottom: 6px;
.font(@fontFamily: @baseFontBold, @fontSize: 24px);
color: @COLOR_GRAY06;
.elip(@clamp:2);
@@ -142,11 +142,11 @@
p {
.flex(@justifyCenter: flex-start);
gap: 5px;
.font(@fontFamily: @baseFontBold, @fontSize: 30px);
color: @PRIMARY_COLOR_RED;
letter-spacing: -1px;
span {
margin-left: 5px;
.font(@fontFamily: @baseFont, @fontSize: 18px);
color: @COLOR_GRAY04;
text-decoration: line-through;