Skip to content
Snippets Groups Projects
Commit 164f6615 authored by Albin Henriksson's avatar Albin Henriksson
Browse files

Scale slide and time left text

parent 41d0b8e1
No related branches found
No related tags found
1 merge request!146Scale slide and time left text
Pipeline #45620 passed with warnings
......@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from '../../../hooks'
import PresentationComponent from '../../views/components/PresentationComponent'
import Timer from '../../views/components/Timer'
import RndComponent from './RndComponent'
import { Center, SlideEditorContainer, SlideEditorContainerRatio, SlideEditorPaper } from './styled'
import { Center, SlideDisplayText, SlideEditorContainer, SlideEditorContainerRatio, SlideEditorPaper } from './styled'
type SlideDisplayProps = {
//Prop to distinguish between editor and active competition
......@@ -59,13 +59,13 @@ const SlideDisplay = ({ variant, activeViewTypeId, currentSlideId }: SlideDispla
<SlideEditorContainer>
<SlideEditorContainerRatio>
<SlideEditorPaper ref={editorPaperRef}>
<Typography variant="h3" style={{ position: 'absolute', left: 5, top: 5 }}>
{variant === 'editor' && `Tid kvar: ${slide?.timer}`}
<SlideDisplayText scale={scale}>
{variant === 'editor' && slide?.timer ? `Tid kvar: ${slide?.timer}` : ''}
{variant === 'presentation' && <Timer />}
</Typography>
<Typography variant="h3" style={{ position: 'absolute', right: 5, top: 5 }}>
</SlideDisplayText>
<SlideDisplayText scale={scale} right>
{slide && `Sida: ${slide?.order + 1} / ${totalSlides}`}
</Typography>
</SlideDisplayText>
{(competitionBackgroundImage || slideBackgroundImage) && (
<img
src={`/static/images/${
......
......@@ -145,3 +145,16 @@ export const QuestionComponent = styled.div`
export const SettingsItemContainer = styled.div`
padding: 5px;
`
interface SlideDisplayTextProps {
scale: number
right?: boolean
}
export const SlideDisplayText = styled(Typography)<SlideDisplayTextProps>`
position: absolute;
top: 5px;
left: ${(props) => (props.right ? undefined : 5)}px;
right: ${(props) => (props.right ? 5 : undefined)}px;
font-size: ${(props) => 24 * props.scale}px;
`
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment