From a1973faa061acbf0c6f67990b7b8f3da8712de35 Mon Sep 17 00:00:00 2001
From: Michael Teeuw <michael@xonaymedia.nl>
Date: Fri, 1 Apr 2016 10:25:54 +0200
Subject: [PATCH] Fix CSS glitches. Improve show/hide.

---
 css/main.css                                | 19 ++++++++++++++++---
 js/main.js                                  | 14 +++++++++++---
 modules/calendar/calendar.css               |  8 +-------
 modules/weatherforecast/weatherforecast.css |  7 +------
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/css/main.css b/css/main.css
index aa676d7f..31dbcee4 100644
--- a/css/main.css
+++ b/css/main.css
@@ -35,7 +35,6 @@ body {
 
 
 header {
-	margin-top: 30px;
 	text-transform: uppercase;
 	font-size: 15px;
 	font-family: 'roboto_condensedregular';
@@ -50,6 +49,18 @@ sup {
 	font-size: 50%;
 	line-height: 50%;
 }
+
+/**
+ * Module styles.
+ */
+
+.module {
+	margin-top: 30px;
+}
+.module:first-child {
+	margin-top: 0px;
+}
+
 /**
  * Region Definitions.
  */
@@ -120,6 +131,8 @@ sup {
 .region.right {
 	text-align: right;
 }
-.region.right  table {
-	float: right;
+.region  table {
+	width: 100%;
+	border-spacing: 0px;
+    border-collapse: separate;
 }
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 0a63f5e2..da5896ac 100644
--- a/js/main.js
+++ b/js/main.js
@@ -31,7 +31,7 @@ var MM = (function() {
 				dom.className = module.name;
 
 				if (typeof module.data.classes === 'string') {
-					dom.className = dom.className + ' ' + module.data.classes;
+					dom.className = 'module '+ dom.className + ' ' + module.data.classes;
 				}
 
 				dom.opacity = 0;
@@ -167,7 +167,12 @@ var MM = (function() {
 			moduleWrapper.style.opacity = 0;
 
 			setTimeout(function() {
-				moduleWrapper.style.display = 'none';
+				// To not take up any space, we just make the position absolute.
+				// since it's fade out anyway, we can see it lay above or
+				// below other modules. This works way better than adjusting
+				// the .display property.
+				moduleWrapper.style.position = 'absolute';
+
 				if (typeof callback === 'function') { callback(); }		
 			}, speed);
 		}
@@ -184,12 +189,15 @@ var MM = (function() {
 		var moduleWrapper = document.getElementById(module.identifier);
 		if (moduleWrapper !== null) {
 			moduleWrapper.style.transition = "opacity " + speed / 1000 + "s";
+			// Restore the postition. See hideModule() for more info.
+			moduleWrapper.style.position = 'static';
 			moduleWrapper.style.opacity = 1;
-			moduleWrapper.style.display = 'block';
 
 			setTimeout(function() {
 				if (typeof callback === 'function') { callback(); }				
 			}, speed);
+
+			
 		}
 	};
 
diff --git a/modules/calendar/calendar.css b/modules/calendar/calendar.css
index 5b6565d7..36e175a0 100644
--- a/modules/calendar/calendar.css
+++ b/modules/calendar/calendar.css
@@ -20,10 +20,4 @@
 .calendar .time {
 	padding-left: 30px;
 	text-align: right;
-}
-
-.calendar table {
-	width: 100%;
-	border-spacing: 0px;
-    border-collapse: separate;
-}
+}
\ No newline at end of file
diff --git a/modules/weatherforecast/weatherforecast.css b/modules/weatherforecast/weatherforecast.css
index 5f62b3e0..77c02e34 100644
--- a/modules/weatherforecast/weatherforecast.css
+++ b/modules/weatherforecast/weatherforecast.css
@@ -11,9 +11,4 @@
 .weatherforecast .min-temp {
 	padding-left: 20px;
 	padding-right: 0px;
-}
-
-.weatherforecast table {
-	border-spacing: 0px;
-    border-collapse: separate;
-}
+}
\ No newline at end of file