From ae19600d8905bda20b8d42ab1c694e3e4e80467e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20L=C3=B6fgren?= <viclo211@student.liu.se>
Date: Mon, 17 May 2021 20:55:10 +0000
Subject: [PATCH] Resolve "Styling"
---
client/src/pages/views/OperatorViewPage.tsx | 89 ++++++++++-----------
client/src/pages/views/TeamViewPage.tsx | 3 +-
client/src/pages/views/styled.tsx | 33 +++++---
3 files changed, 65 insertions(+), 60 deletions(-)
diff --git a/client/src/pages/views/OperatorViewPage.tsx b/client/src/pages/views/OperatorViewPage.tsx
index d99def17..a3bd2efd 100644
--- a/client/src/pages/views/OperatorViewPage.tsx
+++ b/client/src/pages/views/OperatorViewPage.tsx
@@ -16,9 +16,9 @@ import {
Typography,
} from '@material-ui/core'
import AssignmentIcon from '@material-ui/icons/Assignment'
-import BackspaceIcon from '@material-ui/icons/Backspace'
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
import ChevronRightIcon from '@material-ui/icons/ChevronRight'
+import CloseIcon from '@material-ui/icons/Close'
import FileCopyIcon from '@material-ui/icons/FileCopy'
import LinkIcon from '@material-ui/icons/Link'
import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount'
@@ -41,7 +41,7 @@ import {
OperatorHeader,
OperatorHeaderItem,
OperatorInnerContent,
- ToolBarContainer,
+ OperatorQuitButton,
} from './styled'
/**
@@ -246,11 +246,11 @@ const OperatorViewPage: React.FC = () => {
</Button>
</DialogActions>
</Dialog>
- <OperatorHeader>
+ <OperatorHeader color="primary" position="fixed">
<Tooltip title="Avsluta tävling" arrow>
- <OperatorButton onClick={handleVerifyExit} variant="contained" color="secondary">
- <BackspaceIcon fontSize="large" />
- </OperatorButton>
+ <OperatorQuitButton onClick={handleVerifyExit} variant="contained" color="secondary">
+ <CloseIcon fontSize="large" />
+ </OperatorQuitButton>
</Tooltip>
<Dialog open={openAlert} onClose={handleClose} aria-labelledby="responsive-dialog-title">
@@ -270,61 +270,60 @@ const OperatorViewPage: React.FC = () => {
</DialogActions>
</Dialog>
<OperatorHeaderItem>
- <Typography variant="h3">{presentation.competition.name}</Typography>
+ <Typography variant="h4">{presentation.competition.name}</Typography>
</OperatorHeaderItem>
<OperatorHeaderItem>
- <Typography variant="h3">
+ <Typography variant="h4">
{activeSlideOrder !== undefined && activeSlideOrder + 1} / {presentation.competition.slides.length}
</Typography>
</OperatorHeaderItem>
</OperatorHeader>
- <div style={{ height: 0, paddingTop: 120 }} />
+ {<div style={{ minHeight: 64 }} />}
<OperatorContent>
<OperatorInnerContent>
{activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}
</OperatorInnerContent>
</OperatorContent>
- <div style={{ height: 0, paddingTop: 140 }} />
- <OperatorFooter>
- <ToolBarContainer>
- <Tooltip title="Föregående sida" arrow>
- <OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide}>
- <ChevronLeftIcon fontSize="large" />
- </OperatorButton>
- </Tooltip>
-
- {slideTimer && (
- <Tooltip title="Starta timer" arrow>
- <OperatorButton
- onClick={handleStartTimer}
- variant="contained"
- disabled={timer.value !== null && !timer.enabled}
- >
- <TimerIcon fontSize="large" />
- <Timer disableText />
- </OperatorButton>
- </Tooltip>
- )}
+ {<div style={{ minHeight: 128 }} />}
+ <OperatorFooter position="fixed">
+ <Tooltip title="Föregående sida" arrow>
+ <OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide} color="primary">
+ <ChevronLeftIcon fontSize="large" />
+ </OperatorButton>
+ </Tooltip>
- <Tooltip title="Visa ställning för publik" arrow>
- <OperatorButton onClick={() => socketSync({ show_scoreboard: true })} variant="contained">
- <AssignmentIcon fontSize="large" />
+ {slideTimer !== null && (
+ <Tooltip title="Starta timer" arrow>
+ <OperatorButton
+ onClick={handleStartTimer}
+ variant="contained"
+ disabled={timer.value !== null && !timer.enabled}
+ color="primary"
+ >
+ <TimerIcon fontSize="large" />
+ <Timer disableText />
</OperatorButton>
</Tooltip>
- {showScoreboard && <Scoreboard isOperator />}
+ )}
- <Tooltip title="Visa koder" arrow>
- <OperatorButton onClick={handleOpenCodes} variant="contained">
- <SupervisorAccountIcon fontSize="large" />
- </OperatorButton>
- </Tooltip>
+ <Tooltip title="Visa ställning för publik" arrow>
+ <OperatorButton onClick={() => socketSync({ show_scoreboard: true })} variant="contained" color="primary">
+ <AssignmentIcon fontSize="large" />
+ </OperatorButton>
+ </Tooltip>
+ {showScoreboard && <Scoreboard isOperator />}
- <Tooltip title="Nästa sida" arrow>
- <OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide}>
- <ChevronRightIcon fontSize="large" />
- </OperatorButton>
- </Tooltip>
- </ToolBarContainer>
+ <Tooltip title="Visa koder" arrow>
+ <OperatorButton onClick={handleOpenCodes} variant="contained" color="primary">
+ <SupervisorAccountIcon fontSize="large" />
+ </OperatorButton>
+ </Tooltip>
+
+ <Tooltip title="Nästa sida" arrow>
+ <OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide} color="primary">
+ <ChevronRightIcon fontSize="large" />
+ </OperatorButton>
+ </Tooltip>
</OperatorFooter>
<Snackbar
diff --git a/client/src/pages/views/TeamViewPage.tsx b/client/src/pages/views/TeamViewPage.tsx
index eb9cb5e6..540bc33c 100644
--- a/client/src/pages/views/TeamViewPage.tsx
+++ b/client/src/pages/views/TeamViewPage.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'
import { useAppSelector } from '../../hooks'
import { socketConnect } from '../../sockets'
import SlideDisplay from '../presentationEditor/components/SlideDisplay'
-import { OperatorContainer, OperatorHeader, PresentationBackground, PresentationContainer } from './styled'
+import { OperatorContainer, PresentationBackground, PresentationContainer } from './styled'
const TeamViewPage: React.FC = () => {
const code = useAppSelector((state) => state.presentation.code)
@@ -28,7 +28,6 @@ const TeamViewPage: React.FC = () => {
}, [])
return (
<OperatorContainer>
- <OperatorHeader></OperatorHeader>
<PresentationBackground>
<PresentationContainer>
{activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}
diff --git a/client/src/pages/views/styled.tsx b/client/src/pages/views/styled.tsx
index 3fe60445..9a2dfada 100644
--- a/client/src/pages/views/styled.tsx
+++ b/client/src/pages/views/styled.tsx
@@ -35,35 +35,42 @@ export const ViewSelectButtonGroup = styled.div`
margin-right: auto;
`
-export const OperatorHeader = styled.div`
+export const OperatorHeader = styled(AppBar)`
display: flex;
+ flex-direction: row;
justify-content: space-between;
- height: 120px;
+ align-items: center;
+ height: 64px;
width: 100%;
- position: absolute;
`
-export const OperatorFooter = styled.div`
+export const OperatorFooter = styled(AppBar)`
+ background: white;
display: flex;
- justify-content: space-between;
- height: 140px;
- position: absolute;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ height: 128px;
+ top: auto;
bottom: 0;
width: 100%;
`
+export const OperatorQuitButton = styled(Button)`
+ height: 100%;
+ padding: 0;
+`
+
export const OperatorButton = styled(Button)`
- width: 100px;
- height: 100px;
+ min-width: 90px;
+ min-height: 90px;
margin-left: 16px;
margin-right: 16px;
- margin-top: 16px;
`
-export const OperatorHeaderItem = styled(Button)`
+export const OperatorHeaderItem = styled.div`
margin-left: 16px;
margin-right: 16px;
- margin-top: 16px;
`
export const OperatorContainer = styled.div`
@@ -140,7 +147,7 @@ export const OperatorInnerContent = styled.div`
width: 100%;
/* Makes sure width is not bigger than where a 16:9 display can fit
without overlapping with header and footer */
- max-width: calc(((100vh - 260px) / 9) * 16);
+ max-width: calc(((100vh - 192px) / 9) * 16);
`
export const PresentationContainer = styled.div`
--
GitLab