From 22207df1ea89d3587a94309d37bc076b31ff3824 Mon Sep 17 00:00:00 2001
From: William Hudson <mrbbaggins@gmail.com>
Date: Sun, 15 Mar 2015 22:07:10 -0400
Subject: [PATCH] Enable switching between landscape (desktop) and portrait
 (mobile) layout

---
 style.css       | 83 +++++++++++++++++++++++++++++++++++--------------
 timeassist.html | 24 +++++++++++++-
 2 files changed, 83 insertions(+), 24 deletions(-)

diff --git a/style.css b/style.css
index 5d623e4..6a46318 100644
--- a/style.css
+++ b/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  {
diff --git a/timeassist.html b/timeassist.html
index 5beadc4..53723dc 100644
--- a/timeassist.html
+++ b/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) {