fix: Improve results pdf

UniversityOfHelsinkiCS · Mar 5, 2024 · b78aeff · b78aeff
1 parent 45d4175
commit b78aeff
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 7 deletions.
diff --git a/src/client/components/OpenFeedback/OpenFeedback.js b/src/client/components/OpenFeedback/OpenFeedback.js
@@ -3,6 +3,7 @@ import { Box, IconButton, Tooltip, Typography } from '@mui/material'
 import { grey } from '@mui/material/colors'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { boxPrintStyle } from '../../util/printStyle'
 
 const styles = {
   listItem: {
@@ -15,6 +16,7 @@ const styles = {
     width: '100%',
     alignItems: 'start',
     pageBreakAfter: 'auto',
+    ...boxPrintStyle,
   },
   hiddenListItem: theme => ({
     color: theme.palette.error.light,

diff --git a/src/client/pages/FeedbackTarget/tabs/Results/FeedbackResponse.js b/src/client/pages/FeedbackTarget/tabs/Results/FeedbackResponse.js
@@ -7,6 +7,7 @@ import feedbackTargetIsEnded from '../../../../util/feedbackTargetIsEnded'
 import { useFeedbackTargetContext } from '../../FeedbackTargetContext'
 import Markdown from '../../../../components/common/Markdown'
 import { OpenFeedbackContainer } from '../../../../components/OpenFeedback/OpenFeedback'
+import { boxPrintStyle } from '../../../../util/printStyle'
 
 const styles = {
   title: {
@@ -35,7 +36,7 @@ const FeedbackResponse = ({ feedbackTarget }) => {
   const canGiveFeedbackResponse = isEnded && isResponsibleTeacher
 
   return (
-    <Card sx={{ borderRadius: '1rem' }}>
+    <Card sx={{ borderRadius: '1rem', ...boxPrintStyle }}>
       <CardContent>
         <Typography component="h2" sx={styles.title}>
           {t('feedbackTargetResults:responseHeading')}

diff --git a/src/client/pages/FeedbackTarget/tabs/Results/QuestionResults/OpenResults.js b/src/client/pages/FeedbackTarget/tabs/Results/QuestionResults/OpenResults.js
@@ -36,9 +36,10 @@ const styles = {
       background: theme.palette.info.main,
     },
     '@media print': {
-      overflow: 'visible',
+      overflowY: 'visible',
       maxHeight: '100%',
       height: 'auto',
+      display: 'block',
     },
   }),
 }
@@ -68,13 +69,13 @@ const OpenResults = ({ question }) => {
     () => (question.feedbacks ?? []).filter(({ data }) => Boolean(data)).sort((a, b) => a.data.localeCompare(b.data)),
     [question]
   )
-  const renderInitially = feedbacks.length < 10
+  const renderInitially = true // feedbacks.length < 10
   const { render, ref } = useRenderVisible({ initial: renderInitially })
 
   return (
     <ResultsContent>
       <Box display="flex" justifyContent="center">
-        <Box sx={[styles.list, { maxHeight: '800px' }]} ref={ref}>
+        <Box sx={[styles.list]} ref={ref}>
           {!render && (
             <Box display="flex" alignSelf="stretch" justifyContent="center">
               <CircularProgress />

diff --git a/src/client/pages/FeedbackTarget/tabs/Results/QuestionResults/QuestionItem.js b/src/client/pages/FeedbackTarget/tabs/Results/QuestionResults/QuestionItem.js
@@ -12,6 +12,7 @@ import LikertResults from './LikertResults'
 import MultipleChoiceResults from './MultipleChoiceResults'
 import OpenResults from './OpenResults'
 import SingleChoiceResults from './SingleChoiceResults'
+import { boxPrintStyle } from '../../../../../util/printStyle'
 
 const componentByType = {
   LIKERT: LikertResults,
@@ -89,7 +90,13 @@ const QuestionItem = ({
   const description = getLanguageValue(question?.data?.description, i18n.language)
 
   return (
-    <Card sx={{ height: '100%', p: '1rem' }}>
+    <Card
+      sx={{
+        height: '100%',
+        p: '1rem',
+        ...boxPrintStyle,
+      }}
+    >
       <Box display="flex" flexDirection="column" height="100%">
         <Box display="flex">
           <Box flexGrow={0} mr="auto" display="flex" flexDirection="column" rowGap="0.5rem" alignItems="start">

diff --git a/src/client/pages/FeedbackTarget/tabs/Results/QuestionResults/QuestionResults.js b/src/client/pages/FeedbackTarget/tabs/Results/QuestionResults/QuestionResults.js
@@ -118,7 +118,7 @@ const QuestionResults = React.memo(
                     width: '100%',
                   },
                   '@media print': {
-                    width: '50%',
+                    width: '30%',
                     pageBreakInside: 'avoid',
                     pageBreakBefore: 'auto',
                     pageBreakAfter: 'auto',
@@ -143,7 +143,7 @@ const QuestionResults = React.memo(
           data-cy={`feedback-target-results-open-questions-${openQuestions.length}`}
         >
           {openQuestions.map(q => (
-            <div key={q.id} style={{ pageBreakBefore: 'auto', pageBreakAfter: 'auto' }}>
+            <div key={q.id} /*style={{ pageBreakBefore: 'auto', pageBreakAfter: 'auto' }} */>
               <QuestionItem
                 question={q}
                 publicQuestionIds={publicQuestionIds}

diff --git a/src/client/util/printStyle.js b/src/client/util/printStyle.js
@@ -0,0 +1,12 @@
+import { grey } from '@mui/material/colors'
+
+export const boxPrintStyle = {
+  // Improve printing
+  '@media print': {
+    boxShadow: 'none',
+    backgroundColor: 'transparent',
+    p: '0',
+    borderBottom: `1px solid ${grey[300]}`,
+    borderRadius: 0,
+  },
+}