Skip to content

Commit

Permalink
style: fixes (#87)
Browse files Browse the repository at this point in the history
* style(TopControls): better mobile support

* style(Home): fix DSA-info indent

- remove <br />
- add max-width

* style: adjust icons and page layout of results PDF

* style: fix PDF style on Firefox Android + add Wrapper to Results

- add prop 'center' to Wrapper
- add Wrapper to Results with 'center: false' (max-width)
- fix question break in PDF via css (Firefox Android)

* style(Button): add cursor pointer

* style(Results): fix overflow-x on mobile (caused by score table)

* style(Footer): add max-width for style coherence

- remove useless and buggy padding-inline
- add max-width similar to Wrapper prop
- add 'marginX: auto' to center it

* style(Wrapper): remove duplicate margin

* fix: resolve merge conflicts
  • Loading branch information
lorenzocorallo committed Apr 28, 2023
1 parent 70d87b1 commit c8c4ddf
Show file tree
Hide file tree
Showing 14 changed files with 205 additions and 163 deletions.
17 changes: 9 additions & 8 deletions src/components/ExtendCorrection/ExtendedCorrection.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,29 @@
}

@media print {
@page {
size: A4;
margin: 20mm !important;
}
html,
body {
height: initial !important;
overflow: initial !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}

@media print {
}
.page-break {
margin-top: 1rem;
display: block;
page-break-before: always;
page-break-before: always !important;
}
.print-only {
display: block;
}
.print-only li {
page-break-inside: avoid;
}
div {
break-inside: avoid;
}
Expand All @@ -34,7 +39,3 @@
}
}

@page {
size: auto;
margin: 20mm !important;
}
10 changes: 5 additions & 5 deletions src/components/ExtendCorrection/ExtendedCorrection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,10 @@ const styles = StyleSheet.create({
padding: '15px',
gap: '10px'
},
doc: {},
printDoc: {
maxWidth: '210mm',
margin: '0 auto'
},
printButton: {
display: 'inline-flex',
alignItems: 'center',
Expand All @@ -41,9 +44,6 @@ const styles = StyleSheet.create({
centered: {
textAlign: 'center'
},
li: {
margin: '10px'
},
ul: {
listStyleType: 'none'
},
Expand Down Expand Up @@ -151,7 +151,7 @@ const PrintDocument = forwardRef<HTMLDivElement, ExtendedCorrectionProps>(
)

return (
<div className="print-only" ref={ref} style={styles.doc}>
<div className="print-only" ref={ref} style={styles.printDoc}>
<div style={docStyles.firstPage}>
<DocumentHeader />
<p style={styles.centered}>
Expand Down
7 changes: 4 additions & 3 deletions src/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ const styles = StyleSheet.create({
container: {
display: 'flex',
justifyContent: 'space-between',
paddingInline: '15em',
margin: '15px',
margin: '15px auto',
fontSize: '10pt',
color: theme.softBlack
color: theme.softBlack,
width: '100%',
maxWidth: 900
},
link: {
display: 'flex',
Expand Down
2 changes: 1 addition & 1 deletion src/components/QuestionsForm/QuestionsForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ export default function QuestionsForm(props: QuestionsFormProps) {
active={view == 'TOL-testing'}
answers={answers}
closeSection={closeSection}
exitTest={handleExitTest}
onExitTest={handleExitTest}
currentSection={currentSection}
questions={props.questions}
timer={timer}
Expand Down
3 changes: 2 additions & 1 deletion src/components/QuestionsForm/SectionRecap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ const styles = StyleSheet.create({
paddingTop: '10px',
paddingBottom: '20px',
alignItems: 'center',
flexDirection: 'column'
flexDirection: 'column',
textAlign: 'center'
}
})

Expand Down
13 changes: 2 additions & 11 deletions src/components/QuestionsForm/Timer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const styles = StyleSheet.create({
},
p: {
display: 'flex',
fontSize: '0.75em',
fontSize: '0.8em',
maxWidth: '12em',
textAlign: 'left',
wordWrap: 'normal'
Expand All @@ -56,16 +56,7 @@ export default function Timer(props: TimerProps) {
const { timer } = props

return (
<div
style={
mobile
? StyleSheet.compose(styles.container, {
alignSelf: 'flex-end',
marginBottom: '1em'
})
: styles.container
}
>
<div style={styles.container}>
<div
style={StyleSheet.compose(
styles.clockWrapper,
Expand Down
94 changes: 61 additions & 33 deletions src/components/QuestionsForm/TopControls.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ const styles = StyleSheet.create({
outerDiv: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
justifyContent: 'space-between',
gap: 10
},
innerDiv: {
display: 'flex',
Expand All @@ -21,68 +22,95 @@ const styles = StyleSheet.create({
gap: '15px',
fontSize: '11pt'
},
btnDiv: {
display: 'flex',
justifyContent: 'space-between',
flex: 1
},
exitBtn: {
background: '#d81e11',
border: '2px solid #d81e11',
fontSize: '9.5pt',
color: 'white',
borderRadius: 2,
cursor: 'pointer'
cursor: 'pointer',
fontFamily: ' Arial'
}
})

const mobileStyles = StyleSheet.create({
outerDiv: StyleSheet.compose(styles.outerDiv, {
flexDirection: 'column'
flexDirection: 'column',
marginBottom: '1em'
}),
innerDiv: StyleSheet.compose(styles.innerDiv, {
width: '100%',
justifyContent: 'space-between'
justifyContent: 'space-between',
alignItems: 'center'
})
})

interface TopControlsProps {
active: boolean
answers: AnswersData
closeSection: () => void
exitTest: () => void
onExitTest: () => void
currentSection: Section
timer: TimerResult
questions: QuestionsData
}

export default function TopControls(props: TopControlsProps) {
const { mobile } = useContext(MobileContext)
const { currentSection } = props
const { timer, active } = props

return (
<div style={mobile ? mobileStyles.outerDiv : styles.outerDiv}>
<div style={mobile ? mobileStyles.innerDiv : styles.innerDiv}>
<div>
<p>
Sezione: <b>{getSectionName(currentSection)}</b> <br />
Riposte:{' '}
{
props.answers[currentSection].filter((a) => !!a.letter).length
} / {props.questions[currentSection].length}
{mobile && <br />}
{props.active &&
` (${props.answers[currentSection].reduce(
(acc, curr) => acc + (curr.flagged ? 1 : 0),
0
)} da rivedere)`}
</p>
</div>
{props.active && (
<>
<Button label="Chiudi sezione" onClick={props.closeSection} />
<button style={styles.exitBtn} onClick={props.exitTest}>
Abbandona il test
</button>
</>
)}
return mobile ? (
<div style={mobileStyles.outerDiv}>
<div style={mobileStyles.innerDiv}>
<SectionInfo {...props} />
<Timer timer={timer} />
</div>
<Timer timer={props.timer} />

{active && (
<div style={mobileStyles.innerDiv}>
<Button label="Chiudi sezione" onClick={props.closeSection} />
<button style={styles.exitBtn} onClick={props.onExitTest}>
Abbandona il test
</button>
</div>
)}
</div>
) : (
<div style={styles.outerDiv}>
<SectionInfo {...props} />
{active && (
<div style={styles.btnDiv}>
<Button label="Chiudi sezione" onClick={props.closeSection} />
<button style={styles.exitBtn} onClick={props.onExitTest}>
Abbandona il test
</button>
</div>
)}
<Timer timer={timer} />
</div>
)
}

function SectionInfo(props: TopControlsProps) {
const { currentSection, answers, questions, active } = props
const { mobile } = useContext(MobileContext)
return (
<p>
Sezione: <b>{getSectionName(currentSection)}</b> <br />
Risposte: {
answers[currentSection].filter((a) => !!a.letter).length
} / {questions[currentSection].length}
{mobile && <br />}
{active &&
` (${props.answers[currentSection].reduce(
(acc, curr) => acc + (curr.flagged ? 1 : 0),
0
)} da rivedere)`}
</p>
)
}
3 changes: 2 additions & 1 deletion src/components/Util/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ const styles = StyleSheet.create({
display: 'flex',
fontFamily: ' Arial',
fontSize: '9.5pt',
alignItems: 'center'
alignItems: 'center',
cursor: 'pointer'
},
p: {
display: 'inline-block',
Expand Down
12 changes: 8 additions & 4 deletions src/components/Util/Question.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,22 @@ const styles = StyleSheet.create({
},
option: {
display: 'flex',
gap: 4,
margin: 4
gap: 8,
margin: '4px 0'
},
result: {
textDecoration: 'underline',
paddingTop: 4,
display: 'block'
},
icon: {
width: '10px',
height: '10px'
}
})

const TickSign = () => <>&#10003;</>
const CrossSign = () => <>&#10007;</>
const CrossSign = () => <>&#10005;</>

interface Props {
q: IQuestion
Expand Down Expand Up @@ -65,7 +69,7 @@ export default function Question({
const visibility = isCorrect || choice === letter ? 'visible' : 'hidden'
return (
<p key={letter} style={styles.option}>
<span style={{ visibility }}>
<span style={{ visibility, ...styles.icon }}>
{isCorrect ? <TickSign /> : <CrossSign />}
</span>
<span>{letter.toUpperCase()}. </span>
Expand Down
40 changes: 23 additions & 17 deletions src/components/Util/Wrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,33 @@
import { StyleSheet } from '../../utils/style'

const styles = StyleSheet.create({
wrapper: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
margin: '10px auto',
marginBlock: '16px',
maxWidth: 900,
textAlign: 'center'
},
h2: {
fontSize: '16pt'
}
})

interface Props extends React.HTMLAttributes<HTMLDivElement> {
title?: string
center?: boolean
}

export default function Wrapper({ children, style, title, ...props }: Props) {
export default function Wrapper({
children,
center = true,
style,
title,
...props
}: Props) {
const styles = StyleSheet.create({
wrapper: {
display: 'flex',
flexDirection: 'column',
alignItems: center ? 'center' : 'flex-start',
margin: '10px auto',
maxWidth: 900,
textAlign: center ? 'center' : 'initial',
...style
},
h2: {
fontSize: '16pt'
}
})
return (
<div style={{ ...styles.wrapper, ...style }} {...props}>
<div style={styles.wrapper} {...props}>
{title && <h2 style={styles.h2}>{title}</h2>}
{children}
</div>
Expand Down
5 changes: 4 additions & 1 deletion src/components/pages/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ const styles = StyleSheet.create({
display: 'flex',
fontSize: 14,
gap: 6
},
dsaInfo: {
maxWidth: '755px'
}
})

Expand Down Expand Up @@ -62,7 +65,7 @@ export default function Home({ viewState }: InfoStartProps) {
</label>
</div>
<Collapsible trigger={<></>} open={isDsa} transitionTime={150}>
<p>
<p style={styles.dsaInfo}>
<Trans i18n={i18n}>home.dsaInfo</Trans>
</p>
</Collapsible>
Expand Down
Loading

0 comments on commit c8c4ddf

Please sign in to comment.