golang/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2025-11-02 03:54:54 +08: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
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/home.scss';
import '../styles/chat.scss'; import '../styles/chat.scss';
import '../styles/pages.scss'; import '../styles/pages.scss';
import '../styles/offline-notice.scss';
import { AppProps } from 'next/app'; import { AppProps } from 'next/app';
import ServerStatusProvider from '../utils/server-status-context'; 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 Learn how to point your existing software to your new server and start streaming your
content. content.
</a> </a>
<Row align="middle"> <div className="stream-info-container">
<Col flex="none"> <Text strong className="stream-info-label">
<Text>Streaming URL:</Text> Streaming URL:
</Col> </Text>
<Col flex="auto"> <Paragraph className="stream-info-box" copyable>
<Paragraph className="stream-info-box" copyable> {generateStreamURL(instanceUrl, rtmpServerPort)}
{generateStreamURL(instanceUrl, rtmpServerPort)} </Paragraph>
</Paragraph> <Text strong className="stream-info-label">
</Col> Stream Key:
</Row> </Text>
<Paragraph className="stream-info-box" copyable={{ text: streamKey }}>
<Row align="middle"> *********************
<Col flex="none"> </Paragraph>
<Text>Stream Key:</Text> </div>
</Col>
<Col flex="auto">
<Paragraph className="stream-info-box" copyable={{ text: streamKey }}>
*********************
</Paragraph>
</Col>
</Row>
</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 { input {
&:not(:focus) { &:not(:focus) {
&:invalid { &: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:
'. .'
'. .';
}