feat: updated print table

Zain-ul-din · Mar 16, 2024 · 60a88e8 · 60a88e8
1 parent 114f9ab
commit 60a88e8
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 39 deletions.
diff --git a/src/components/Timetable.tsx b/src/components/Timetable.tsx
@@ -80,10 +80,7 @@ export default function Timetable({ metaData, timetableData }: IProps) {
             <Loader>Loading...</Loader>
           ) : (
             <>
-              <div
-                ref={printTableRef}
-                className="print_timetable"
-                style={{ width: '100%', height: '100%', overflow: 'auto' }}>
+              <div ref={printTableRef} className="print_timetable">
                 <TimeTablePrint
                   headTitles={timetableHeadTitles}
                   data={timetableData.timetable}

diff --git a/src/components/TimetablePrint.tsx b/src/components/TimetablePrint.tsx
@@ -5,7 +5,8 @@ import {
   Badge,
   useColorMode,
   Center,
-  Heading
+  Heading,
+  Td
 } from '@chakra-ui/react';
 
 import { getColSpan, fillColumn } from '~/lib/util';
@@ -34,14 +35,13 @@ export default function TimeTablePrint({
 }: ITimeTableProps): JSX.Element {
   return (
     <>
-      <TableContainer my={2} p={2} width={'150%'} overflow={'auto'} scale={'0.9'}>
-        <Center my={1}>
-          <Heading>{payload}</Heading>
+      <TableContainer p={2} width={'100%'} overflow={'auto'} scale={'0.9'}>
+        <Center my={5}>
+          <Heading fontSize={'3xl'}>{payload}</Heading>
         </Center>
         <Table
           variant={'simple'}
           size={'sm'}
-          p={1}
           color={'black !important'}
           border={'1px solid black'}
           overflow={'visible'}>
@@ -63,13 +63,19 @@ export default function TimeTablePrint({
             })}
           </Tbody>
           <Tfoot>
-            <Th
-              height={'3rem'}
-              textAlign={'center'}
-              colSpan={headTitles.length + 7}
-              color={'blackAlpha.800'}>
-              https://www.lgutimetable.online
-            </Th>
+            <Tr>
+              <Th textAlign={'center'} colSpan={headTitles.length + 7} color={'blackAlpha.800'}>
+                <a
+                  href="https://www.lgutimetable.online"
+                  style={{
+                    display: 'inline-block',
+                    margin: '1rem 0rem',
+                    color: 'blue'
+                  }}>
+                  SOURCE: https://www.lgutimetable.online
+                </a>
+              </Th>
+            </Tr>
           </Tfoot>
         </Table>
       </TableContainer>
@@ -87,13 +93,18 @@ function TimeTableHead({ titiles }: { titiles: Array<LectureTime> }): JSX.Elemen
     <>
       <Thead>
         <Tr>
-          <Th border={'1px solid black'} color={'blackAlpha.900'}>
-            TIME
+          <Th border={'1px solid black'} color={'blackAlpha.900'} textAlign={'center'}>
+            <Text>TIME</Text>
           </Th>
           {titiles.map((lectureTime: LectureTime, idx: number): JSX.Element => {
             return (
-              <Th key={idx} border={'1px solid black'} color={'blackAlpha.900'}>
-                <Flex textAlign={'center'} flexDirection={'column'}>
+              <Th
+                p={2}
+                key={idx}
+                border={'1px solid black'}
+                color={'blackAlpha.900'}
+                textAlign={'center'}>
+                <Flex textAlign={'center'} flexDirection={'column'} my={'1rem'}>
                   <Text>{lectureTime.startTime}</Text>
                   <Text>{'-'}</Text>
                   <Text>{lectureTime.endTime}</Text>
@@ -124,13 +135,13 @@ function TimeTableCell({
   return (
     <>
       <Tr>
-        <Th border={'1px solid black'} color={'blackAlpha.900'}>
-          {day}
+        <Th border={'1px solid black'} color={'blackAlpha.900'} textAlign={'center'}>
+          <Text padding={'2rem'}>{day}</Text>
         </Th>
 
         {!metaData || metaData.length == 0 ? (
           <Th colSpan={colCount} border={'1px solid black'}>
-            <Flex justifyContent={'center'} py={2} color={'blackAlpha.900'}>
+            <Flex justifyContent={'center'} py={2} color={'blackAlpha.900'} marginY={'2rem'}>
               All Slots are free
             </Flex>
           </Th>
@@ -155,11 +166,11 @@ function TimeTableCell({
               <Th
                 key={idx}
                 colSpan={colSpan}
-                py={2}
+                py={5}
                 border={'0.1px solid'}
                 borderRadius={'2xl'}
                 borderColor={'gray.900'}>
-                <Flex flexDirection={'column'} alignItems={'center'}>
+                <Flex flexDirection={'column'} alignItems={'center'} gap={3} my={2}>
                   {val.subject ? (
                     <>
                       <Text fontSize={'xs'} fontFamily={'monospace'} color={'blackAlpha.900'}>
@@ -171,11 +182,13 @@ function TimeTableCell({
                           ':' +
                           `${val.endTime.minutes}`.padEnd(2, '0')}
                       </Text>
-                      <Badge fontSize={'x-small'}>{val.subject}</Badge>
+                      <Badge fontSize={'x-small'} p={3}>
+                        {val.subject}
+                      </Badge>
                       <Text fontSize={'x-small'} color={'blackAlpha.900'}>
                         {val.roomNo}
                       </Text>
-                      <Text fontSize={'x-small'} color={'blackAlpha.900'}>
+                      <Text fontSize={'x-small'} fontWeight={'medium'} color={'blackAlpha.900'}>
                         {val.teacher}
                       </Text>
                     </>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -251,6 +251,7 @@ a {
 
 /* Print Module */
 @media print {
+
   table {
     page-break-after: always !important;
   }
@@ -287,27 +288,43 @@ a {
     transform-origin: 0 0;
     color: black !important;
   }
-
+  
   * {
     /* styling */
     box-sizing: border-box !important;
-    font-size: 1rem !important;
     padding: 3px !important;
     border-color: black !important;
   }
+
+  th, td, tr, p, span {
+    font-size: 1rem !important;
+  }
 
-  .print_timetable {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid red;
+  @page{
+    background: black;
+    margin:0;
+    size: A4;
+    padding: 0;
   }
 
+
+    .print_timetable {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      page-break-inside: avoid;
+      max-height: 100%;
+      overflow: hidden;
+      page-break-after: always;
+    }
+
   ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 0.1px rgba(0, 0, 0, 0) !important;
     background-color: #f5f5f500 !important;