Gabe Kangas
3 years ago
11 changed files with 54 additions and 129 deletions
@ -1,139 +1,53 @@ |
|||||||
import { Meta } from '@storybook/addon-docs'; |
import { Meta } from '@storybook/addon-docs'; |
||||||
import Direction from './assets/direction.svg'; |
import { Typography } from 'antd'; |
||||||
|
|
||||||
<Meta title="Owncast/Readme" /> |
<Meta title="Owncast/Readme" /> |
||||||
|
|
||||||
<style>{` |
<Typography.Title style={{color: 'var(--primary-color)'}}>Owncast Web UI v2</Typography.Title> |
||||||
.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. |
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! |
Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on GitHub to see the individual tasks for this project. |
||||||
|
|
||||||
## What |
|
||||||
|
|
||||||
- [Next.js](https://nextjs.org/) |
|
||||||
- [React](https://reactjs.org/) |
|
||||||
- [Ant Design](https://ant.design/) |
|
||||||
|
|
||||||
## Why? |
## Why? |
||||||
|
|
||||||
- Moving to a full React Component workflow allows the project to be more productive and build features faster. |
- Moving to a full React Component workflow allows the project to be more productive and build features faster. |
||||||
|
- Share code between the web frontend UI and the existing admin. |
||||||
|
- Address feedback from users. |
||||||
- Better accessibility. |
- Better accessibility. |
||||||
- Better mobile experience. |
- Better mobile experience. |
||||||
|
- Standardize styling across the project by using a single design language and style guide. |
||||||
|
- Allows more people to contribute to the project if we use popular frameworks. |
||||||
|
|
||||||
|
## What |
||||||
|
|
||||||
|
- [Next.js](https://nextjs.org/) |
||||||
|
- [React](https://reactjs.org/) |
||||||
|
- [Ant Design](https://ant.design/) |
||||||
|
|
||||||
## How? |
## 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. |
This rewrite 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. |
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? |
## 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. |
The admin has always been a Next+React+Ant project, so the goal is to touch that as little as possible except where needed to share code and styles. |
||||||
|
|
||||||
|
## What is this page? |
||||||
|
|
||||||
|
This is called [_Storybook_](https://storybook.js.org/docs/react/get-started/introduction). |
||||||
|
Storybook is a tool for UI development. It makes development faster and easier by isolating components. |
||||||
|
This allows you to work on one component at a time. You can develop entire UIs without needing to start |
||||||
|
up a complex dev stack, force certain data into your database, or navigate around your application. |
||||||
|
|
||||||
|
For example a button may have a disabled state that requires a specific scenario to take place in real-world use, |
||||||
|
but here we you can just toggle the state to verify things are working as expected. |
||||||
|
|
||||||
|
This means [new components should have a corresponding story added](https://storybook.js.org/docs/react/get-started/whats-a-story) to make it easier to maintain the project. |
||||||
|
|
||||||
|
|
||||||
|
## Contributing |
||||||
|
|
||||||
--- |
This is a standard React project so it makes it easy for **anybody to help!** |
||||||
|
|
||||||
More documentation about things should go here. |
|
||||||
Loading…
Reference in new issue