Fix CSS glitches. Improve show/hide.

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;
 }

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);
+
+			
 		}
 	};
 

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;
-}
+}

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;
-}
+}