Better member layouting

gdg-kyiv · Mar 22, 2012 · ec81aeb · ec81aeb
1 parent 8907149
commit ec81aeb
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
 
             generateBlocks(members, $('#container > .members'), createMemberDiv)
             $('#navigation > .members .counter').text(members.length)
-            layoutMembers();
+            layoutMembers()
 
             function select(name) {
                 $('#container > .current').removeClass('current')
@@ -32,6 +32,8 @@
             })
 
             select('past')
+
+			$(window).resize(function() { layoutMembers() })
         })
     </script>
 </head>
@@ -59,7 +61,7 @@ <h1 class="gdg-logo"><b>GDG</b> Kyiv-Center</h1>
     		<p>2-4 серпня 2009 року — Олег Боженко і Володимир Іванов створили дві найперші україномовні хвилі у славетній «пісочниці»
     		<p>*«Пісочниця» https://wave.google.com/a/wavesandbox.com/ — девелоперський ресурс Google. Тут почалися тестування Google Wave на її ранніх стадіях і досі тривають розробки всіх роботів та ґаджетів для Хвилі.	</div>
     	<div class="subcont tiled past"></div>
-    	<div class="subcont tiled members"></div>
+    	<div class="subcont columns members"></div>
     	<div class="subcont tiled future"></div>
     </div>
 </body>

diff --git a/style.css b/style.css
@@ -61,7 +61,12 @@ body {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   z-index: 10;
 }
-#container > div.tiled > .block {
+#container > div.columns > .column {
+  vertical-align: top;
+  display: inline-block;
+}
+#container > div.tiled .block,
+#container > div.columns .block {
   opacity: 0;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   -webkit-transition: opacity 500ms;
@@ -70,7 +75,8 @@ body {
   border: 1px solid #c8c8c8;
   background: #f0f0f0;
 }
-#container > div.tiled.current > .block {
+#container > div.tiled.current .block,
+#container > div.columns.current .block {
   opacity: 1;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   -webkit-transition: opacity 500ms;
@@ -123,7 +129,6 @@ body {
   margin-right: 10px;
 }
 .block.member {
-  position: absolute;
   display: block;
   vertical-align: top;
   padding: 10px;

diff --git a/style.styl b/style.styl
@@ -62,17 +62,22 @@ body
 			opacity 1
 			z-index 10
 
-		&.tiled
-			> .block
+		&.columns
+			> .column
+				vertical-align top
+				display inline-block
+
+		&.tiled, &.columns
+			.block
 				opacity 0
 				transition $transition
 				border 1px solid $default-border
 				background $default-bg
 
-			&.current > .block
+			&.current .block
 				opacity 1
 				transition $transition
-
+				
 .block
 	$margin = 20px
 	$padding = 10px
@@ -127,7 +132,6 @@ body
 	&.member 
 		$width = 240px
 
-		position absolute
 		display block
 		vertical-align top
 

diff --git a/ui.js b/ui.js
@@ -55,30 +55,38 @@ function createMemberDiv(member) {
     return contentDiv;
 }
 
-var memberColumns = 0;
+var memberColumns = 0
+var memberDivs = null
 
 function layoutMembers() {
-    var availableWidth = $('#container').innerWidth();
-    var totalMemberWidth = $($('#container > .members').children()[0]).outerWidth(true);
+	if (!memberDivs) {
+		memberDivs = $('#container > .members > .member')
+	}
 
-    var nColumns = Math.floor(availableWidth / totalMemberWidth);
-    if (nColumns == memberColumns) {
-        return;
-    }
+    var availableWidth = $('#container').innerWidth()
+    var totalMemberWidth = $(memberDivs[0]).outerWidth(true)
+
+    var nColumns = Math.floor(availableWidth / totalMemberWidth)
+    if (nColumns == memberColumns) { return }
+
+	memberDivs.detach()
+	$('#container > .members > .column').remove()
 
     memberColumns = nColumns;
 
     var colHeights = [];
-    for (var i = 0; i < nColumns && i < 10; ++i) { colHeights[i] = 0; }
-
-    $('#container > .members').children().each(function(i, e) {
-        e = $(e);
-        var col = indexOfMin(colHeights);
-        var top = colHeights[col];
-        var left = col * totalMemberWidth;
-        e.css({ 'margin-top': top, 'margin-left': left });
-        assignTransitionDelay(e, col)
-        var totalMemberHeight = e.outerHeight(true) - parseInt(e.css('margin-top'), 10);
-        colHeights[col] += totalMemberHeight;
-    });
+    for (var i = 0; i < nColumns && i < 10; ++i) { 
+		var columnDiv = $('<div></div>').addClass('column')
+		$('#container > .members').append(columnDiv)
+		colHeights[i] = columnDiv.height()
+	}
+
+	var columnDivs = $('#container > .members > .column')
+
+	memberDivs.each(function(i, e) {
+		var col = indexOfMin(colHeights)
+		var columnDiv = $(columnDivs.get(col))
+		columnDiv.append(e)
+		colHeights[col] = columnDiv.height()
+	})
 }