Enable switching between landscape (desktop) and portrait (mobile) la…

…yout

style.css

@@ -21,35 +21,72 @@ header {
 	border-color: black;
 }
 
-header h1,h2 {
-	display: inline;
-}
-
 /* TODO vertically center h1 */
 
 header h2 {
 	font-family: mayQueen;
 }
 
-#padding-box1, #padding-box2 {
-	width: 50%;
-	padding: 0;
-	margin: 0;
-}
-
-#padding-box1 {
-	float: left;
-	display: block;
-}
-
-#padding-box2 {
-	float: right;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.clear {
-	clear: both;
+@media screen and (orientation:portrait) {
+	/* portrait-specific styles */
+	*  {
+		font-size: 110%;
+	}
+
+	header h1,h2 {
+		font-size: 200%;
+		display: block;
+		margin: 0px;
+	}
+
+	#padding-box1, #padding-box2 {
+		width: 100%;
+		padding: 0;
+		margin: 0;
+	}
+
+	#padding-box1 {
+		float: none;
+		display: block;
+	}
+
+	#padding-box2 {
+		float: none;
+		display: flex;
+		justify-content: center;
+	}
+
+	.clear {
+		clear: none;
+	}
+}
+
+@media screen and (orientation:landscape) {
+	/* landscape-specific styles */
+	header h1,h2 {
+		display: inline;
+	}
+
+	#padding-box1, #padding-box2 {
+		width: 50%;
+		padding: 0;
+		margin: 0;
+	}
+
+	#padding-box1 {
+		float: left;
+		display: block;
+	}
+
+	#padding-box2 {
+		float: right;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.clear {
+		clear: both;
+	}
 }
 
 #welcome-box  {

timeassist.html

@@ -92,6 +92,9 @@
 
 					//stick it into the document
 					$('#calendar-selector').show();
+
+					//register the orientation change callback to regenerate the table
+					window.addEventListener("resize", handleCalendarSelection, false);
 				}, function(reason) {
 					console.log('Error: ' + reason.result.error.message);
 				});
@@ -155,7 +158,26 @@
 				days[day].events.push(eventData);
 				days[day].total += eventData.length;
 			}
-			outputTable_Landscape(days);
+			outputTable(days);
+		}
+
+		//this function decides whether to render the table in portrait or landscape
+		function outputTable(days) {
+			if(screenOrientationIsPortrait()) {
+				outputTable_Portrait(days);
+			} else {
+				outputTable_Landscape(days);
+			}
+		}
+
+		function screenOrientationIsPortrait() {
+			if(window.innerHeight > window.innerWidth){
+				//portrait
+				return true;
+			} else {
+				//landscape
+				return false;
+			}
 		}
 
 		function outputTable_Landscape(days) {