Better views more, gearing up for editing

twilio/app/assets/stylesheets/message.css.css

@@ -0,0 +1,6 @@
+.message {
+  padding: 0px;
+  margin: 15px; }
+
+.message .panel-heading {
+  font-weight: bold; }

twilio/app/assets/stylesheets/message.css.scss

@@ -1,3 +1,12 @@
 // Place all the styles related to the Message controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+.message {
+    padding: 0px;
+    margin: 15px;
+}
+
+.message .panel-heading {
+    font-weight: bold;
+}

twilio/app/views/home/index.html.haml

@@ -5,12 +5,24 @@
 
 
 %div{"ng-app" => "messages"}
-  %div.messages{"ng-controller" => "messagesController as messages"}
-    %ul.message{"ng-repeat" => "message in messages.allMessages"}
-      %li {{message.title}}
-      %li {{message.body}}
-      %li {{message.secret}}
-      %li {{message.created_at | date:"short"}}
-      %li {{message.updated_at | date:"short"}}
-      %ul.call_logs{"ng-repeat" => "log in message.call_logs"}
-        %li {{log.number}}: {{log.created_at | date:"short"}}
+  .messages{"ng-controller" => "messagesController as messages"}
+    .message.panel.panel-default.col-md-4{"ng-repeat" => "message in messages.allMessages"}
+      .panel-heading.text-center <input class="form-control" type="text" ng-model="message.title" />
+      .panel-body
+        %form
+          .form-group
+            %label Message Body <input class="form-control" type="text" ng-model="message.body" />
+          .form-group
+            %label Message Secret <input class="form-control" type="text" ng-model="message.secret"/>
+          .form-group
+            %label Created
+            {{message.created_at | date:"short"}}
+          .form-group
+            %label Last Updated
+            {{message.updated_at | date:"short"}}
+      .panel.panel-default
+        .panel-heading Call Logs
+        .panel-body
+          .panel.panel-default.call_log{"ng-repeat" => "log in message.call_logs"}
+            .panel-heading {{log.number}}
+            .panel-body {{log.created_at | date:"short"}}