participants list and options menu

labs/meteor-client/app/client/stylesheets/common/chat.less

@@ -17,6 +17,9 @@
   overflow: hidden;
   -webkit-flex: 1 6 25%;
   flex: 1 6 25%;
+  padding-left: 0px;
+  padding-right: 0px;
+  width: 100%;
 }
 
 .chat {
@@ -36,13 +39,6 @@
   }
 }
 
-#chatbar-contents {
-  background-color: extract(@white, 1);
-  padding-left: 0px;
-  padding-right: 0px;
-  width: 100%;
-}
-
 #chatbody {
   height: 90%;
   overflow-y: scroll;
@@ -131,7 +127,8 @@
 }
 
 .optionsBar {
-  height: 100%;
+  height: 85%;
+  overflow-y: auto;
   padding-left: 15px;
   padding-top: 15px;
 }
@@ -144,14 +141,17 @@
 }
 
 .private-chat-user-box {
-  border: left 1px grey;
-  height: 60%;
+  border-left: 1px solid grey;
+  height: 300px;
   padding: 5px;
   width: 90%; 
 }
 
 .private-chat-user-list {
   font-size: 12px;
+  height: 100%;
+  overflow-y: scroll;
+  overflow-x: scroll;
   :hover {
     background: extract(@azure, 2);
     font-size: 14px;

labs/meteor-client/app/client/stylesheets/common/style.less

@@ -165,11 +165,6 @@ body {
   color: green;
 }
 
-.ScrollableWindow {
-  height: 100%;
-  overflow-y: scroll;
-}
-
 .tab {
   height: 40px;
 }

labs/meteor-client/app/client/stylesheets/common/users.less

@@ -5,7 +5,6 @@
 }
 
 #usericons {
-  margin-left: 10px;
   float: right;
   span {
     margin-left: 3px;
@@ -27,7 +26,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: 70%;
+  width: 60%;
 }
 
 #users {

labs/meteor-client/app/client/stylesheets/landscape/users.less

@@ -6,6 +6,7 @@
   #users {
     -webkit-order: 1;
     order: 1;
+    min-width: 320px;
   }
 
   #user-contents {

labs/meteor-client/app/client/stylesheets/portrait/chat.less

@@ -34,6 +34,11 @@
         font-size: 25px;
       }
     }
+
+    .userlist {
+      font-size: 30px;
+      padding-left: 10px;
+    }
   }
 
   .closeTab {

labs/meteor-client/app/client/views/chat/chat_bar.html

@@ -1,6 +1,5 @@
 <template name="chatbar">
     <div id="{{id}}" {{visibility name}} class="component">
-        <div id="chatbar-contents">
         <h3 class="title gradientBar">
         <span class="glyphicon glyphicon-comment"></span>
         {{title}}
@@ -25,7 +24,6 @@
             {{> optionsBar}}
         {{/if}}
     </div>
-    </div>
 </template>
 
 <template name="chatInput">
@@ -81,21 +79,22 @@
 		{{#if thereArePeopletoChatWith}} <!-- There are people we can chat with, display the user list -->
 			<p>Select a person to chat with privately</p>
 			<div class="private-chat-user-box" rel="tooltip" data-placement="top" title="Select a participant to open a private chat">
-				{{#Layout template="scrollWindow" id="privateChatUserScrollWindow"}}
-					{{#contentFor region="scrollContents"}}
                 <div class="private-chat-user-list">
                     {{#each getUsersInMeeting}}
-                            <div class="private-chat-user-entry">{{#unless isCurrentUser userId}}{{user.name}}{{/unless}}</div>
+                        <div class="private-chat-user-entry">
+                            {{#unless isCurrentUser userId}}
+                                {{user.name}}
+                            {{/unless}}
+                        </div>
                     {{/each}}
                 </div>
-					{{/contentFor}}
-				{{/Layout}}
             </div>
 		{{else}}
 			<p>There are no participants to chat with right now.</p>
 		{{/if}}
 		<br/>
 		{{> chatOptions}}
+        <br/><br/><br/>
 	</div>
 </template>
 

labs/meteor-client/app/client/views/sharedTemplates.html

@@ -1,10 +1,3 @@
-<template name="scrollWindow">
-    {{> yield}}
-    <div class="ScrollableWindow" id="{{id}}">
-        {{> yield region="scrollContents"}}
-    </div>
-</template>
-
 <template name="makeButton">
    <button type="submit" id="{{id}}" class="{{btn_class}} btn" {{isDisabled}} rel="{{rel}}" data-placement="{{data_placement}}" title="{{title}}">
       <i class="{{i_class}}"></i>

labs/meteor-client/app/client/views/users/users_list.html

@@ -3,17 +3,13 @@
 		<h3 class="title gradientBar"><span class="glyphicon glyphicon-user"></span> Participants: {{getMeetingSize}} User(s)</h3>
 
 		<div id="user-contents">
-			{{#Layout template="scrollWindow" id="publicUserScrollWindow"}}
-				{{#contentFor region="scrollContents"}}
-					<div class="userlist">
+			<div class="userlist ScrollableWindowY">
 				{{#each getUsersInMeeting}}
 					<div id="content">
 						{{>userItem}}
 					</div>
 				{{/each}}
 			</div>
-				{{/contentFor}}
-			{{/Layout}}
 		</div>
 	</div>
 </template>