Trying to make the css work a bit better, this is so not my strong suit.

lashleigh · Mar 22, 2012 · fe9e9fe · fe9e9fe
1 parent a968ea8
commit fe9e9fe
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/app/assets/javascripts/recipes/index.js b/app/assets/javascripts/recipes/index.js
@@ -227,21 +227,30 @@ App.Views.Note = Backbone.View.extend({
     var am_pm = ' am';
     if(hours >= 12) {
       am_pm = ' pm';
-      hours = hours - 12 ? hours - 12 : 12; 
+      hours = hours - 12;
     }
-    var simple_time = hours+':'+minutes+am_pm;
+    if(!hours) hours = 12;
+    return hours+':'+minutes+am_pm;
+  },
+  getLocalTime: function() {
+    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    var d = new Date(this.model.get('time'));
+    var delta_in_hours = (new Date() - d) / (1000*60*60);
+    return time_ago(delta_in_hours, this); 
 
-    var today = new Date();
+    function time_ago(delta, that) {
-    var delta_in_days = (today - d) / (1000*60*60*24);
+      if(delta < 1) {
-    var view_ago;
+        return Math.round(delta*60)+'m ago';
-    if(delta_in_days < 1) {
+      } else if(delta < 4) {
-      view_ago = 'today';
+        return Math.floor(delta)+'h '+ Math.round((delta-Math.floor(delta))*60)+ 'm ago';
-    } else if(delta_in_days < 2) {
+      } else if(delta < 24) {
-      view_ago = 'yesterday';
+        return Math.round(delta) + 'h ago';
-    } else {
+      } else if(delta < 96) {
-      view_ago = Math.floor(delta_in_days) + ' days ago';
+        return Math.floor(delta/24)+'d '+ Math.round((delta/24-Math.floor(delta/24))*24)+ 'h ago';
+      } else {
+        return d.getDate()+' '+months[d.getMonth()]+' @ '+that.localTime();
+      }
     }
-    return view_ago + ' at ' + simple_time; 
   }, 
   updateBodyHeight: function() {
     this.body_input.css('height', this.body_input[0].scrollHeight+'px');
@@ -252,7 +261,7 @@ App.Views.Note = Backbone.View.extend({
   render: function() {
     var template = _.template(this.template);
     $(this.el).html(template(this.model.toJSON()));
-    $(this.el).find('.time').text(this.localTime());
+    $(this.el).find('.time').text(this.getLocalTime());
     this.note_body = $(this.el).find('.body');
     this.body_input = $(this.el).find('.body-input');
     this.setHeight();

diff --git a/app/assets/stylesheets/recipe.css.less b/app/assets/stylesheets/recipe.css.less
@@ -82,6 +82,12 @@
       .editable input {
         display: none;
       }
+      .button {
+        opacity: 0.5;
+      }
+    }
+    .part:hover {
+      .button {opacity: 1.0;}
     }
     tr:nth-child(odd) {
       background: #ddd;
@@ -93,7 +99,7 @@
 }
 #notes_container {
   float: left;
-  padding-top: 37px;
+  padding-top: 67px;
   width: 300px;
 
   textarea {
@@ -126,7 +132,8 @@
     }
   }
   .note {
-    border: gray 1px dashed;
+  background: white;
+    border: 1px solid rgba(0, 0, 0, .1);
     padding: 12px;
     .edit-body {
        display: none;