From 0a9db5c9e58e816728e6d4aca4814396c18fdaa1 Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Mon, 17 May 2021 18:15:40 +0200
Subject: [PATCH] Improve styling
---
client/src/pages/views/OperatorViewPage.tsx | 86 ++++++++++-----------
client/src/pages/views/styled.tsx | 24 ++++--
2 files changed, 59 insertions(+), 51 deletions(-)
diff --git a/client/src/pages/views/OperatorViewPage.tsx b/client/src/pages/views/OperatorViewPage.tsx
index efd28001..488d2ee9 100644
--- a/client/src/pages/views/OperatorViewPage.tsx
+++ b/client/src/pages/views/OperatorViewPage.tsx
@@ -41,7 +41,7 @@ import {
OperatorHeader,
OperatorHeaderItem,
OperatorInnerContent,
- ToolBarContainer,
+ OperatorQuitButton,
} from './styled'
/**
@@ -246,11 +246,11 @@ const OperatorViewPage: React.FC = () => {
</Button>
</DialogActions>
</Dialog>
- <OperatorHeader color="primary" position="relative">
+ <OperatorHeader color="primary" position="fixed">
<Tooltip title="Avsluta tävling" arrow>
- <OperatorButton onClick={handleVerifyExit} variant="contained" color="secondary">
+ <OperatorQuitButton onClick={handleVerifyExit} variant="contained" color="secondary">
<BackspaceIcon fontSize="small" />
- </OperatorButton>
+ </OperatorQuitButton>
</Tooltip>
<Dialog open={openAlert} onClose={handleClose} aria-labelledby="responsive-dialog-title">
@@ -270,62 +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={{ minHeight: 64 }} /> */}
+ {<div style={{ minHeight: 64 }} />}
<OperatorContent>
<OperatorInnerContent>
{activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}
</OperatorInnerContent>
</OperatorContent>
- {/* <div style={{ minHeight: 96 }} /> */}
- <OperatorFooter color="primary" position="fixed">
- <ToolBarContainer>
- <Tooltip title="Föregående sida" arrow>
- <OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide} color="secondary">
- <ChevronLeftIcon fontSize="small" />
- </OperatorButton>
- </Tooltip>
-
- {slideTimer && (
- <Tooltip title="Starta timer" arrow>
- <OperatorButton
- onClick={handleStartTimer}
- variant="contained"
- disabled={timer.value !== null && !timer.enabled}
- color="secondary"
- >
- <TimerIcon fontSize="small" />
- <Timer disableText />
- </OperatorButton>
- </Tooltip>
- )}
+ {<div style={{ minHeight: 96 }} />}
+ <OperatorFooter position="fixed">
+ <Tooltip title="Föregående sida" arrow>
+ <OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide} color="primary">
+ <ChevronLeftIcon fontSize="small" />
+ </OperatorButton>
+ </Tooltip>
- <Tooltip title="Visa ställning för publik" arrow>
- <OperatorButton onClick={() => socketSync({ show_scoreboard: true })} variant="contained" color="secondary">
- <AssignmentIcon fontSize="small" />
+ {slideTimer !== null && (
+ <Tooltip title="Starta timer" arrow>
+ <OperatorButton
+ onClick={handleStartTimer}
+ variant="contained"
+ disabled={timer.value !== null && !timer.enabled}
+ color="primary"
+ >
+ <TimerIcon fontSize="small" />
+ <Timer disableText />
</OperatorButton>
</Tooltip>
- {showScoreboard && <Scoreboard isOperator />}
+ )}
- <Tooltip title="Visa koder" arrow>
- <OperatorButton onClick={handleOpenCodes} variant="contained" color="secondary">
- <SupervisorAccountIcon fontSize="small" />
- </OperatorButton>
- </Tooltip>
+ <Tooltip title="Visa ställning för publik" arrow>
+ <OperatorButton onClick={() => socketSync({ show_scoreboard: true })} variant="contained" color="primary">
+ <AssignmentIcon fontSize="small" />
+ </OperatorButton>
+ </Tooltip>
+ {showScoreboard && <Scoreboard isOperator />}
- <Tooltip title="Nästa sida" arrow>
- <OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide} color="secondary">
- <ChevronRightIcon fontSize="small" />
- </OperatorButton>
- </Tooltip>
- </ToolBarContainer>
+ <Tooltip title="Visa koder" arrow>
+ <OperatorButton onClick={handleOpenCodes} variant="contained" color="primary">
+ <SupervisorAccountIcon fontSize="small" />
+ </OperatorButton>
+ </Tooltip>
+
+ <Tooltip title="Nästa sida" arrow>
+ <OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide} color="primary">
+ <ChevronRightIcon fontSize="small" />
+ </OperatorButton>
+ </Tooltip>
</OperatorFooter>
<Snackbar
diff --git a/client/src/pages/views/styled.tsx b/client/src/pages/views/styled.tsx
index a80e3a8f..d02f3f9b 100644
--- a/client/src/pages/views/styled.tsx
+++ b/client/src/pages/views/styled.tsx
@@ -37,25 +37,36 @@ export const ViewSelectButtonGroup = styled.div`
export const OperatorHeader = styled(AppBar)`
display: flex;
+ flex-direction: row;
justify-content: space-between;
- align-content: center;
+ align-items: center;
height: 64px;
width: 100%;
`
export const OperatorFooter = styled(AppBar)`
+ background: white;
display: flex;
- justify-content: space-between;
- align-content: center;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
height: 96px;
top: auto;
bottom: 0;
width: 100%;
`
+export const OperatorQuitButton = styled(Button)`
+ min-width: 48px;
+ min-height: 48px;
+ padding-top: 16px;
+ padding-bottom: 16px;
+ margin-left: 8px;
+`
+
export const OperatorButton = styled(Button)`
- width: 64px;
- height: 64px;
+ min-width: 64px;
+ min-height: 64px;
margin-left: 16px;
margin-right: 16px;
`
@@ -63,7 +74,6 @@ export const OperatorButton = styled(Button)`
export const OperatorHeaderItem = styled.div`
margin-left: 16px;
margin-right: 16px;
- margin-top: 16px;
`
export const OperatorContainer = styled.div`
@@ -140,7 +150,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 - 160px) / 9) * 16);
`
export const PresentationContainer = styled.div`
--
GitLab