RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 19:14:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve livestream info

Browse Source
This commit is contained in:
srgooglo 2022-10-20 19:49:43 +02:00
parent 3f10f47138
commit eb6c247339
2 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/app/src/pages/home/components/livestreams/index.jsx
View File

@ -9,7 +9,7 @@ import Livestream from "../../../../models/livestream"
import "./index.less" import "./index.less"
const LivestreamItem = (props) => { const LivestreamItem = (props) => {
const { livestream } = props const { livestream = {} } = props
const handleOnClick = async () => { const handleOnClick = async () => {
if (typeof props.onClick !== "function") { if (typeof props.onClick !== "function") {
@ -22,13 +22,19 @@ const LivestreamItem = (props) => {
return <div className="livestream_item" onClick={handleOnClick}> return <div className="livestream_item" onClick={handleOnClick}>
<div className="livestream_thumbnail"> <div className="livestream_thumbnail">
<img src={livestream.thumbnail ?? "/assets/new_file.png"} /> <img src={livestream.info?.thumbnail ?? "/assets/new_file.png"} />
</div> </div>
<div className="livestream_info"> <div className="livestream_info">
<UserPreview username={livestream.username} /> <UserPreview username={livestream.username} />
<div className="livestream_title">
<h1>{livestream.info?.title}</h1>
</div>
<div className="livestream_description"> <div className="livestream_description">
{livestream.description ?? "No description"} <h2>{livestream.info?.description ?? "No description"}</h2>
</div>
<div className="livestream_category">
{livestream.info?.catagory ?? "No category"}
</div> </div>
</div> </div>
</div> </div>

38
packages/app/src/pages/home/components/livestreams/index.less
View File

@ -40,6 +40,8 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
background-color: var(--background-color-primary2); background-color: var(--background-color-primary2);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@ -68,21 +70,49 @@
} }
.livestream_info { .livestream_info {
position: relative;
width: 100%;
margin-left: 20px; margin-left: 20px;
font-size: 1rem; font-size: 1rem;
color: var(--text-color);
padding: 10px 0; padding: 10px 0;
color: var(--text-color);
.userPreview { .userPreview {
font-size: 1.5rem; font-size: 1.5rem;
} }
.livestream_description { h1,
margin-top: 20px; h2 {
font-size: 1.5rem; margin: 0;
height: fit-content;
color: var(--text-color); color: var(--text-color);
} }
.livestream_title {
margin-top: 10px;
font-size: 1.5rem;
height: fit-content;
font-family: "Space Grotesk", sans-serif;
}
.livestream_description {
font-size: 0.6rem;
font-weight: 400;
height: fit-content;
}
.livestream_category {
position: absolute;
top: 0;
right: 0;
padding: 10px;
}
} }
} }
} }