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

[FeaturedBrandsPanel] edited css, LiveVideoCard

Browse Source
This commit is contained in:
younghoon100.park
2024-06-24 18:40:00 +09:00
parent 4c9b38c627
commit 56ac7772e7
3 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
View File

@@ -437,9 +437,9 @@ export default function FeaturedBrandsPanel({
useEffect(() => {
let timer;
if (brandLayoutInfo) {
setDisplayTopButton(false);
setDisplayTopButton(false);
if (brandLayoutInfo && isInitialFocusOccurred) {
timer = setTimeout(() => {
const orderableFlexContainer = orderableFlexContainerRef.current;
@@ -453,7 +453,7 @@ export default function FeaturedBrandsPanel({
}
return () => clearTimeout(timer);
}, [brandLayoutInfo, selectedPatnrId]);
}, [brandLayoutInfo, isInitialFocusOccurred]);
useEffect(() => {
if (isInitialFocusOccurred && selectedPatnrId && selectedPatncNm) {

11
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveVideoCard/LiveVideoCard.jsx
View File

@@ -52,17 +52,24 @@ export default memo(function LiveVideoCard({
aria-label={ariaLabel}
{...rest}
>
<figure className={isVertical ? css.vertical : css.horizontal}>
<figure
className={classNames(
css.videoThumbnail,
isVertical ? css.vertical : css.horizontal
)}
>
<CustomImage src={thumbnailImgPath} alt={showNm} ariaLabel={showNm} />
</figure>
<div>
<div className={css.videoInfo}>
<CustomImage src={ImgLiveShow} alt="Live Icon" />
<h3>{showNm}</h3>
<time>
{convertToTimeFormat(strtDt)} ~ {convertToTimeFormat(endDt)}
</time>
</div>
<div className={css.darkGradient} />
</SpottableComponent>
);
});

29
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/LiveChannelsVerticalContents/LiveVideoCard/LiveVideoCard.module.less
View File

@@ -23,16 +23,16 @@
}
}
&::after {
.position(@position: absolute, @top: 0, @right: 0, @left: 0);
.flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
.size(@w: 1002px, @h: 564px);
background-image: linear-gradient(to top, transparent 55%, @COLOR_BLACK);
border-radius: 10px 10px 0 0;
content: "";
}
// &::after {
// .position(@position: absolute, @top: 0, @right: 0, @left: 0);
// .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
// .size(@w: 1002px, @h: 564px);
// background-image: linear-gradient(to top, transparent 55%, @COLOR_BLACK);
// border-radius: 10px 10px 0 0;
// content: "";
// }
> figure:nth-child(1) {
.videoThumbnail {
.position(@position: absolute, @top: 0, @right: 0, @left: 0);
z-index: -1;
.flex();
@@ -55,7 +55,7 @@
}
}
> div:nth-child(2) {
.videoInfo {
position: absolute;
z-index: 10;
display: flex;
@@ -87,6 +87,15 @@
}
}
> .darkGradient {
.position(@position: absolute, @top: 0, @right: 0, @left: 0);
.flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
.size(@w: 1002px, @h: 564px);
background-image: linear-gradient(to top, transparent 55%, @COLOR_BLACK);
border-radius: 10px 10px 0 0;
// content: "";
}
.player {
.position(@position: absolute, @top: 0, @left: 0);
// z-index: 10;