From 80eefec541f08eb7a4dc4def2077f5267c4b02f5 Mon Sep 17 00:00:00 2001
From: Kayne Ruse <kayneruse@gmail.com>
Date: Mon, 10 Dec 2018 05:57:43 +1100
Subject: [PATCH] Made the site more mobile-friendly

---
 src/app.jsx             |  8 ++++----
 src/pages/card_list.jsx | 25 ++++++++++++++-----------
 src/styles/shared.css   | 29 ++++++++++++++++++++++++++++-
 3 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index acacab8..86ec2d6 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -29,10 +29,10 @@ class App extends React.Component {
 					<Container className="panel">
 						<Link to="/"><Header as="h1" textAlign="center">Mecha: Immense Warfare</Header></Link>
 						<LinkButton.Group widths="4">
-							<LinkButton to="/rules">Rules</LinkButton>
-							<LinkButton to="/cardlist">Card List</LinkButton>
-							<LinkButton to="/concepts">Concepts</LinkButton>
-							<LinkButton to="/about">About</LinkButton>
+							<LinkButton to="/rules" className="noPadding">Rules</LinkButton>
+							<LinkButton to="/cardlist" className="noPadding">Card List</LinkButton>
+							<LinkButton to="/concepts" className="noPadding">Concepts</LinkButton>
+							<LinkButton to="/about" className="noPadding">About</LinkButton>
 						</LinkButton.Group>
 						<Divider hidden />
 						<Switch>
diff --git a/src/pages/card_list.jsx b/src/pages/card_list.jsx
index 79458ba..55983e0 100644
--- a/src/pages/card_list.jsx
+++ b/src/pages/card_list.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Table, Input, Icon } from "semantic-ui-react";
+import { Table, Input, Icon, Divider } from "semantic-ui-react";
 import Papa from "papaparse";
 import tsorter from "../utilities/tsorter.js";
 
@@ -38,16 +38,19 @@ class CardList extends React.Component {
 
 		//NOTE: id must match tsorter's argument above
 		return (
-			<Table unstackable id={"cardtable"}>
-				<Table.Header>
-					<Table.Row>
-						{headers}
-					</Table.Row>
-				</Table.Header>
-				<Table.Body>
-					{content}
-				</Table.Body>
-			</Table>
+			<div className="scrollable">
+				<Divider hidden />
+				<Table unstackable id={"cardtable"}>
+					<Table.Header>
+						<Table.Row>
+							{headers}
+						</Table.Row>
+					</Table.Header>
+					<Table.Body>
+						{content}
+					</Table.Body>
+				</Table>
+			</div>
 		);
 	}
 
diff --git a/src/styles/shared.css b/src/styles/shared.css
index 8e6a7e5..7ce0dd0 100644
--- a/src/styles/shared.css
+++ b/src/styles/shared.css
@@ -63,6 +63,16 @@ footer {
 	justify-content: flex-end;
 }
 
+.scrollable {
+	max-width: 100%;
+	overflow: auto;
+}
+
+.noPadding {
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+}
+
 /* Up and Down Arrows */
 .descend:after{
 	content: "\25B2";
@@ -70,4 +80,21 @@ footer {
 
 .ascend:after{
 	content: "\25BC";
-}
\ No newline at end of file
+}
+
+/* Specific cases */
+thead {
+	font-weight: bold;
+}
+
+th {
+	min-width: 50px;
+}
+
+th:nth-child(1) {
+	min-width: 120px;
+}
+
+th:nth-child(4) {
+	min-width: 250px;
+}