projectList item formatting

3 files changed, 66 insertions, 32 deletions

diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 6c27ff1..7eb6e7c 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -40,20 +40,29 @@ Map.Draw = function(map, opt){
 
   // changes the ctx temporarily
 	draw.render = function(){
-		var thumbnail_side = 1000
+		var thumbnail_width = 1000
+		var thumbnail_height = 750
 		
 		var extent = Rooms.extent()
 		var center = extent.center()
-		var zoom = thumbnail_side / Math.max( extent.width(), extent.height() ) * 0.99
+		var extent_width = extent.width()
+		var extent_height = extent.height() 
+		var zoom
+		if (extent_width > extent_height) {
+      zoom = thumbnail_width / extent.width() * 0.9
+		}
+		else {
+      zoom = thumbnail_height / extent.height() * 0.9
+		}
 
 		var canvas = document.createElement("canvas")
 		ctx = canvas.getContext('2d')
-		canvas.width = thumbnail_side
-		canvas.height = thumbnail_side
+		canvas.width = thumbnail_width
+		canvas.height = thumbnail_height
 		
 		draw.clear()
 
-		ctx.translate( thumbnail_side * 1/2, thumbnail_side * 1/2)
+		ctx.translate( thumbnail_width * 1/2, thumbnail_height * 1/2)
 		ctx.scale( zoom, zoom )
 		ctx.translate( center.a, -center.b )
 		ctx.scale( -1, 1 )
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index 0c3cfd4..3603f0c 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -120,11 +120,9 @@
 
     base.extent = function(){
       var extent = new Rect ( new vec2(Infinity, -Infinity), new vec2(Infinity, -Infinity) )
-
       base.forEach(function(room){
         extent.expand(room.rect)
       })
-    
       return extent
     }
 
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index d47b5a7..24ca772 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -327,27 +327,42 @@ iframe.embed {
 .projectList {
 	display: inline-block;
 	float: left;
-	width: 100%;
+	width: 98vw;
+	margin: 2vw;
 }
 
+.projectList a {
+	width: 32vw;
+	float:left;
+	clear: right;
+	padding-bottom: 2vw;
+}
 .projectList .room {
-  width: 50%;
-	height:40vh;
+	width: 30vw;
+	height: 23vw;
+	margin: 1vw;
+	border: 1vw solid white;
 	display:table;
 	position: relative;
-	float:left;
-	border-top:1px solid;
+  z-index: 1;
 }
-
-.projectList .room:nth-child(3n+2) {
-	border-right:1px solid black;
+.projectList .holder {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
 }
 
-.projectList .room:nth-child(3n+1) {
-	width: 100%;
-	height: 50vh;
+.room .mask {
+  position: absolute;
+  top: 0; left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  overflow: hidden;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
-
 .room .images {
   position: absolute;
   top: 0; left: 0;
@@ -358,15 +373,28 @@ iframe.embed {
   overflow: hidden;
 }
 .room .images img {
-  max-height: 100%;
-  max-width: 100%;
+  width: 50%;
+  position: absolute;
 }
 
+.room .images[data-mediacount='1'] img:nth-child(1) { left: 20%; top: 20%; }
+
+.room .images[data-mediacount='2'] img:nth-child(1) { left: 51%; bottom: 0%; width: auto; height: 100%; }
+.room .images[data-mediacount='2'] img:nth-child(2) { right: 51%; bottom: 0%; width: auto; height: 100%; }
+
+.room .images[data-mediacount='3'] img:nth-child(1) { right: 51%; bottom: 41%; }
+.room .images[data-mediacount='3'] img:nth-child(2) { left: 51%; bottom: 0%; width:auto; height:100%;}
+.room .images[data-mediacount='3'] img:nth-child(3) { right: 51%; top: 61%; }
+
+.room .images[data-mediacount='4'] img:nth-child(1) { right: 51%; bottom: 41%; }
+.room .images[data-mediacount='4'] img:nth-child(2) { left: 51%; bottom: 61%; }
+.room .images[data-mediacount='4'] img:nth-child(3) { right: 51%; top: 61%; }
+.room .images[data-mediacount='4'] img:nth-child(4) { left: 51%; top: 41%; }
+
 .page .btn {
 	clear: both;
 	padding: 30px 0;
 	border: 0;
-
 }
 
 .page .viewMore {
@@ -385,22 +413,21 @@ iframe.embed {
 	vertical-align: middle;
 }
 
-.page .room .holder a {
-  font-weight: 300;
-  font-size: 20px;
-  letter-spacing: 1px;
+.page label {
+  font-weight: 500;
+  font-size: 15px;
   color: black;
-  background: white;
-  border: 1px solid;
   padding: 5px;
-  box-shadow: -3px 3px black;
   text-decoration:none;
-  max-width: 180px;
   display: inline-block;
+  cursor: pointer;
 }
 
-.page .room .holder a:hover {
-  background:black;
+.projectList a:hover {
+  background: linear-gradient( 0deg, blue, red );
+}
+
+.projectList a:hover label {
   color:white;
 }