From 164f6615c92cdb9b6ba47cd533b98d1c63a3684c Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Mon, 17 May 2021 15:57:42 +0200
Subject: [PATCH] Scale slide and time left text
---
.../presentationEditor/components/SlideDisplay.tsx | 12 ++++++------
.../pages/presentationEditor/components/styled.tsx | 13 +++++++++++++
2 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/client/src/pages/presentationEditor/components/SlideDisplay.tsx b/client/src/pages/presentationEditor/components/SlideDisplay.tsx
index 8326bf86..da5bb92f 100644
--- a/client/src/pages/presentationEditor/components/SlideDisplay.tsx
+++ b/client/src/pages/presentationEditor/components/SlideDisplay.tsx
@@ -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/${
diff --git a/client/src/pages/presentationEditor/components/styled.tsx b/client/src/pages/presentationEditor/components/styled.tsx
index c214a7ce..e46fc8b9 100644
--- a/client/src/pages/presentationEditor/components/styled.tsx
+++ b/client/src/pages/presentationEditor/components/styled.tsx
@@ -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;
+`
--
GitLab