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

update style

Browse Source
This commit is contained in:
srgooglo 2022-05-12 21:15:39 +02:00
parent cb562d1c65
commit eff643a445
2 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/app/src/pages/streams/index.jsx
View File

@ -1,6 +1,7 @@
import React from "react"
import * as antd from "antd"
import { SelectableList, ActionsBar } from "components"
import { Icons } from "components/Icons"
import { ActionsBar } from "components"
import "./index.less"
@ -62,9 +63,9 @@ export default class Streams extends React.Component {
<div className="details">
<div className="title">
<h1>@{stream.userData.username}</h1>
<span>
#{stream.id}
</span>
</div>
<div>
<span> #{stream.id}</span>
</div>
</div>
</div>
@ -74,16 +75,28 @@ export default class Streams extends React.Component {
return <div className="streams">
<ActionsBar mode="float">
<div>
<antd.Button onClick={this.updateStreamsList}>Refresh</antd.Button>
</div>
</ActionsBar>
<div>
<SelectableList
selectionEnabled={false}
renderItem={this.renderListItem}
items={this.state.list}
<antd.Button
shape="round"
icon={<Icons.RefreshCw style={{ margin: 0 }} />}
onClick={this.updateStreamsList}
/>
</div>
<div>
<antd.Button
shape="round"
icon={<Icons.Sliders />}
onClick={() => window.app.setLocation("/streaming_control")}
>
Control Panel
</antd.Button>
</div>
</ActionsBar>
{
this.state.list.length > 0 &&
<div className="streams-list">
{this.state.list.map(this.renderListItem)}
</div>
}
</div>
}
}

27
packages/app/src/pages/streams/index.less
View File

@ -1,20 +1,15 @@
.streams {
.selectableList_content {
display: flex;
flex-wrap: wrap;
.selectableList_item {
max-width: 20vw;
}
.streaming-item {
.streams-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.streaming-item {
cursor: pointer;
display: flex;
flex-direction: row;
padding: 10px;
border-bottom: 1px solid #e6e6e6;
.thumbnail {
width: 15vw;
@ -22,17 +17,21 @@
background-size: cover;
img {
border-radius: 8px;
width: 100%;
height: 100%;
}
}
.details {
display: flex;
flex-direction: column;
.title {
display: inline-flex;
align-items: center;
h1{
h1 {
font-size: 1.5em;
font-weight: bold;
margin-right: 10px;
@ -45,5 +44,9 @@
}
}
}
.streaming-item:hover {
background-color: var(--background-color-accent);
}
}
}