cleaned up styles and layout; added placeholder text in inputs

dgeb · Jan 24, 2012 · f63fcff · f63fcff
1 parent 11fc1ef
commit f63fcff
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 17 deletions.
diff --git a/app/assets/javascripts/app/templates/contacts/edit.handlebars b/app/assets/javascripts/app/templates/contacts/edit.handlebars
@@ -1,6 +1,6 @@
 {{#with contact}}
-  {{view Ember.TextField valueBinding="first_name"}}
-  {{view Ember.TextField valueBinding="last_name"}}
+  {{view Ember.TextField valueBinding="first_name" placeholder="First name"}}
+  {{view Ember.TextField valueBinding="last_name"  placeholder="Last name"}}
   {{#if id}}
     {{submitButton "Update"}}
   {{else}}

diff --git a/app/assets/javascripts/app/templates/contacts/list.handlebars b/app/assets/javascripts/app/templates/contacts/list.handlebars
@@ -3,7 +3,6 @@
     <tr>
       <th>ID</th>
       <th>Name</th>
-      <th />
     </tr>
   </thead>
   <tbody>
@@ -12,8 +11,8 @@
   {{/each}}
   {{#if isNewVisible}}
     <tr>
-      <td></td>
-      <td colspan="2">
+      <td>*</td>
+      <td>
         {{view App.NewContactView}}
       </td>
     </tr>

diff --git a/app/assets/javascripts/app/templates/contacts/show.handlebars b/app/assets/javascripts/app/templates/contacts/show.handlebars
@@ -5,10 +5,10 @@
   {{else}}
     {{contact.fullName}}
   {{/if}}
-</td>
-<td class="commands">
-  {{#unless isEditing}}
-    {{#view Ember.Link action="showEdit"}}Edit{{/view}}
-    {{#view Ember.Link action="destroyRecord"}}Destroy{{/view}}
-  {{/unless}}
+  <div class="commands">
+    {{#unless isEditing}}
+      {{#view Ember.Link action="showEdit"}}Edit{{/view}}
+      {{#view Ember.Link action="destroyRecord"}}Remove{{/view}}
+    {{/unless}}
+  </div>
 </td>
diff --git a/app/assets/stylesheets/contacts.css.scss b/app/assets/stylesheets/contacts.css.scss
@@ -4,11 +4,24 @@
   }
 }
 
-td.commands {
-  text-align: left;
-  padding-left: 5px;
-}
+table {
+  margin-bottom: 15px;
+
+  th, td {
+    text-align: left;
+    padding: 2px 8px 2px 0;
+  }
 
-div.commands {
-  margin-top: 10px;
+  input[type='text'] {
+    width: 80px;
+  }
+
+  td.data {
+    width: 300px;
+
+    div.commands {
+      float: right;
+      margin-right: 20px;
+    }
+  }
 }