Style, baby!

diff --git a/webcit-ng/static/css/webcit.css b/webcit-ng/static/css/webcit.css
index 79c51ee83079246430ac9cf92f6bd5508cd505df..1bea8139baff3987a090ac1202c0527b17c8ddd5 100644 (file)
--- a/webcit-ng/static/css/webcit.css
+++ b/webcit-ng/static/css/webcit.css
@@ -7,3 +7,19 @@ html,body,h1,h2,h3,h4,h5
 {
        font-family: verdana, sans-serif
 }
+
+div.ctdl-msg-wrapper
+{
+       background-color: white;
+       margin-left: 2px;
+       margin-top: 4px;
+       margin-bottom: 4px;
+       margin-right: 2px;
+       padding: 4px;           /* inside the box */
+}
+
+div.ctdl-avatar
+{
+       float: left;
+       padding-right: 2px;
+}

diff --git a/webcit-ng/static/index.html b/webcit-ng/static/index.html
index cccd622af8919216399948b783095208641ef55c..617d12bfb0e34f3d9d8ff08a4669915cc15b1b0e 100644 (file)
--- a/webcit-ng/static/index.html
+++ b/webcit-ng/static/index.html
@@ -60,9 +60,7 @@
 
 <!-- MAIN PAGE CONTENT DIV -->
 <div id="ctdl-main" class="w3-main" style="margin-left:300px;margin-top:43px;">
-
-die in a car fire
-
+Loading...
 <!-- End page content -->
 </div>
 

diff --git a/webcit-ng/static/js/views.js b/webcit-ng/static/js/views.js
index e0f1a49af1312649af322c1de59b304550baa438..7945035cbccff5645e091b933ce25e44ff7c76c1 100644 (file)
--- a/webcit-ng/static/js/views.js
+++ b/webcit-ng/static/js/views.js
@@ -165,8 +165,8 @@ function render_one(div, msgnum, view)
                                msg = JSON.parse(this.responseText);
 
                                document.getElementById(div).innerHTML =
-                               "<div>"                                                         // begin message wrapper
-                               + "<div style=\"float:left;padding-right:2px\">"                // begin avatar FIXME move to a stylesheet
+                                 "<div class=\"ctdl-msg-wrapper\">"                            // begin message wrapper
+                               + "<div class=\"ctdl-avatar\">"                                 // begin avatar
                                + "<i class=\"fa fa-user-circle fa-2x\"></i> "                  // FIXME temporary avatar
                                + "</div>"                                                      // end avatar
                                + "<div>"                                                       // begin content