Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

rework stream info box in offline notice to conform more with the overall design (#196)

Browse Source 
* rework stream info field to conform with the offline page layout

* moved offline notice css to separate file

* used ant design bold text option
This commit is contained in:
Thilo Billerbeck 2021-05-28 00:58:31 +02:00 committed by GitHub
parent bbb0e2d5a1
commit 51b3fc1f76
4 changed files with 41 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/pages/_app.tsx
View File

@ -18,6 +18,7 @@ import '../styles/config-public-details.scss';
import '../styles/home.scss';
import '../styles/chat.scss';
import '../styles/pages.scss';
import '../styles/offline-notice.scss';
import { AppProps } from 'next/app';
import ServerStatusProvider from '../utils/server-status-context';

35
web/pages/offline-notice.tsx
View File

@ -43,27 +43,20 @@ export default function Offline({ logs = [], config }) {
Learn how to point your existing software to your new server and start streaming your
content.
</a>
<Row align="middle">
<Col flex="none">
<Text>Streaming URL:</Text>
</Col>
<Col flex="auto">
<Paragraph className="stream-info-box" copyable>
{generateStreamURL(instanceUrl, rtmpServerPort)}
</Paragraph>
</Col>
</Row>
<Row align="middle">
<Col flex="none">
<Text>Stream Key:</Text>
</Col>
<Col flex="auto">
<Paragraph className="stream-info-box" copyable={{ text: streamKey }}>
*********************
</Paragraph>
</Col>
</Row>
<div className="stream-info-container">
<Text strong className="stream-info-label">
Streaming URL:
</Text>
<Paragraph className="stream-info-box" copyable>
{generateStreamURL(instanceUrl, rtmpServerPort)}
</Paragraph>
<Text strong className="stream-info-label">
Stream Key:
</Text>
<Paragraph className="stream-info-box" copyable={{ text: streamKey }}>
*********************
</Paragraph>
</div>
</div>
),
},

13
web/styles/globals.scss
View File

@ -99,19 +99,6 @@ strong {
}
}
.stream-info-box {
font-size: 0.8em;
background-color: var(--purple-dark);
padding: 0.25rem 0.5rem;
margin-left: 0.5rem;
color: var(--white);
margin-bottom: 0px !important;
.ant-typography-copy {
font-size: 0.92em;
}
}
input {
&:not(:focus) {
&:invalid {

26
web/styles/offline-notice.scss Normal file
View File

@ -0,0 +1,26 @@
.stream-info-box {
background-color: var(--purple-dark);
color: var(--white);
padding: 0.25rem 0.5rem;
.ant-typography-copy {
margin-left: 0.25rem;
}
margin: 0 !important;
}
.stream-info-label {
align-self: center;
text-align: right;
margin: 0;
}
.stream-info-container {
margin: 8px 0 4px 0;
display: grid;
grid-template-columns: max-content 1fr;
grid-template-rows: min-content min-content;
gap: 8px 8px;
grid-template-areas:
'. .'
'. .';
}