From 4e663733fb9c537412b7fa734669d751d0cab2a4 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Thu, 10 Apr 2025 18:22:30 +0000 Subject: [PATCH] improve streaming list style --- .../pages/tv/tabs/livestreamsList/index.jsx | 14 +- .../pages/tv/tabs/livestreamsList/index.less | 220 +++++++++++------- 2 files changed, 147 insertions(+), 87 deletions(-) diff --git a/packages/app/src/pages/tv/tabs/livestreamsList/index.jsx b/packages/app/src/pages/tv/tabs/livestreamsList/index.jsx index 0c004439..aca39b85 100755 --- a/packages/app/src/pages/tv/tabs/livestreamsList/index.jsx +++ b/packages/app/src/pages/tv/tabs/livestreamsList/index.jsx @@ -1,6 +1,7 @@ import React from "react" import * as antd from "antd" import { FastAverageColor } from "fast-average-color" +import { Icons } from "@components/Icons" import UserPreview from "@components/UserPreview" @@ -69,17 +70,26 @@ const LivestreamItem = (props) => {
+ + {livestream.info?.category} + +

{livestream.info?.title}

-

+ {livestream.info?.description ?? "No description"} -

+
+
+ +

{livestream.info?.viewers ?? 0}

+
+
diff --git a/packages/app/src/pages/tv/tabs/livestreamsList/index.less b/packages/app/src/pages/tv/tabs/livestreamsList/index.less index adeb83c5..719b9b8a 100755 --- a/packages/app/src/pages/tv/tabs/livestreamsList/index.less +++ b/packages/app/src/pages/tv/tabs/livestreamsList/index.less @@ -1,120 +1,170 @@ @item_border_radius: 10px; .livestream_list { - display: grid; + display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - grid-column-gap: 15px; - grid-row-gap: 15px; + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-column-gap: 15px; + grid-row-gap: 15px; - width: 100%; - height: 100%; + width: 100%; + height: 100%; - @media not screen and (max-width: 1900px) { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } + @media not screen and (max-width: 1900px) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } - @media not screen and (max-width: 2300px) { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } + @media not screen and (max-width: 2300px) { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } - @media not screen and (max-width: 2600px) { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } + @media not screen and (max-width: 2600px) { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } - @media not screen and (max-width: 2900px) { - grid-template-columns: repeat(7, minmax(0, 1fr)); - } + @media not screen and (max-width: 2900px) { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } - &.empty { - display: flex; - flex-direction: column; + &.empty { + display: flex; + flex-direction: column; - align-items: center; - justify-content: center; - } + align-items: center; + justify-content: center; + } +} - .livestream_item { - display: flex; - flex-direction: column; +.livestream_item { + display: flex; + flex-direction: column; - align-items: center; + align-items: center; - width: 100%; - height: fit-content; + width: 100%; + height: fit-content; - padding: 10px; - transition: all 150ms ease-in-out; + padding: 10px; + transition: all 150ms ease-in-out; - background-color: var(--background-color-primary-2); + background-color: var(--background-color-primary-2); - border: 1px solid var(--border-color); - border-radius: @item_border_radius; + border: 1px solid var(--border-color); + border-radius: @item_border_radius; - cursor: pointer; + cursor: pointer; - &:hover { - background-color: var(--background-color-accent); - } + &:hover { + background-color: var(--background-color-accent); + } - &.white_background { + &.white_background { + h1, + h2, + span { + color: var(--text-color-black) !important; + } + } - h1, - h2, - span { - color: var(--text-color-black) !important; - } - } + .livestream_thumbnail { + width: 100%; - .livestream_thumbnail { - width: 100%; + img { + width: 100%; + height: 100%; - img { - width: 100%; - height: 100%; + border-radius: @item_border_radius; - border-radius: @item_border_radius; + object-fit: cover; + } + } - object-fit: cover; - } - } + .livestream_info { + position: relative; - .livestream_info { - position: relative; + display: flex; + flex-direction: column; - display: flex; - flex-direction: column; + width: 100%; - width: 100%; + gap: 10px; - gap: 10px; + h1, + h2 { + margin: 0; + } - h1, - h2 { - margin: 0; - } + .livestream_titles { + position: relative; - .livestream_titles { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - gap: 7px; + padding: 10px 0; - color: var(--text-color); + color: var(--text-color); - .livestream_title { - margin-top: 10px; - font-size: 1rem; - height: fit-content; - font-family: "Space Grotesk", sans-serif; - } + .livestream_title { + max-height: 200px; - .livestream_description { - font-size: 0.6rem; - font-weight: 400; - height: fit-content; - } - } - } - } -} \ No newline at end of file + overflow: hidden; + white-space: wrap; + text-overflow: ellipsis; + + h1 { + font-size: 1.4rem; + font-family: "Space Grotesk", sans-serif; + text-overflow: ellipsis; + } + } + + .livestream_description { + display: flex; + flex-direction: row; + + align-items: center; + + max-height: 200px; + + overflow: hidden; + white-space: wrap; + text-overflow: ellipsis; + + .livestream_description-text { + font-size: 0.7rem; + font-weight: 400; + } + } + + .livestream_category { + position: absolute; + top: 0; + right: 0; + + margin-top: 13px; + margin-left: 0; + margin-right: 0; + } + } + + .livestream_views { + position: absolute; + + bottom: 0; + right: 0; + + display: flex; + flex-direction: row; + + align-items: center; + + gap: 6px; + + padding: 5px 10px; + + background-color: var(--background-color-primary); + border-radius: 12px; + font-family: "DM Mono", monospace; + } + } +}