spruce up chat

app/css/style.min.css

@@ -6765,6 +6765,13 @@ header .intro-text {
     padding-top: 100px;
     padding-bottom: 50px;
 }
+#room_users {
+  margin-top: 10px;
+  border-top: 1px solid #cecece;
+  padding-top: 10px;
+}
+
+
 .vertical-alignment-helper {
     display:table;
     height: 100%;

app/index.html

@@ -93,12 +93,14 @@
             <!-- END Player -->
 
    			<!-- START Playlist -->
-      		<div class="scrollable-list">
-               <ul class="list-group">
-      				<div class="recent"></div>
-      			</ul>
+            <div class="panel panel-default">
+         		<div class="scrollable-list">
+                  <ul class="list-group">
+         				<div class="recent"></div>
+         			</ul>
+               </div>
+               <h5 class="cm-type">Last 100 Tracks:</h5>
             </div>
-            <h5 class="cm-type"><em>Last 100 Tracks:</em></h5>
             <!-- END Playlist -->
          
          </section>
@@ -110,61 +112,57 @@
                
                <!-- START Room Tabs -->
                <div class="row-fluid">
-                   <div class="span12">
-                       <ul id="rooms_tabs" class="nav nav-tabs">
-                           <li class="dropdown">
-                               <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th" aria-hidden="true"></span>&nbsp;Options&nbsp;<b class="caret"></b></a>
-                               <ul class="dropdown-menu">
-                                   <li><a href="#modal_joinroom" data-toggle="modal"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>&nbsp;Join room</a></li>
-                                   <li><a id="b_leave_room" href="#"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;Leave room</a></li>
-                                   <li class="divider"></li>
-                                   <li><a href="#modal_setnick" data-toggle="modal"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Set nickname</a></li>
-                               </ul>
-                           </li>
-                           <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">MainRoom</a></li>
-                       </ul>
-                   </div>
+                    <ul id="rooms_tabs" class="nav nav-tabs">
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th" aria-hidden="true"></span>&nbsp;Options&nbsp;<b class="caret"></b></a>
+                            <ul class="dropdown-menu">
+                                <li><a href="#modal_joinroom" data-toggle="modal"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>&nbsp;Join room</a></li>
+                                <li><a id="b_leave_room" href="#"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;Leave room</a></li>
+                                <li class="divider"></li>
+                                <li><a href="#modal_setnick" data-toggle="modal"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Set nickname</a></li>
+                            </ul>
+                        </li>
+                        <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">MainRoom</a></li>
+                    </ul>
                </div>
                <!-- END Room Tabs -->
                
                <!-- START Rooms -->
                <div id="rooms" class="tab-content">
                    <div class="tab-pane active" id="MainRoom">
-                       <div class="row-fluid">
-                           <div class="span12 well">
+                      <div class="well">
+                           <div class="row-fluid">
                                <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
                                    <span class="label label-danger">Radio-bot</span>&nbsp;&nbsp;Welcome to the Daveo Radio!<br/>
                                </div>
-                           </div>
-                       </div>
-                       <div class="row-fluid">
-                           <div id="room_users" class="span12">
-                               <span class="badge badge-inverse">Radio-bot</span>
+                           </div>  
+                           <div class="row-fluid">
+                              <div id="room_users">
+                                  <span class="label label-success">online</span> <span class="label label-danger">Radio-bot</span>
+                              </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Rooms -->
+               
+
 
                 <!-- START message -->
-                <div class="row">
-                    <div class="span12"> 
-                        <div class="navbar">
-                            <div class="navbar-inner">
-                                <form class="navbar-form">
-                                    <input id="message_text" type="text" class="form-control">
-                                       <button id="b_send_message" class="btn btn-primary"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Post</button>
-                                    </input>
-                                 </form>
-                                    <button id="set_nick" class="btn btn-success" data-toggle="modal" data-target="#modal_setnick"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Set Nick</button>
-                                
-                            </div>
+                <div class="row-fluid">
+                    <form class="form-inline">
+                       <div class="input-group">
+                          <input id="message_text" class="form-control" type="text" placeholder="What say you?" >
+                           <span class="input-group-btn">
+                              <button id="b_send_message" class="btn btn-primary"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Post</button>
+                           </span>
                         </div>
-                    </div>
+                     </form>
+                     <!--<button id="set_nick" class="btn btn-success" data-toggle="modal" data-target="#modal_setnick"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Set Nick</button>-->
                 </div>
                 <!-- END message -->
-             
-             </div>
+            </div>
+
              
             <!-- START Modal -->      
             <div id="modal_joinroom" class="modal fade">
@@ -180,7 +178,7 @@
                              <p><small>&nbsp;Room will be created if it doesn't exist</small></p>
                          </div>
                          <div class="modal-footer">
-                             <a id="b_join_room" href="#" class="btn btn-success">Create Room</a>
+                             <a id="b_join_room" href="#" class="btn btn-success">Join Room</a>
                          </div>
                      </div>
                   </div>

app/js/radio.min.js

@@ -412,4 +412,13 @@ function radioTitle() {
 $(document).ready(function () {
     //setTimeout(function () {radioTitle();}, 2000);
     //setInterval(function () {radioTitle();}, 30000); // update every 30 seconds
-});
+});
+
+$(function() {
+    var randomColor = Math.floor(Math.random()*16777215).toString(16);
+    $("body").css({ backgroundColor: '#' + randomColor });
+    $("span#user-label").css({ backgroundColor: '#' + randomColor });
+    $("#colorcode").text("#" + randomColor);
+});
+
+

app/js/templates/message.handlebars

@@ -1,3 +1,3 @@
 <!-- Message -->
-<span class="label label-success">{{username}}</span>&nbsp;&nbsp;{{msg}}<br/>
+<span class="label label-default" id="user-label">{{username}}</span>&nbsp;&nbsp;{{msg}}<br/>
 <!-- End Message -->

app/js/templates/room.handlebars

@@ -1,21 +1,16 @@
 <!-- Room -->
 <div class="tab-pane" id="{{room}}">
-    <div class="row-fluid">
-        <div class="span12 well">
-            <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
-                <span class="label label-danger">Radio-bot</span>&nbsp;&nbsp;New Room Created<br/>
-            </div>
-        </div>
-    </div>
-    <div class="row-fluid">
-        <div class="span12">
-            <p>online:</p>
-        </div>
-    </div>
-    <div class="row-fluid">
-        <div id="room_users" class="span12">
-            <span class="badge badge-inverse">Radio-bot</span>
-        </div>
-    </div>
+   <div class="well">
+      <div class="row-fluid">
+         <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
+            <span class="label label-danger">Radio-bot</span>&nbsp;&nbsp;New Room Created<br/>
+         </div>
+      </div>
+      <div class="row-fluid">
+         <div id="room_users">
+            <span class="label label-success">online</span> <span class="label label-danger">Radio-bot</span>
+         </div>
+      </div>
+   </div>
 </div>
 <!-- End Room -->

app/js/templates/user.handlebars

@@ -1,3 +1,3 @@
 <!-- User -->
-<span class="badge badge-inverse" id="{{id}}">{{username}}</span>
+<span class="label label-default" id="{{id}}">{{username}}</span>
 <!-- End User -->

src/css/main.css

@@ -4,6 +4,13 @@ header .intro-text {
     padding-top: 100px;
     padding-bottom: 50px;
 }
+#room_users {
+  margin-top: 10px;
+  border-top: 1px solid #cecece;
+  padding-top: 10px;
+}
+
+
 .vertical-alignment-helper {
     display:table;
     height: 100%;

src/index.html

@@ -93,12 +93,14 @@
             <!-- END Player -->
 
    			<!-- START Playlist -->
-      		<div class="scrollable-list">
-               <ul class="list-group">
-      				<div class="recent"></div>
-      			</ul>
+            <div class="panel panel-default">
+         		<div class="scrollable-list">
+                  <ul class="list-group">
+         				<div class="recent"></div>
+         			</ul>
+               </div>
+               <h5 class="cm-type">Last 100 Tracks:</h5>
             </div>
-            <h5 class="cm-type"><em>Last 100 Tracks:</em></h5>
             <!-- END Playlist -->
          
          </section>
@@ -110,61 +112,57 @@
                
                <!-- START Room Tabs -->
                <div class="row-fluid">
-                   <div class="span12">
-                       <ul id="rooms_tabs" class="nav nav-tabs">
-                           <li class="dropdown">
-                               <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th" aria-hidden="true"></span>&nbsp;Options&nbsp;<b class="caret"></b></a>
-                               <ul class="dropdown-menu">
-                                   <li><a href="#modal_joinroom" data-toggle="modal"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>&nbsp;Join room</a></li>
-                                   <li><a id="b_leave_room" href="#"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;Leave room</a></li>
-                                   <li class="divider"></li>
-                                   <li><a href="#modal_setnick" data-toggle="modal"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Set nickname</a></li>
-                               </ul>
-                           </li>
-                           <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">MainRoom</a></li>
-                       </ul>
-                   </div>
+                    <ul id="rooms_tabs" class="nav nav-tabs">
+                        <li class="dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th" aria-hidden="true"></span>&nbsp;Options&nbsp;<b class="caret"></b></a>
+                            <ul class="dropdown-menu">
+                                <li><a href="#modal_joinroom" data-toggle="modal"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>&nbsp;Join room</a></li>
+                                <li><a id="b_leave_room" href="#"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;Leave room</a></li>
+                                <li class="divider"></li>
+                                <li><a href="#modal_setnick" data-toggle="modal"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Set nickname</a></li>
+                            </ul>
+                        </li>
+                        <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">MainRoom</a></li>
+                    </ul>
                </div>
                <!-- END Room Tabs -->
                
                <!-- START Rooms -->
                <div id="rooms" class="tab-content">
                    <div class="tab-pane active" id="MainRoom">
-                       <div class="row-fluid">
-                           <div class="span12 well">
+                      <div class="well">
+                           <div class="row-fluid">
                                <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
                                    <span class="label label-danger">Radio-bot</span>&nbsp;&nbsp;Welcome to the Daveo Radio!<br/>
                                </div>
-                           </div>
-                       </div>
-                       <div class="row-fluid">
-                           <div id="room_users" class="span12">
-                               <span class="badge badge-inverse">Radio-bot</span>
+                           </div>  
+                           <div class="row-fluid">
+                              <div id="room_users">
+                                  <span class="label label-success">online</span> <span class="label label-danger">Radio-bot</span>
+                              </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Rooms -->
+               
+
 
                 <!-- START message -->
-                <div class="row">
-                    <div class="span12"> 
-                        <div class="navbar">
-                            <div class="navbar-inner">
-                                <form class="navbar-form">
-                                    <input id="message_text" type="text" class="form-control">
-                                       <button id="b_send_message" class="btn btn-primary"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Post</button>
-                                    </input>
-                                 </form>
-                                    <button id="set_nick" class="btn btn-success" data-toggle="modal" data-target="#modal_setnick"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Set Nick</button>
-                                
-                            </div>
+                <div class="row-fluid">
+                    <form class="form-inline">
+                       <div class="input-group">
+                          <input id="message_text" class="form-control" type="text" placeholder="What say you?" >
+                           <span class="input-group-btn">
+                              <button id="b_send_message" class="btn btn-primary"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Post</button>
+                           </span>
                         </div>
-                    </div>
+                     </form>
+                     <!--<button id="set_nick" class="btn btn-success" data-toggle="modal" data-target="#modal_setnick"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Set Nick</button>-->
                 </div>
                 <!-- END message -->
-             
-             </div>
+            </div>
+
              
             <!-- START Modal -->      
             <div id="modal_joinroom" class="modal fade">
@@ -180,7 +178,7 @@
                              <p><small>&nbsp;Room will be created if it doesn't exist</small></p>
                          </div>
                          <div class="modal-footer">
-                             <a id="b_join_room" href="#" class="btn btn-success">Create Room</a>
+                             <a id="b_join_room" href="#" class="btn btn-success">Join Room</a>
                          </div>
                      </div>
                   </div>

src/js/radio.js

@@ -110,4 +110,13 @@ function radioTitle() {
 $(document).ready(function () {
     //setTimeout(function () {radioTitle();}, 2000);
     //setInterval(function () {radioTitle();}, 30000); // update every 30 seconds
-});
+});
+
+$(function() {
+    var randomColor = Math.floor(Math.random()*16777215).toString(16);
+    $("body").css({ backgroundColor: '#' + randomColor });
+    $("span#user-label").css({ backgroundColor: '#' + randomColor });
+    $("#colorcode").text("#" + randomColor);
+});
+
+

src/js/templates/message.handlebars

@@ -1,3 +1,3 @@
 <!-- Message -->
-<span class="label label-success">{{username}}</span>&nbsp;&nbsp;{{msg}}<br/>
+<span class="label label-default" id="user-label">{{username}}</span>&nbsp;&nbsp;{{msg}}<br/>
 <!-- End Message -->

src/js/templates/room.handlebars

@@ -1,21 +1,16 @@
 <!-- Room -->
 <div class="tab-pane" id="{{room}}">
-    <div class="row-fluid">
-        <div class="span12 well">
-            <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
-                <span class="label label-danger">Radio-bot</span>&nbsp;&nbsp;New Room Created<br/>
-            </div>
-        </div>
-    </div>
-    <div class="row-fluid">
-        <div class="span12">
-            <p>online:</p>
-        </div>
-    </div>
-    <div class="row-fluid">
-        <div id="room_users" class="span12">
-            <span class="badge badge-inverse">Radio-bot</span>
-        </div>
-    </div>
+   <div class="well">
+      <div class="row-fluid">
+         <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
+            <span class="label label-danger">Radio-bot</span>&nbsp;&nbsp;New Room Created<br/>
+         </div>
+      </div>
+      <div class="row-fluid">
+         <div id="room_users">
+            <span class="label label-success">online</span> <span class="label label-danger">Radio-bot</span>
+         </div>
+      </div>
+   </div>
 </div>
 <!-- End Room -->

src/js/templates/user.handlebars

@@ -1,3 +1,3 @@
 <!-- User -->
-<span class="badge badge-inverse" id="{{id}}">{{username}}</span>
+<span class="label label-default" id="{{id}}">{{username}}</span>
 <!-- End User -->