UI tweaks

client/client.coffee

@@ -36,7 +36,7 @@ saveCurrentNote = (t,e) ->
   if e and e.keyCode isnt 13 then return;
   notes.update Session.get('note')._id,
     $set:
-      title: t.find('.title').value
+      title: t.find('.editor-title').value
       content: t.find('.area').value
 Template.editor.events
   'click .close-editor': -> Session.set 'note', undefined

client/index.html

@@ -25,8 +25,12 @@
   <ul class="list-group">
     {{#each notes}}
     <li class="note list-group-item">
-      <button type="button" class="edit-note close"><i class="fa fa-pencil-square-o"></i></button>
-      <b>{{title}}</b> <span class="subtitle">{{truncateNoteDesc content}}</span>
+      <span class="note-content">
+        <button type="button" class="edit-note close">
+          <i class="fa fa-pencil-square-o"></i>
+        </button>
+        <b>{{title}}</b> <span class="note-desc">{{content}}</span>
+      </span>
       <button type="button" class="close-note close">&times;</button>
     </li>
     {{/each}}
@@ -70,8 +74,9 @@
     <div class="panel-heading">
       <h3 class="panel-title">
         <div align="center">
-        <input type="text" class="form-control title" value="{{note.title}}" placeholder="Title"></div>
-        <button type="button" class="close close-editor">&times;</button>
+          <input type="text" class="form-control editor-title" value="{{note.title}}" placeholder="Title">
+          <button type="button" class="close close-editor">&times;</button>
+        </div>
       </h3>
     </div>
     <div align="center" class="panel-body">

client/style.css

@@ -1,4 +1,4 @@
-/* Generics */
+/* Generics and bootstrap classes */
 input {
   text-align:center;
 }
@@ -7,20 +7,35 @@ input {
   text-align: center;
 }
 
-.container {
-  max-width: 700px;
-}
-
 .close {
   clear:both;
 }
 
+/* Custom Classes */
 .custom-link { color: #999; }
 .custom-link:hover { color: #101010;}
 
-.subtitle { color: #999; }
+.note {
+  padding-bottom: 5px;
+}
+
+.note-content {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  width:95%;
+  text-overflow: ellipsis;
+}
+
+.close-note {
+  float: right;
+  margin-top: -2px;
+}
+
+.note-desc {
+  color: #999;
+}
 
-/* Custom Classes */
 .notification, .error {
   max-width: 80%;
 }
@@ -31,13 +46,19 @@ input {
 }
 
 .edit-note {
+  display: inline-block;
   float: left;
   margin-right: 10px;
 }
 
-.title { width: 85%; }
+.editor-title { width: 70%; }
+@media (max-width: 400px) {
+  .editor-title { width: 65%; }
+}
+
 
 .close-editor {
+  float: right;
   margin-top: -28px;
   margin-right: 5px;
 }
@@ -50,11 +71,6 @@ input {
   width: 100px;
 }
 
-.close-note {
-  float: right;
-  margin-top: -24px;
-}
-
 .close-notification, .close-error {
   float: right;
   margin-top: -22px;
@@ -72,7 +88,9 @@ input {
 }
 
 #ui-container {
-  max-width: 500px;
+  width: 90%;
+  min-width: 300px;
+  max-width: 550px;
 }
 
 #newNote {