Search users form. Still need loads of design.

eprochasson · Jul 22, 2013 · 5c92f3f · 5c92f3f
1 parent c67774d
commit 5c92f3f
Show file tree

Hide file tree

Showing 22 changed files with 914 additions and 279 deletions.
diff --git a/TODO b/TODO
@@ -15,4 +15,7 @@ Check input security (not too long, invalid characters, injection...).
 
 Find a way to factorize some client code.
 
-Still have some presence with empty users!!!
+Still have some presence with empty users!!!
+
+Profile picture update field allow empty images. Also, show the image uploaded, allow for image resize. Improve..
+
diff --git a/client/css/extras/slider.css b/client/css/extras/slider.css
@@ -0,0 +1,138 @@
+/*!
+ * Slider for Bootstrap
+ *
+ * Copyright 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+.slider {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+}
+.slider.slider-horizontal {
+  width: 210px;
+  height: 20px;
+}
+.slider.slider-horizontal .slider-track {
+  height: 10px;
+  width: 100%;
+  margin-top: -5px;
+  top: 50%;
+  left: 0;
+}
+.slider.slider-horizontal .slider-selection {
+  height: 100%;
+  top: 0;
+  bottom: 0;
+}
+.slider.slider-horizontal .slider-handle {
+  margin-left: -10px;
+  margin-top: -5px;
+}
+.slider.slider-horizontal .slider-handle.triangle {
+  border-width: 0 10px 10px 10px;
+  width: 0;
+  height: 0;
+  border-bottom-color: #0480be;
+  margin-top: 0;
+}
+.slider.slider-vertical {
+  height: 210px;
+  width: 20px;
+}
+.slider.slider-vertical .slider-track {
+  width: 10px;
+  height: 100%;
+  margin-left: -5px;
+  left: 50%;
+  top: 0;
+}
+.slider.slider-vertical .slider-selection {
+  width: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+.slider.slider-vertical .slider-handle {
+  margin-left: -5px;
+  margin-top: -10px;
+}
+.slider.slider-vertical .slider-handle.triangle {
+  border-width: 10px 0 10px 10px;
+  width: 1px;
+  height: 1px;
+  border-left-color: #0480be;
+  margin-left: 0;
+}
+.slider input {
+  display: none;
+}
+.slider .tooltip-inner {
+  white-space: nowrap;
+}
+.slider-track {
+  position: absolute;
+  cursor: pointer;
+  background-color: #f7f7f7;
+  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
+  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
+  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
+  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.slider-selection {
+  position: absolute;
+  background-color: #f7f7f7;
+  background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5));
+  background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5);
+  background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5);
+  background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.slider-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: #0e90d2;
+  background-image: -moz-linear-gradient(top, #149bdf, #0480be);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
+  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
+  background-image: -o-linear-gradient(top, #149bdf, #0480be);
+  background-image: linear-gradient(to bottom, #149bdf, #0480be);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  opacity: 0.8;
+  border: 0px solid transparent;
+}
+.slider-handle.round {
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+}
+.slider-handle.triangle {
+  background: transparent none;
+}
diff --git a/client/css/less/search.lessimport b/client/css/less/search.lessimport
@@ -0,0 +1,60 @@
+
+#search_form{
+  padding: 15px;
+  border-bottom: 1px solid @blueLessLight;
+  background: @blueLight;
+  control{
+    float: left;
+    display: block;
+  }
+  #age{
+    width: 300px;
+  }
+  .slider-selection{
+    background: @blueDark;
+  }
+  .slider-track{
+    background: @blue;
+  }
+}
+
+div#searchresults{
+  clear: both;
+}
+
+ul.search_results{
+  margin:30px 0 0 5px 30px;
+
+  li{
+    list-style: none;
+    float: left;
+    width: 30%;
+    margin: 1%;
+    position: relative;
+    height: 200px;
+    .box-shadow(0 0 5px rgba(50, 50, 50, 0.75));
+    a{
+      width: 100%;
+      display:block;
+      position: relative;
+    }
+    img{
+      margin: 10px auto;
+      display: block;
+    }
+    .description{
+      text-align: center;
+      span.name{
+        font-weight: bold;
+        font-size: 1.1em;
+      }
+      span.age{
+        font-size: 1.1em;
+      }
+      span.geocoding{
+        font-size: 0.9em;
+        display: block;
+      }
+    }
+  }
+}
diff --git a/client/css/less/slider.lessimport b/client/css/less/slider.lessimport
@@ -0,0 +1,104 @@
+/*!
+ * Slider for Bootstrap
+ *
+ * Copyright 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+
+.slider {
+	display: inline-block;
+	vertical-align: middle;
+	position: relative;
+	&.slider-horizontal {
+		width: 210px;
+		height: @baseLineHeight;
+		.slider-track {
+			height: @baseLineHeight/2;
+			width: 100%;
+			margin-top: -@baseLineHeight/4;
+			top: 50%;
+			left: 0;
+		}
+		.slider-selection {
+			height: 100%;
+			top: 0;
+			bottom: 0;
+		}
+		.slider-handle {
+			margin-left: -@baseLineHeight/2;
+			margin-top: -@baseLineHeight/4;
+			&.triangle {
+    			border-width: 0 @baseLineHeight/2 @baseLineHeight/2 @baseLineHeight/2;
+				width: 0;
+				height: 0;
+				border-bottom-color: #0480be;
+				margin-top: 0;
+			}
+		}
+	}
+	&.slider-vertical {
+		height: 210px;
+		width: @baseLineHeight;
+		.slider-track {
+			width: @baseLineHeight/2;
+			height: 100%;
+			margin-left: -@baseLineHeight/4;
+			left: 50%;
+			top: 0;
+		}
+		.slider-selection {
+			width: 100%;
+			left: 0;
+			top: 0;
+			bottom: 0;
+		}
+		.slider-handle {
+			margin-left: -@baseLineHeight/4;
+			margin-top: -@baseLineHeight/2;
+			&.triangle {
+				border-width: @baseLineHeight/2 0 @baseLineHeight/2 @baseLineHeight/2;
+				width: 1px;
+				height: 1px;
+				border-left-color: #0480be;
+				margin-left: 0;
+			}
+		}
+	}
+	input {
+		display: none;
+	}
+	.tooltip-inner {
+		white-space: nowrap;
+	}
+}
+.slider-track {
+	position: absolute;
+	cursor: pointer;
+	#gradient > .vertical(#f5f5f5, #f9f9f9);
+	.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+	.border-radius(@baseBorderRadius);
+}
+.slider-selection {
+	position: absolute;
+	#gradient > .vertical(#f9f9f9, #f5f5f5);
+	.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
+	.box-sizing(border-box);
+	.border-radius(@baseBorderRadius);
+}
+.slider-handle {
+	position: absolute;
+	width: @baseLineHeight;
+	height: @baseLineHeight;
+	#gradient > .vertical(#149bdf, #0480be);
+	.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+	opacity: 0.8;
+	border: 0px solid transparent;
+	&.round {
+		.border-radius(@baseLineHeight);
+	}
+	&.triangle {
+		background: transparent none;
+	}
+}
diff --git a/client/css/style.less b/client/css/style.less
@@ -8,6 +8,9 @@
 @import "less/online-user.lessimport";
 @import "less/newsfeed.lessimport";
 @import "less/map.lessimport";
+@import "less/slider.lessimport";
+@import "less/search.lessimport";
+
 
 body{
   padding-top: 55px;
@@ -17,6 +20,8 @@ body{
   top: 0;
   width: @pageWidth;
   margin: 0 auto;
+  z-index: 9999;
+
 }
 
 @media all and (max-width: @pageWidth) {

diff --git a/client/helpers/functions.js b/client/helpers/functions.js
@@ -0,0 +1,11 @@
+getAgeDob = function(date){
+
+    var age = moment(date, 'DD-MM-YYYY');
+    var now = moment();
+    return now.diff(age, 'years');
+};
+getAge = function(date){
+    var age = moment.unix(date);
+    var now = moment();
+    return now.diff(age, 'years');
+};
diff --git a/client/helpers/handlebars.js b/client/helpers/handlebars.js
@@ -37,13 +37,11 @@ Handlebars.registerHelper('thumbnail', function(url, w,h,fit){
 });
 
 Handlebars.registerHelper('age', function(date, hash){
-    if(!typeof date === 'string'){
+    if(typeof date === 'function'){
         return 0;
     }
 
-    var age = moment(date, 'DD-MM-YYYY');
-    var now = moment();
-    return now.diff(age, 'years');
+    return getAge(date);
 });
 
 Handlebars.registerHelper('profileComplete', function(){