quattro: contacts and first photo page

2 files changed, 134 insertions, 47 deletions

diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index 3c16777ea..671577303 100644
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -293,6 +293,7 @@ aside {
 	.contact-block-link {
 		float: left;
 		margin: 0px 2px 2px 0px;
+		img { widht: 48px; height: 58px; }
 	}
 }
 
@@ -361,23 +362,6 @@ section {
 		text-align: left;
 		width: 60px;
 		
-		.wall-item-photo-wrapper { position: relative; }
-		.wall-item-photo { 
-			width: 48px; height: 48px;
-			overflow: hidden;
-			text-indent: -9999px;
-			display: block;
-			background: url(../../../images/icons/48/user.png) no-repeat center center;
-		 }		
-		
-		.wall-item-photo-menu-button {
-			display: none;
-			position: absolute;
-			left: -4px;
-			top: 28px;
-		}
-		.wall-item-photo-menu { display: none; }
-		
 	} 
 	.wall-item-location {
 		word-wrap: break-word;
@@ -420,12 +404,12 @@ section {
 
 .wall-item-container.comment {
 	/*margin-top: 50px;*/
-	.wall-item-photo { width: 32px; height: 32px; margin-left: 16px;
-		background: url(../../../images/icons/22/user.png) no-repeat center center;
+	.contact-photo { width: 32px; height: 32px; margin-left: 16px;
+		/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
 	}	
-	.wall-item-photo-menu-button {
-		top: 13px !important;
-		left: 10px !important;
+	.contact-photo-menu-button {
+		top: 15px !important;
+		left: 15px !important;
 	}
 	.wall-item-links { padding-left: 12px; }
 }
@@ -461,6 +445,46 @@ section {
 	}
 }
 
+/* contacts menu */
+.contact-photo-wrapper { position: relative; }
+.contact-photo { 
+	width: 48px; height: 48px;
+	img { width: 48px; height: 48px; }
+	overflow: hidden;
+	display: block;
+ }		
+.contact-photo-menu-button {
+	display: none;
+	position: absolute;
+	left: -2px;
+	top: 31px;
+}
+
+.contact-wrapper {
+	float: left;
+	width: 90px;
+	height: 90px;
+	.contact-photo { 
+		width: 80px; height: 80px;
+		img { width: 80px; height: 80px; }
+	}
+	.contact-photo-menu-button {
+		left: 0px;
+		top: 63px;
+	}	
+}
+.directory-item {
+	float: left;
+	width: 200px;
+	height: 200px;
+	.contact-photo { 
+		width: 175px; height: 175px;
+		img { width: 175px; height: 175px; }
+	}
+}
+.contact-name { text-align: center; font-weight: bold; }
+.contact-details { color: @Grey3;}
+
 /* editor */
 .jothidden { display: none; }
 #jot {
@@ -793,6 +817,17 @@ ul.tabs {
 	float: left;
 }
 
+/* contacts */
+.contact-entry-wrapper {
+	width: 50px; float: left;
+}
+
+/* photo */
+.lframe {
+	float: left;
+	margin: 0px 10px 10px 0px;
+}
+
 
 /* page footer */
 footer { height: 100px; display: table-row; }
diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css
index 948a7cb04..003ebfae6 100644
--- a/view/theme/quattro/style.css
+++ b/view/theme/quattro/style.css
@@ -535,6 +535,10 @@ aside #profiles-menu {
   float: left;
   margin: 0px 2px 2px 0px;
 }
+#contact-block .contact-block-link img {
+  widht: 48px;
+  height: 58px;
+}
 /* widget */
 .widget {
   margin-bottom: 2em;
@@ -655,26 +659,6 @@ section {
   text-align: left;
   width: 60px;
 }
-.wall-item-container .wall-item-info .wall-item-photo-wrapper {
-  position: relative;
-}
-.wall-item-container .wall-item-info .wall-item-photo {
-  width: 48px;
-  height: 48px;
-  overflow: hidden;
-  text-indent: -9999px;
-  display: block;
-  background: url(../../../images/icons/48/user.png) no-repeat center center;
-}
-.wall-item-container .wall-item-info .wall-item-photo-menu-button {
-  display: none;
-  position: absolute;
-  left: -4px;
-  top: 28px;
-}
-.wall-item-container .wall-item-info .wall-item-photo-menu {
-  display: none;
-}
 .wall-item-container .wall-item-location {
   word-wrap: break-word;
   width: 50px;
@@ -740,15 +724,16 @@ section {
   /*margin-top: 50px;*/
 
 }
-.wall-item-container.comment .wall-item-photo {
+.wall-item-container.comment .contact-photo {
   width: 32px;
   height: 32px;
   margin-left: 16px;
-  background: url(../../../images/icons/22/user.png) no-repeat center center;
+  /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
+
 }
-.wall-item-container.comment .wall-item-photo-menu-button {
-  top: 13px !important;
-  left: 10px !important;
+.wall-item-container.comment .contact-photo-menu-button {
+  top: 15px !important;
+  left: 15px !important;
 }
 .wall-item-container.comment .wall-item-links {
   padding-left: 12px;
@@ -786,6 +771,63 @@ section {
   background: url("../../../images/tag.png") no-repeat center right;
   color: #ffffff;
 }
+/* contacts menu */
+.contact-photo-wrapper {
+  position: relative;
+}
+.contact-photo {
+  width: 48px;
+  height: 48px;
+  overflow: hidden;
+  display: block;
+}
+.contact-photo img {
+  width: 48px;
+  height: 48px;
+}
+.contact-photo-menu-button {
+  display: none;
+  position: absolute;
+  left: -2px;
+  top: 31px;
+}
+.contact-wrapper {
+  float: left;
+  width: 90px;
+  height: 90px;
+}
+.contact-wrapper .contact-photo {
+  width: 80px;
+  height: 80px;
+}
+.contact-wrapper .contact-photo img {
+  width: 80px;
+  height: 80px;
+}
+.contact-wrapper .contact-photo-menu-button {
+  left: 0px;
+  top: 63px;
+}
+.directory-item {
+  float: left;
+  width: 200px;
+  height: 200px;
+}
+.directory-item .contact-photo {
+  width: 175px;
+  height: 175px;
+}
+.directory-item .contact-photo img {
+  width: 175px;
+  height: 175px;
+}
+.contact-name {
+  text-align: center;
+  font-weight: bold;
+}
+.contact-details {
+  color: #999999;
+}
 /* editor */
 .jothidden {
   display: none;
@@ -1115,6 +1157,16 @@ ul.tabs li .active {
 .oauthapp a {
   float: left;
 }
+/* contacts */
+.contact-entry-wrapper {
+  width: 50px;
+  float: left;
+}
+/* photo */
+.lframe {
+  float: left;
+  margin: 0px 10px 10px 0px;
+}
 /* page footer */
 footer {
   height: 100px;