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

style cleanup + tweaks

Browse Source 
Title <> Subtitle relationships
Animat ein
This commit is contained in:
cv
2021-04-26 13:38:30 +02:00
parent 9f0f9752ae
commit 004b31b5e7
19 changed files with 404 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/features/viewers/PreviewContainer.jsx
+8 -1
View File
@@ -21,7 +21,14 @@ export default function PreviewContainer() {
<div className={styles.previewItem}>
<IFrameLoader title='Audience' src={`${serverURL}/public`} />
<div className={styles.label}>Audience</div>
<a
href={`${serverURL}/public`}
target='_blank'
rel='noreferrer'
className={styles.label}
>
Audience
</a>
</div>
<div className={styles.previewItem}>
client/src/features/viewers/backstage/StageManager.jsx
+59 -16
View File
@@ -4,6 +4,8 @@ import style from './StageManager.module.css';
import Paginator from '../../../common/components/views/Paginator';
import NavLogo from '../../../common/components/nav/NavLogo';
import { useEffect, useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import TitleSide from '../../../common/components/views/TitleSide';
export default function StageManager(props) {
const { publ, title, time, backstageEvents, selectedId, general } = props;
@@ -39,28 +41,69 @@ export default function StageManager(props) {
? formatDisplay(time.currentSeconds, true)
: '';
// motion
const titleVariants = {
hidden: {
x: -1500,
},
visible: {
x: 0,
transition: {
duration: 1,
},
},
exit: {
x: -1500,
},
};
return (
<div className={style.container__gray}>
<NavLogo />
<div className={style.eventTitle}>{general.title}</div>
{title.showNow && (
<div className={style.nowContainer}>
<div className={style.label}>Now</div>
<div className={style.nowTitle}>{title.titleNow}</div>
<div className={style.nowSubtitle}>{title.subtitleNow}</div>
<div className={style.nowPresenter}>{title.presenterNow}</div>
</div>
)}
{title.showNext && (
<div className={style.nextContainer}>
<div className={style.label}>Next</div>
<div className={style.nextTitle}>{title.titleNext}</div>
<div className={style.nextSubtitle}>{title.subtitleNext}</div>
<div className={style.nextPresenter}>{title.presenterNext}</div>
</div>
)}
<AnimatePresence>
{title.showNow && (
<motion.div
className={style.nowContainer}
key='now'
variants={titleVariants}
initial='hidden'
animate='visible'
exit='exit'
>
<TitleSide
label='Now'
type='now'
title={title.titleNow}
subtitle={title.subtitleNow}
presenter={title.presenterNow}
/>
</motion.div>
)}
</AnimatePresence>
<AnimatePresence>
{title.showNext && (
<motion.div
className={style.nextContainer}
key='next'
variants={titleVariants}
initial='hidden'
animate='visible'
exit='exit'
>
<TitleSide
label='Next'
type='next'
title={title.titleNext}
subtitle={title.subtitleNext}
presenter={title.presenterNext}
/>
</motion.div>
)}
</AnimatePresence>
<div className={style.todayContainer}>
<div className={style.label}>Today</div>
client/src/features/viewers/backstage/StageManager.module.css
-41
View File
@@ -113,47 +113,6 @@
border-radius: 0 2vw 2vw 0;
}
.nowTitle,
.nextTitle {
color: #ddd;
font-weight: 400;
}
.nowSubtitle,
.nowPresenter,
.nextSubtitle,
.nextPresenter {
color: #aaa;
}
.nowTitle {
font-size: 2.5vw;
}
.nowSubtitle,
.nowPresenter {
font-size: 2vw;
}
.nextTitle {
font-size: 2vw;
}
.nextSubtitle,
.nextPresenter {
color: #aaa;
font-size: 1.5vw;
}
.nowTitle:after,
.nowSubtitle:after,
.nowPresenter:after,
.nextTitle:after,
.nextSubtitle:after,
.nextPresenter:after {
content: '\200b';
}
/* =================== SCHEDULE ===================*/
.todayContainer {
client/src/features/viewers/foh/Public.jsx
+59 -16
View File
@@ -2,6 +2,8 @@ import QRCode from 'react-qr-code';
import style from './Public.module.css';
import Paginator from '../../../common/components/views/Paginator';
import NavLogo from '../../../common/components/nav/NavLogo';
import { AnimatePresence, motion } from 'framer-motion';
import TitleSide from '../../../common/components/views/TitleSide';
export default function StageManager(props) {
const { publ, title, time, events, selectedId, general } = props;
@@ -9,28 +11,69 @@ export default function StageManager(props) {
// Format messages
const showPubl = publ.text !== '' && publ.visible;
// motion
const titleVariants = {
hidden: {
x: -1500,
},
visible: {
x: 0,
transition: {
duration: 1,
},
},
exit: {
x: -1500,
},
};
return (
<div className={style.container__gray}>
<NavLogo />
<div className={style.eventTitle}>{general.title}</div>
{title.showNow && (
<div className={style.nowContainer}>
<div className={style.label}>Now</div>
<div className={style.nowTitle}>{title.titleNow}</div>
<div className={style.nowSubtitle}>{title.subtitleNow}</div>
<div className={style.nowPresenter}>{title.presenterNow}</div>
</div>
)}
{title.showNext && (
<div className={style.nextContainer}>
<div className={style.label}>Next</div>
<div className={style.nextTitle}>{title.titleNext}</div>
<div className={style.nextSubtitle}>{title.subtitleNext}</div>
<div className={style.nextPresenter}>{title.presenterNext}</div>
</div>
)}
<AnimatePresence>
{title.showNow && (
<motion.div
className={style.nowContainer}
key='now'
variants={titleVariants}
initial='hidden'
animate='visible'
exit='exit'
>
<TitleSide
label='Now'
type='now'
title={title.titleNow}
subtitle={title.subtitleNow}
presenter={title.presenterNow}
/>
</motion.div>
)}
</AnimatePresence>
<AnimatePresence>
{title.showNext && (
<motion.div
className={style.nextContainer}
key='next'
variants={titleVariants}
initial='hidden'
animate='visible'
exit='exit'
>
<TitleSide
label='Next'
type='next'
title={title.titleNext}
subtitle={title.subtitleNext}
presenter={title.presenterNext}
/>
</motion.div>
)}
</AnimatePresence>
<div className={style.todayContainer}>
<div className={style.label}>Today</div>
client/src/features/viewers/foh/Public.module.css
-41
View File
@@ -112,47 +112,6 @@
border-radius: 0 2vw 2vw 0;
}
.nowTitle,
.nextTitle {
color: #ddd;
font-weight: 400;
}
.nowSubtitle,
.nowPresenter,
.nextSubtitle,
.nextPresenter {
color: #aaa;
}
.nowTitle {
font-size: 2.5vw;
}
.nowSubtitle,
.nowPresenter {
font-size: 2vw;
}
.nextTitle {
font-size: 2vw;
}
.nextSubtitle,
.nextPresenter {
color: #aaa;
font-size: 1.5vw;
}
.nowTitle:after,
.nowSubtitle:after,
.nowPresenter:after,
.nextTitle:after,
.nextSubtitle:after,
.nextPresenter:after {
content: '\200b';
}
/* =================== SCHEDULE ===================*/
.todayContainer {
client/src/features/viewers/presenter/PresenterView.jsx
+56 -16
View File
@@ -1,6 +1,8 @@
import { AnimatePresence, motion } from 'framer-motion';
import Countdown from '../../../common/components/countdown/Countdown';
import MyProgressBar from '../../../common/components/myProgressBar/MyProgressBar';
import NavLogo from '../../../common/components/nav/NavLogo';
import TitleCard from '../../../common/components/views/TitleCard';
import style from './PresenterView.module.css';
export default function PresenterView(props) {
@@ -9,6 +11,22 @@ export default function PresenterView(props) {
const showOverlay = pres.text !== '' && pres.visible;
const isPlaying = time.playstate === 'start';
// motion
const titleVariants = {
hidden: {
y: 500,
},
visible: {
y: 0,
transition: {
duration: 1,
},
},
exit: {
y: 500,
},
};
return (
<div
className={
@@ -54,23 +72,45 @@ export default function PresenterView(props) {
</div>
)}
{title.showNow && (
<div className={style.nowContainer}>
<div className={style.label}>Now</div>
<div className={style.title}>{title.titleNow}</div>
<div className={style.subtitle}>{title.subtitleNow}</div>
<div className={style.presenter}>{title.presenterNow}</div>
</div>
)}
<AnimatePresence>
{title.showNow && (
<motion.div
className={style.nowContainer}
key='now'
variants={titleVariants}
initial='hidden'
animate='visible'
exit='exit'
>
<TitleCard
label='Now'
title={title.titleNow}
subtitle={title.subtitleNow}
presenter={title.presenterNow}
/>
</motion.div>
)}
</AnimatePresence>
{title.showNext && (
<div className={style.nextContainer}>
<div className={style.label}>Next</div>
<div className={style.title}>{title.titleNext}</div>
<div className={style.subtitle}>{title.subtitleNext}</div>
<div className={style.presenter}>{title.presenterNext}</div>
</div>
)}
<AnimatePresence>
{title.showNext && (
<motion.div
className={style.nextContainer}
key='next'
variants={titleVariants}
initial='hidden'
animate='visible'
exit='exit'
>
<TitleCard
label='Next'
title={title.titleNext}
subtitle={title.subtitleNext}
presenter={title.presenterNext}
/>
</motion.div>
)}
</AnimatePresence>
</div>
);
}
client/src/features/viewers/presenter/PresenterView.module.css
+2 -26
View File
@@ -57,32 +57,6 @@
grid-area: next;
}
.title,
.subtitle,
.presenter {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.title {
color: #ddd;
font-size: 2.5vw;
flex: 1;
}
.subtitle,
.presenter {
color: #aaa;
font-size: 2vw;
}
.title:after,
.presenter:after,
.subtitle:after {
content: '\200b';
}
/* =================== MAIN ===================*/
.timerContainer,
@@ -111,11 +85,13 @@
width: 80%;
margin: 0 auto;
opacity: 1;
transition: 0.5s;
}
.countdownPaused,
.progressContainerPaused {
opacity: 0.6;
transition: 0.5s;
}
.container__grayFinished {