mirror of
https://github.com/owncast/owncast.git
synced 2025-01-10 02:27:31 +03:00
139 lines
No EOL
3.1 KiB
Text
139 lines
No EOL
3.1 KiB
Text
import { Meta } from '@storybook/addon-docs';
|
|
import Direction from './assets/direction.svg';
|
|
|
|
<Meta title="Owncast/Readme" />
|
|
|
|
<style>{`
|
|
.subheading {
|
|
--mediumdark: '#999999';
|
|
font-weight: 900;
|
|
font-size: 13px;
|
|
color: #999;
|
|
letter-spacing: 6px;
|
|
line-height: 24px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 12px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.link-list {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
row-gap: 10px;
|
|
}
|
|
|
|
@media (min-width: 620px) {
|
|
.link-list {
|
|
row-gap: 20px;
|
|
column-gap: 20px;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media all and (-ms-high-contrast:none) {
|
|
.link-list {
|
|
display: -ms-grid;
|
|
-ms-grid-columns: 1fr 1fr;
|
|
-ms-grid-rows: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
.link-item {
|
|
display: block;
|
|
padding: 20px 30px 20px 15px;
|
|
border: 1px solid #00000010;
|
|
border-radius: 5px;
|
|
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
|
|
color: #333333;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.link-item:hover {
|
|
border-color: #1EA7FD50;
|
|
transform: translate3d(0, -3px, 0);
|
|
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
|
|
}
|
|
|
|
.link-item:active {
|
|
border-color: #1EA7FD;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.link-item strong {
|
|
font-weight: 700;
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.link-item img {
|
|
height: 40px;
|
|
width: 40px;
|
|
margin-right: 15px;
|
|
flex: none;
|
|
}
|
|
|
|
.link-item span {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.tip {
|
|
display: inline-block;
|
|
border-radius: 1em;
|
|
font-size: 11px;
|
|
line-height: 12px;
|
|
font-weight: 700;
|
|
background: #E7FDD8;
|
|
color: #66BF3C;
|
|
padding: 4px 12px;
|
|
margin-right: 10px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.tip-wrapper {
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
margin-top: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.tip-wrapper code {
|
|
font-size: 12px;
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
`}</style>
|
|
|
|
# Owncast web UI v2
|
|
|
|
Owncast is going through a complete rewrite of the web app frontend.
|
|
|
|
Visit the [uiv2 milestone](https://github.com/owncast/owncast/milestone/18) on GitHub to see the individual tasks for this project. Please take a look and see if there's anything you can help with. Even just grabbing one component is a huge help!
|
|
|
|
## What
|
|
|
|
- [Next.js](https://nextjs.org/)
|
|
- [React](https://reactjs.org/)
|
|
- [Ant Design](https://ant.design/)
|
|
|
|
## Why?
|
|
|
|
- Moving to a full React Component workflow allows the project to be more productive and build features faster.
|
|
- Better accessibility.
|
|
- Better mobile experience.
|
|
|
|
## How?
|
|
|
|
This is a large project, but like anything else, breaking it into pieces and working on one thing at a time will eventually get us to the finish line.
|
|
And that's what this interface lets us do. On this page we see all the different components still needing to be worked on, and have a place to document the functionality of these pieces.
|
|
|
|
## What about the Admin?
|
|
|
|
The admin has always been a Next+React+Ant project, so the goal is to touch that as little as possible.
|
|
|
|
---
|
|
|
|
More documentation about things should go here. |