style: fixes (#87)

* 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
PoliNetworkOrg · Apr 28, 2023 · c8c4ddf · c8c4ddf
1 parent 70d87b1
commit c8c4ddf
Show file tree

Hide file tree

Showing 14 changed files with 205 additions and 163 deletions.
diff --git a/src/components/ExtendCorrection/ExtendedCorrection.css b/src/components/ExtendCorrection/ExtendedCorrection.css
@@ -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;
   }
@@ -34,7 +39,3 @@
   }
 }
 
-@page {
-  size: auto;
-  margin: 20mm !important;
-}
diff --git a/src/components/ExtendCorrection/ExtendedCorrection.tsx b/src/components/ExtendCorrection/ExtendedCorrection.tsx
@@ -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',
@@ -41,9 +44,6 @@ const styles = StyleSheet.create({
   centered: {
     textAlign: 'center'
   },
-  li: {
-    margin: '10px'
-  },
   ul: {
     listStyleType: 'none'
   },
@@ -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}>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -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',

diff --git a/src/components/QuestionsForm/QuestionsForm.tsx b/src/components/QuestionsForm/QuestionsForm.tsx
@@ -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}

diff --git a/src/components/QuestionsForm/SectionRecap.tsx b/src/components/QuestionsForm/SectionRecap.tsx
@@ -10,7 +10,8 @@ const styles = StyleSheet.create({
     paddingTop: '10px',
     paddingBottom: '20px',
     alignItems: 'center',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    textAlign: 'center'
   }
 })
 

diff --git a/src/components/QuestionsForm/Timer.tsx b/src/components/QuestionsForm/Timer.tsx
@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
   },
   p: {
     display: 'flex',
-    fontSize: '0.75em',
+    fontSize: '0.8em',
     maxWidth: '12em',
     textAlign: 'left',
     wordWrap: 'normal'
@@ -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,

diff --git a/src/components/QuestionsForm/TopControls.tsx b/src/components/QuestionsForm/TopControls.tsx
@@ -12,7 +12,8 @@ const styles = StyleSheet.create({
   outerDiv: {
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
+    gap: 10
   },
   innerDiv: {
     display: 'flex',
@@ -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>
   )
 }
diff --git a/src/components/Util/Button.tsx b/src/components/Util/Button.tsx
@@ -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',

diff --git a/src/components/Util/Question.tsx b/src/components/Util/Question.tsx
@@ -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
@@ -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>

diff --git a/src/components/Util/Wrapper.tsx b/src/components/Util/Wrapper.tsx
@@ -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>

diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
@@ -18,6 +18,9 @@ const styles = StyleSheet.create({
     display: 'flex',
     fontSize: 14,
     gap: 6
+  },
+  dsaInfo: {
+    maxWidth: '755px'
   }
 })
 
@@ -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>