cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-12 02:43:50 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

style improvements

Browse Source 
- added empty state to list
- styled scrollbars
- progressbar shows time elapsed
- timers are monospace
- prevent overflow in titles
This commit is contained in:
cv
2021-04-21 19:11:43 +02:00
parent 4e36e58a21
commit 57c6b11db1
26 changed files with 381 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.css
+1 -1
View File
@@ -8,4 +8,4 @@
overflow: hidden;
background-color: rgba(0, 0, 0, 0);
height: 100vh;
}
}
client/src/assets/images/empty.svg
+21
View File
@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" width="274" height="410" fill="none" viewBox="0 0 274 410">
<circle cx="137" cy="234" r="135.5" fill="#222" stroke="#303030" stroke-width="3"/>
<path fill="#282828" d="M49.33 230.835c0-18.343 3.531-34.692 10.595-49.048 7.064-14.355 17.204-25.464 30.42-33.325 13.33-7.861 28.768-11.792 46.313-11.792 24.951 0 45.288 7.633 61.011 22.9 15.837 15.267 24.666 36.003 26.489 62.207l.342 12.647c0 28.369-7.918 51.155-23.755 68.359-15.836 17.09-37.085 25.635-63.745 25.635-26.66 0-47.966-8.545-63.916-25.635-15.837-17.09-23.755-40.332-23.755-69.726v-2.222zm49.389 3.589c0 17.545 3.304 30.989 9.912 40.332 6.608 9.228 16.064 13.843 28.369 13.843 11.963 0 21.305-4.558 28.027-13.672 6.722-9.229 10.083-23.926 10.083-44.092 0-17.204-3.361-30.534-10.083-39.99-6.722-9.457-16.178-14.185-28.369-14.185-12.077 0-21.419 4.728-28.027 14.185-6.608 9.342-9.912 23.869-9.912 43.579z"/>
<mask id="a" width="176" height="193" x="49" y="136" maskUnits="userSpaceOnUse">
<path fill="#fff" d="M49.33 230.835c0-18.343 3.531-34.692 10.595-49.048 7.064-14.355 17.204-25.464 30.42-33.325 13.33-7.861 28.768-11.792 46.313-11.792 24.951 0 45.288 7.633 61.011 22.9 15.837 15.267 24.666 36.003 26.489 62.207l.342 12.647c0 28.369-7.918 51.155-23.755 68.359-15.836 17.09-37.085 25.635-63.745 25.635-26.66 0-47.966-8.545-63.916-25.635-15.837-17.09-23.755-40.332-23.755-69.726v-2.222zm49.389 3.589c0 17.545 3.304 30.989 9.912 40.332 6.608 9.228 16.064 13.843 28.369 13.843 11.963 0 21.305-4.558 28.027-13.672 6.722-9.229 10.083-23.926 10.083-44.092 0-17.204-3.361-30.534-10.083-39.99-6.722-9.457-16.178-14.185-28.369-14.185-12.077 0-21.419 4.728-28.027 14.185-6.608 9.342-9.912 23.869-9.912 43.579z"/>
</mask>
<g mask="url(#a)">
<path fill="url(#paint0_linear)" d="M14.258 58.326c-7.763-4.861-56.883 11.146-80.472 19.758-3.354 6.988-12.465 23.506-22.078 33.674-12.016 12.711 99.75 272.053 141.262 323.607C94.484 486.92 255.85 363.533 261.344 360.3c5.495-3.233-20.074-45.636-44.243-93.192-33.269-65.46-127.16-76.404-150.35-89.718-23.188-13.313-3.09-62.665-3.923-86.491-1.935-55.353-38.866-26.497-48.57-32.573z"/>
<path fill="url(#paint1_linear)" d="M8.366 59.976c-7.763-4.86-56.498 6.18-80.088 14.792-3.354 6.988-12.464 23.506-22.077 33.675-12.017 12.71 99.749 272.052 141.262 323.607 41.513 51.555 202.878-71.833 208.374-75.066 5.495-3.233-21.296-34.405-45.414-82.003-33.261-65.642-126.021-74.923-149.046-98.223-19.946-20.186 2.247-61.171 1.415-84.998C60.73 32.778 18.07 66.053 8.366 59.976z"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="93.619" x2="67.374" y1="63.131" y2="446.974" gradientUnits="userSpaceOnUse">
<stop stop-opacity=".74"/>
<stop offset="1" stop-color="#414141" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="88.111" x2="61.866" y1="59.815" y2="443.659" gradientUnits="userSpaceOnUse">
<stop stop-opacity=".74"/>
<stop offset="1" stop-color="#242424" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

client/src/common/components/buttons/SettingsIconBtn.jsx
+14
View File
@@ -0,0 +1,14 @@
import { IconButton } from '@chakra-ui/button';
import { FiSettings } from 'react-icons/fi';
export default function SettingsIconBtn(props) {
return (
<IconButton
size={props.size || 'xs'}
icon={<FiSettings />}
isRound
variant='outline'
onClick={props.clickHandler}
/>
);
}
client/src/common/components/myProgressBar/MyProgressBar.jsx
+5 -2
View File
@@ -2,8 +2,11 @@ import { clamp } from '../../../app/utils';
import styles from './MyProgressBar.module.css';
export default function MyProgressBar(props) {
const { now, complete } = props;
const percentComplete = clamp((now * 100) / complete - 1, 0, 100);
const { now, complete, showElapsed } = props;
const percentComplete = showElapsed
? clamp((100 - (now * 100) / complete - 1), 0, 100)
: clamp((now * 100) / complete - 1, 0, 100)
return (
<div className={styles.progress}>
client/src/common/input/EditableTimer.module.css
+2 -3
View File
@@ -13,7 +13,7 @@
}
.delayedEditable {
border: 1px solid #d69e2e88;
border: 1px solid #d69e2e55;
}
.delayValue {
@@ -22,6 +22,5 @@
padding: 0.3em 0;
text-align: center;
align-self: flex-start;
border: 1px solid #d69e2e88;
background-color: #d69e2e22;
background-color: #d69e2e55;
}
client/src/common/state/Empty.jsx
+12
View File
@@ -0,0 +1,12 @@
import { ReactComponent as Emptyimage } from '../../assets/images/empty.svg';
import style from './Empty.module.css';
export default function Empty(props) {
const { text } = props;
return (
<div className={style.emptyContainer}>
<Emptyimage className={style.empty} />
<span className={style.text}>{text}</span>
</div>
);
}
client/src/common/state/Empty.module.css
+16
View File
@@ -0,0 +1,16 @@
.emptyContainer {
text-align: center;
color: rgba(0, 0, 0, 0.17);
font-weight: 600;
font-size: 2em;
width: 100%;
}
.empty {
width: 100%;
margin: auto 0;
opacity: 0.3;
}
.text {
text-align: center;
}
client/src/features/control/MessageControl.jsx
+6 -6
View File
@@ -89,8 +89,8 @@ export default function MessageControl() {
placeholder='only the presenter screens see this'
className={style.inline}
>
<EditablePreview />
<EditableInput className={style.editable13} />
<EditablePreview className={style.padleft} />
<EditableInput className={style.padleft} />
</Editable>
<VisibleIconBtn
active={pres.visible}
@@ -109,8 +109,8 @@ export default function MessageControl() {
placeholder='public screens will render this'
className={style.inline}
>
<EditablePreview />
<EditableInput className={style.editable13} />
<EditablePreview className={style.padleft} />
<EditableInput className={style.padleft} />
</Editable>
<VisibleIconBtn
active={publ.visible}
@@ -129,8 +129,8 @@ export default function MessageControl() {
placeholder='visible in lower third screen'
className={style.inline}
>
<EditablePreview />
<EditableInput />
<EditablePreview className={style.padleft} />
<EditableInput className={style.padleft} />
</Editable>
<VisibleIconBtn
client/src/features/control/MessageControl.module.css
+4 -1
View File
@@ -27,8 +27,11 @@
}
.inline {
padding-left: 0.5em;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.padleft {
padding-left: 0.5em;
}
client/src/features/editors/Editor.jsx
+101 -122
View File
@@ -1,6 +1,4 @@
import { IconButton } from '@chakra-ui/button';
import { FiSettings } from 'react-icons/fi';
import { Grid, GridItem, Heading } from '@chakra-ui/layout';
import { Heading } from '@chakra-ui/layout';
import { Box } from '@chakra-ui/layout';
import NumberedText from '../../common/components/text/NumberedText';
import PlaybackControl from '../control/PlaybackControl';
@@ -10,6 +8,7 @@ import styles from './Editor.module.css';
import EventListWrapper from './list/EventListWrapper';
import { useDisclosure } from '@chakra-ui/hooks';
import SettingsModal from '../modals/SettingsModal';
import SettingsIconBtn from '../../common/components/buttons/SettingsIconBtn';
export default function Editor() {
const { isOpen, onOpen, onClose } = useDisclosure();
@@ -18,132 +17,112 @@ export default function Editor() {
<>
<SettingsModal isOpen={isOpen} onClose={onClose} />
<Grid
templateRows='1fr 1fr 1fr'
templateColumns='1fr 25vw 25vw 5vw'
gap={5}
className={styles.mainContainer}
>
<GridItem rowSpan={3}>
<Box className={styles.editor} borderRadius='0.5em'>
<Heading size='lg' style={{ paddingBottom: '0.25em' }}>
Event List
</Heading>
<NumberedText number={1} text={'Manage and select event to run'} />
<div className={styles.content}>
<EventListWrapper />
</div>
</Box>
</GridItem>
<div className={styles.mainContainer}>
<Box className={styles.editor}>
<Heading size='lg' style={{ paddingBottom: '0.25em' }}>
Event List
</Heading>
<NumberedText number={1} text={'Manage and select event to run'} />
<div className={styles.content}>
<EventListWrapper />
</div>
</Box>
<GridItem colStart={2} rowStart={2} rowSpan={2} colSpan={2}>
<Box className={styles.editor} borderRadius='0.5em' overflowX='auto'>
<Heading size='lg' style={{ paddingBottom: '0.25em' }}>
Preview Displays
</Heading>
<NumberedText number={4} text={'Realtime screen preview'} />
<div className={styles.content}>
<PreviewContainer />
</div>
</Box>
</GridItem>
<Box className={styles.preview} borderRadius='0.5em' overflowX='auto'>
<Heading size='lg' style={{ paddingBottom: '0.25em' }}>
Preview Displays
</Heading>
<NumberedText number={4} text={'Realtime screen preview'} />
<div className={styles.content}>
<PreviewContainer />
</div>
</Box>
<GridItem colStart={2} rowStart={1} rowSpan={1} colSpan={1}>
<Box className={styles.editor} borderRadius='0.5em'>
<Heading size='lg' style={{ paddingBottom: '0.25em' }}>
Display Messages
</Heading>
<NumberedText
number={2}
text={'Show realtime messages on separate screen types'}
/>
<div className={styles.content}>
<MessageControl />
</div>
</Box>
</GridItem>
<Box className={styles.messages}>
<Heading size='lg' style={{ paddingBottom: '0.25em' }}>
Display Messages
</Heading>
<NumberedText
number={2}
text={'Show realtime messages on separate screen types'}
/>
<div className={styles.content}>
<MessageControl />
</div>
</Box>
<GridItem colStart={3} rowStart={1}>
<Box className={styles.editor} borderRadius='0.5em'>
<Heading size='lg' style={{ paddingBottom: '0.25em' }}>
Time Control
</Heading>
<NumberedText number={3} text={'Control Timer'} />
<div className={styles.content}>
<PlaybackControl />
</div>
</Box>
</GridItem>
<Box className={styles.playback}>
<Heading size='lg' style={{ paddingBottom: '0.25em' }}>
Time Control
</Heading>
<NumberedText number={3} text={'Control Timer'} />
<div className={styles.content}>
<PlaybackControl />
</div>
</Box>
<GridItem colStart={4} rowSpan={3}>
<Box className={styles.editor} borderRadius='0.5em'>
<Box className={styles.settings}>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '2em',
paddingTop: '3em',
}}
>
<SettingsIconBtn size='md' clickHandler={onOpen} />
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '2em',
paddingTop: '3em',
width: 35,
height: 35,
backgroundColor: '#3b8cd8',
borderRadius: '50%',
}}
>
<IconButton
icon={<FiSettings />}
isRound
variant='outline'
onClick={onOpen}
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#3b8cd8',
borderRadius: '50%',
}}
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#3182ce',
borderRadius: '50%',
}}
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#2778c4',
borderRadius: '50%',
}}
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#1d6eba',
borderRadius: '50%',
}}
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#1364b0',
borderRadius: '50%',
}}
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#095aa6',
borderRadius: '50%',
}}
/>
</div>
</Box>
</GridItem>
</Grid>
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#3182ce',
borderRadius: '50%',
}}
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#2778c4',
borderRadius: '50%',
}}
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#1d6eba',
borderRadius: '50%',
}}
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#1364b0',
borderRadius: '50%',
}}
/>
<div
style={{
width: 35,
height: 35,
backgroundColor: '#095aa6',
borderRadius: '50%',
}}
/>
</div>
</Box>
</div>
</>
);
}
client/src/features/editors/Editor.module.css
+103 -2
View File
@@ -1,12 +1,71 @@
.mainContainer {
background: linear-gradient(90deg, #202020 0%, #121212 100%);
width: 100%;
height: 100%;
margin: auto;
height: 95vh;
color: #fffd;
padding: 2vh;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 25vw 25vw 5vw;
grid-template-areas:
'even mess play sett'
'even prev prev sett'
'even prev prev sett';
gap: 2vh;
}
.editor {
/* 2/3 window, hide previews */
@media (max-width: 1250px) and (min-height: 700px) {
.mainContainer {
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
'even play sett'
'even mess sett';
}
.preview {
visibility: hidden;
}
}
/* 1/3 window, show control only */
@media (max-width: 750px) and (min-height: 500px) {
.mainContainer {
grid-template-rows: auto 1fr;
grid-template-columns: 100%;
grid-template-areas:
'mess'
'play';
}
.editor,
.preview,
.settings {
visibility: hidden;
}
}
/* 1/3 corner window, playback only */
@media (max-width: 900px) and (max-height: 500px) {
.mainContainer {
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-template-areas: 'play';
}
.editor,
.messages,
.preview,
.settings {
visibility: hidden;
}
}
.mainContainer > div {
border-radius: 0.5em;
height: 100%;
margin-top: 1.5vh;
background-color: rgba(255, 255, 255, 0.13);
@@ -16,6 +75,26 @@
flex-direction: column;
}
.editor {
grid-area: even;
}
.preview {
grid-area: prev;
}
.messages {
grid-area: mess;
}
.playback {
grid-area: play;
}
.settings {
grid-area: sett;
}
.content {
padding-top: 1.5em;
}
@@ -32,3 +111,25 @@
display: flex;
justify-content: flex-end;
}
/* width */
::-webkit-scrollbar {
width: 0.5em;
}
/* Track */
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.01);
border-radius: 4px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 4px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.35);
}
client/src/features/editors/list/Block.module.css
+2 -5
View File
@@ -17,7 +17,6 @@
padding: 0.2em 1em;
box-sizing: border-box;
display: flex;
margin: auto;
gap: 1em;
}
@@ -68,10 +67,8 @@
background-color: rgba(255, 255, 255, 0.36);
background: linear-gradient(
180deg,
#4bffabcc 0%,
#227c52aa 09%,
#4bffab11 10%,
#4bffab11 89%,
#00000000 10%,
#4bffab10 89%,
#227c52aa 90%,
#4bffabcc 100%
);
client/src/features/editors/list/EventList.jsx
+8
View File
@@ -4,6 +4,8 @@ import BlockBlock from './BlockBlock';
import EventBlock from './EventBlock';
import { useEffect, useState } from 'react';
import { useSocket } from '../../../app/context/socketContext';
import Empty from '../../../common/state/Empty';
export default function EventList(props) {
const { events, eventsHandler } = props;
@@ -28,6 +30,12 @@ export default function EventList(props) {
};
}, [socket]);
if (events.length < 1) {
return (
<Empty text='No Events' />
);
}
console.log('EventList: events in event list', events);
let cumulativeDelay = 0;
let eventCount = -1;
client/src/features/editors/list/List.module.css
+7
View File
@@ -7,4 +7,11 @@
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 4px;
padding: 8px;
overflow-y: scroll;
height: 71vh;
}
.empty {
opacity: 0.3;
align-self: center;
}
client/src/features/menu/EventListMenu.jsx
+11 -8
View File
@@ -16,7 +16,12 @@ export default function EventListMenu(props) {
size: 'sm',
variant: 'outline',
colorScheme: 'whiteAlpha',
backgroundColor: '#ffffff05'
backgroundColor: '#ffffff05',
};
const menuStyle = {
color: 'initial',
backgroundColor: 'rgba(255,255,255,0.67)',
};
const addHandler = () => {
@@ -25,16 +30,14 @@ export default function EventListMenu(props) {
return (
<div className={style.headerButtons}>
<Menu>
<Menu className={style.menu}>
<ButtonGroup isAttached>
<Button {...buttonProps}>
Upload
</Button>
<Button {...buttonProps}>Upload</Button>
<MenuButton as={Button} {...buttonProps}>
<FiChevronDown />
</MenuButton>
</ButtonGroup>
<MenuList>
<MenuList style={menuStyle}>
<MenuItem>Upload Excel</MenuItem>
<MenuItem>Upload CSV</MenuItem>
</MenuList>
@@ -42,11 +45,11 @@ export default function EventListMenu(props) {
<Menu>
<ButtonGroup isAttached>
<Button {...buttonProps}>Save</Button>
<MenuButton as={Button} {...buttonProps} >
<MenuButton as={Button} {...buttonProps}>
<FiChevronDown />
</MenuButton>
</ButtonGroup>
<MenuList>
<MenuList style={menuStyle}>
<MenuItem>Download Excel</MenuItem>
<MenuItem>Download CSV</MenuItem>
</MenuList>
client/src/features/menu/EventListMenu.module.css
+6 -1
View File
@@ -3,4 +3,9 @@
gap: 0.5em;
align-content: center;
justify-content: flex-end;
}
}
.menu {
color: #000;
background-color: rgba(255, 255, 255, 0.67);
}
client/src/features/viewers/PreviewContainer.jsx
+4 -1
View File
@@ -20,7 +20,10 @@ export default function PreviewContainer() {
<div className={styles.label}>Stage Manager</div>
</div>
<div className={styles.previewItem}>
<IFrameLoader title='Lower third' src='http://localhost:3000/lower' />
<IFrameLoader
title='Lower third'
src='http://localhost:3000/lower?key=242424'
/>
<div className={styles.label}>Lower third</div>
</div>
</div>
client/src/features/viewers/ViewWrapper.jsx
+4 -1
View File
@@ -115,7 +115,10 @@ const withSocket = (Component) => {
// Filter events only to pass down
useEffect(() => {
if (eventsData == null) return;
const e = eventsData.filter((d) => d.type === 'event');
// filter just events with title
const e = eventsData.filter((d) => d.type === 'event' && d.title !== '');
setEvents(e);
}, [eventsData]);
client/src/features/viewers/backstage/Paginator.jsx
+11 -9
View File
@@ -5,7 +5,7 @@ import { useInterval } from '../../../app/hooks/useInterval';
export default function Paginator(props) {
const { events, selectedId } = props;
const LIMIT_PER_PAGE = 3;
const LIMIT_PER_PAGE = 7;
const SCROLL_TIME = 5000;
const SCROLL_PAST = false;
const [numEvents, setNumEvents] = useState(0);
@@ -49,14 +49,16 @@ export default function Paginator(props) {
return (
<>
<div className={style.nav}>
{[...Array(pages)].map((p, i) => (
<div
key={i}
className={i === selPage ? style.navItemSelected : style.navItem}
/>
))}
</div>
{pages > 1 && (
<div className={style.nav}>
{[...Array(pages)].map((p, i) => (
<div
key={i}
className={i === selPage ? style.navItemSelected : style.navItem}
/>
))}
</div>
)}
<div className={style.entries}>
{page.map((e) => {
client/src/features/viewers/backstage/Paginator.module.css
-1
View File
@@ -2,7 +2,6 @@
display: flex;
flex-direction: column;
gap: 1.5vh;
padding-top: 2vh;
}
.navItem,
client/src/features/viewers/backstage/StageManager.module.css
+15 -1
View File
@@ -41,6 +41,17 @@
/* =================== TITLES ===================*/
.infoContainer > div {
overflow:hidden;
}
.nextContainer > div,
.nowContainer > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nowContainer,
.nextContainer,
.todayContainer {
@@ -157,8 +168,10 @@
.entryStart,
.entryEnd {
font-size: 1.5vw;
min-width: 3.5vw;
}
.entryTitle {
align-self: center;
}
@@ -183,7 +196,7 @@
.entryNow {
font-size: 1.3vw;
color: #fff;
line-height: 7vh;
line-height: 4vh;
background-color: rgba(255, 255, 255, 0.09);
border-bottom: 0.5vh solid #ff7597aa;
margin-left: -0.5vw;
@@ -212,6 +225,7 @@
.infoMessages {
grid-area: binf;
font-size: 1.5vw;
line-height: 2vw;
white-space: pre-line;
}
client/src/features/viewers/backstage/TodayItem.jsx
+2 -2
View File
@@ -4,8 +4,8 @@ export default function TodayItem(props) {
const { selected, timeStart, timeEnd, title } = props;
// Format timers
const start = timeStart ? stringFromMillis(timeStart, false) : '';
const end = timeEnd ? stringFromMillis(timeEnd, false) : '';
const start = stringFromMillis(timeStart, false) || '';
const end = stringFromMillis(timeEnd, false) || '';
// select styling
let selectStyle = style.entryPast;
client/src/features/viewers/lower/Lower.module.css
+13 -2
View File
@@ -1,8 +1,12 @@
.lowerThird {
margin: 0;
box-sizing: border-box; /* reset */
overflow: hidden;
width: 100%; /* restrict the page width to viewport */
height: 100%;
color: #fffffa;
font-size: 4vh;
width: 100%;
height: 100%;
}
.lowerContainer {
@@ -36,6 +40,13 @@
position: relative;
}
.titleContainer,
.subtitleContainer {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.titleDecor,
.subDecor {
grid-area: decor;
client/src/features/viewers/presenter/PresenterView.jsx
+1
View File
@@ -41,6 +41,7 @@ export default function PresenterView(props) {
<MyProgressBar
now={time.currentSeconds}
complete={time.durationSeconds}
showElapsed
/>
</div>
)}
client/src/features/viewers/presenter/PresenterView.module.css
+12
View File
@@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
.container__gray,
.container__grayFinished {
margin: 0;
@@ -55,9 +57,18 @@
grid-area: next;
}
.title,
.subtitle,
.presenter {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.title {
color: #ddd;
font-size: 2.5vw;
flex: 1;
}
.subtitle,
@@ -147,6 +158,7 @@
}
.clock {
font-family: 'Open Sans', sans-serif;
font-size: 4vw;
letter-spacing: 0.4vw;
color: #ddd;
client/src/features/viewers/viewers.css
-41
View File
@@ -1,41 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
.presenter {
font-size: 1vh;
height: 100%;
color: #ffffff;
display: flex;
flex-direction: column;
padding-left: 4vh;
}
.presentationTitle {
font-size: 5vw;
text-align: left;
}
.presentationSub {
font-size: 3vw;
text-align: left;
}
.userMessage {
font-size: 10vw;
text-align: center;
}
.hidden {
display: none;
}
.extra {
width: 100%;
position: absolute;
bottom: 3vh;
left: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}