Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

a little better message details screen

  • Loading branch information...
commit 60ed950a63e669222264ae63e5ded8ef96564b37 1 parent e89d7aa
David Becher authored March 08, 2013
18  css/styles.css
@@ -568,4 +568,22 @@ label {
568 568
   background: linear-gradient(to bottom, #a3bafc 0%, #354adb 90%, #3f60e1 100%);
569 569
   background: -webkit-linear-gradient(top, #a3bafc 0%, #354adb 90%, #3f60e1 100%);
570 570
   color: rgba(255, 255, 255, 0.3);
  571
+}
  572
+
  573
+.message-details {
  574
+  -webkit-user-select: auto;
  575
+}
  576
+
  577
+.message-details > dt {
  578
+  font-size: 10px;
  579
+  font-weight: bold;
  580
+  text-transform: uppercase;
  581
+  color: #8892a5;
  582
+  text-shadow: #fff 0 1px 0;
  583
+  margin: 0.5em 0;
  584
+}
  585
+
  586
+.message-details > dd {
  587
+  font-size: 1.166667em;
  588
+  margin: 0 0 1em;
571 589
 }
33  js/app.js
@@ -55,19 +55,8 @@
55 55
     renderMessage: function(message) {
56 56
       var dateString;
57 57
       if(!this.lastDate || message.get('timestamp') - this.lastDate > 300000) {
58  
-      console.log('ts');
59 58
         this.lastDate = message.get('timestamp');
60  
-        dateString = '';
61  
-        var date = new Date(message.get('timestamp'));
62  
-        var now = new Date();
63  
-        if(date.getDate() === now.getDate() && date.getMonth() === now.getMonth() && date.getFullYear() === now.getFullYear()) {
64  
-          dateString = 'Today';
65  
-        } else {
66  
-          dateString = (date.getMonth()+1) + '/' + date.getDate() + '/' + date.getFullYear();
67  
-        }
68  
-        dateString += ' ' + (date.getHours() > 12 ? (date.getHours()-12) : date.getHours());
69  
-        dateString += ':' + (date.getMinutes() < 10 ? ('0'+date.getMinutes()) : date.getMinutes());
70  
-        dateString += date.getHours() > 12 ? ' PM' : ' AM';
  59
+        dateString = formatDate(message.get('timestamp'));
71 60
       }
72 61
       return Templates.message(_.extend(message.toJSON(), {
73 62
         cid: message.cid,
@@ -142,9 +131,9 @@
142 131
     ],
143 132
 
144 133
     render: function() {
145  
-      this.$el.html(Templates.message(_.extend(this.model.toJSON(), {
  134
+      this.$el.html(Templates['message-detail'](_.extend(this.model.toJSON(), {
146 135
         cid: this.model.cid,
147  
-        date: new Date(this.model.get('timestamp'))
  136
+        date: formatDate(this.model.get('timestamp'))
148 137
       })));
149 138
     },
150 139
 
@@ -202,4 +191,20 @@
202 191
     new FastClick(document.body);
203 192
   }, false);
204 193
 
  194
+
  195
+  function formatDate(ts) {
  196
+    dateString = '';
  197
+    var date = new Date(ts);
  198
+    var now = new Date();
  199
+    if(date.getDate() === now.getDate() && date.getMonth() === now.getMonth() && date.getFullYear() === now.getFullYear()) {
  200
+      dateString = 'Today';
  201
+    } else {
  202
+      dateString = (date.getMonth()+1) + '/' + date.getDate() + '/' + date.getFullYear();
  203
+    }
  204
+    dateString += ' ' + (date.getHours() > 12 ? (date.getHours()-12) : date.getHours());
  205
+    dateString += ':' + (date.getMinutes() < 10 ? ('0'+date.getMinutes()) : date.getMinutes());
  206
+    dateString += date.getHours() > 12 ? ' PM' : ' AM';
  207
+    return dateString;
  208
+  }
  209
+
205 210
 })(this);
13  js/templates.js
... ...
@@ -1,7 +1,18 @@
1 1
 ;(function(exports) { 
2 2
    exports.Templates = exports.Templates || {}; 
3 3
    var Templates = exports.Templates; 
4  
-   Templates["message"] = function(data){
  4
+   Templates["message-detail"] = function(data){
  5
+var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
  6
+__p+='<dl class="message-details">\n  <dt>Date</dt>\n  <dd>'+
  7
+((__t=( data.date ))==null?'':__t)+
  8
+'</dd>\n  <dt>From</dt>\n  <dd>'+
  9
+((__t=( data.user ))==null?'':__t)+
  10
+'</dd>\n  <dt>Message</dt>\n  <dd>'+
  11
+((__t=( data.body ))==null?'':__t)+
  12
+'</dd>\n</dl>';
  13
+return __p;
  14
+}
  15
+Templates["message"] = function(data){
5 16
 var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
6 17
 __p+='';
7 18
  if(data.date) { 
8  templates/message-detail.html
... ...
@@ -0,0 +1,8 @@
  1
+<dl class="message-details">
  2
+  <dt>Date</dt>
  3
+  <dd><%= data.date %></dd>
  4
+  <dt>From</dt>
  5
+  <dd><%= data.user %></dd>
  6
+  <dt>Message</dt>
  7
+  <dd><%= data.body %></dd>
  8
+</dl>

0 notes on commit 60ed950

Please sign in to comment.
Something went wrong with that request. Please try again.