Fix ClassTable on mobile

webclient/src/Classes.js

@@ -3,7 +3,7 @@ import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-r
 import './light.css';
 import { Label, Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import moment from 'moment-timezone';
-import { apiUrl, isAdmin, isInstructor, getInstructor, BasicTable, requester } from './utils.js';
+import { apiUrl, isAdmin, isInstructor, getInstructor, BasicTable, requester, useIsMobile } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 import { InstructorClassDetail, InstructorClassAttendance } from './InstructorClasses.js';
 import { courseCache } from './Courses.js';
@@ -12,10 +12,47 @@ import { tags } from './Courses.js';
 
 function ClassTable(props) {
 	const { classes } = props;
+	const isMobile = useIsMobile();
 
 	const now = new Date().toISOString();
 
-	return (
+	return (isMobile ?
+		<Table basic='very'>
+			<Table.Body>
+				{classes.length ?
+					classes.map(x =>
+						<Table.Row key={x.id} active={x.datetime < now || x.is_cancelled}>
+							<Table.Cell>{x.course_data.name}</Table.Cell>
+							<Table.Cell>
+								Date: <Link to={'/classes/'+x.id}>
+									{moment.utc(x.datetime).tz('America/Edmonton').format('ll')}
+								</Link>
+								<span style={{float: 'right'}}>
+									Time: {x.is_cancelled ? 'Cancelled' : moment.utc(x.datetime).tz('America/Edmonton').format('LT')}
+								</span>
+							</Table.Cell>
+							<Table.Cell>
+								Cost: {x.cost === '0.00' ? 'Free' : '$'+x.cost}
+								<span style={{float: 'right'}}>
+									Students: {!!x.max_students ?
+										x.max_students <= x.student_count ?
+											'Full'
+										:
+											x.student_count + ' / ' + x.max_students
+									:
+										x.student_count
+									}
+								</span>
+							</Table.Cell>
+							<Table.Cell>Instructor: {getInstructor(x)}</Table.Cell>
+						</Table.Row>
+					)
+				:
+					<Table.Row>None</Table.Row>
+				}
+			</Table.Body>
+		</Table>
+	:
 		<Table basic='very'>
 			<Table.Header>
 				<Table.Row>

webclient/src/utils.js

@@ -119,3 +119,30 @@ export const requester = (route, method, token, data, signal=null) => {
 		}
 	});
 }
+
+// from: https://usehooks.com/useWindowSize/
+function useWindowSize() {
+	const [windowSize, setWindowSize] = useState({
+		width: undefined,
+		height: undefined,
+	});
+
+	useEffect(() => {
+		function handleResize() {
+			setWindowSize({
+				width: window.innerWidth,
+				height: window.innerHeight,
+			});
+		}
+		window.addEventListener('resize', handleResize);
+		handleResize();
+		return () => window.removeEventListener('resize', handleResize);
+	}, []);
+
+	return windowSize;
+}
+
+export const useIsMobile = () => {
+	const {width, height} = useWindowSize();
+	return width <= 767;
+}