responsive design

qdl159 · Mar 4, 2016 · 144eeff · 144eeff
1 parent 2a2f282
commit 144eeff
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 9 deletions.
diff --git a/public/chat/chatController.js b/public/chat/chatController.js
@@ -147,7 +147,11 @@
         $scope.selectMojo = function(num) {
             $scope.inputMsg = ($scope.inputMsg || '') + '[#' + num + ']';
             $('#msgAreadID').focus();
-        }
+        };
+
+        $scope.toggle = function(show) {
+            $scope.mojoShow = show;
+        };
 
     }
 

diff --git a/public/directives/line.js b/public/directives/line.js
@@ -6,7 +6,7 @@
     // Uncomment to style it like Apple Watch
     var opts = {
         chart: {
-            type: 'line',
+            type: 'column',
             options3d: {
                 enabled: false,
                 alpha: 10,

diff --git a/public/stylesheets/chat.css b/public/stylesheets/chat.css
@@ -217,6 +217,8 @@ form > div {
     background: #fff;
     border-radius: 10px;
     opacity: 0.7;
+    max-width: 60%;
+    word-wrap: break-word;
 }
 
 /*.message > p:before {
@@ -286,7 +288,7 @@ form > div {
 
 .message.me > p:after {
     bottom: -10px;
-    left: calc(100%- 25px);
+    left: calc(100% - 25px);
     right: auto;
 }
 
@@ -701,3 +703,7 @@ input[readonly] {
 .unactive {
   text-decoration: underline;  
 }
+
+.container-fluid {
+  width: 100%;
+}
diff --git a/public/template/chatroom/room.html b/public/template/chatroom/room.html
@@ -29,7 +29,7 @@
         <div class="col-md-10 row-xs-12" ng-controller="ChatWindowCtrl">
             <!-- Panel -->
             <div class="row-xs-11 realContainer">
-                <div class="mogiContainer">
+                <div class="mogiContainer" ng-show="mojoShow">
                     <ul ng-repeat="(n, rows) in mogs">
                         <li ng-repeat="mogNum in rows" ng-click="selectMojo(mogNum)"><img src="/resource/expression/{{mogNum}}.gif"/></li>
                     </ul>
@@ -50,18 +50,18 @@
                 <div class="col-md-8 col-md-push-4 row-xs-12">
                     <!-- Input Box -->
                     <div class="row row-xs-12">
-                        <div class="col-md-10 row-xs-12">
+                        <div class="col-md-10 col-xs-10 row-xs-12">
                             <!-- <input type="text" class="form-control row-xs-12 rightbottom"> -->
                             <input type="text" id="msgAreadID" class="form-control" placeholder="What's in your mind ?" ng-model="inputMsg" ng-keydown="$event.which === 13 && sendMsg(inputMsg)">
                         </div>
-                        <div class="col-md-1 row-xs-12">
+                        <div class="col-md-1 col-xs-1 row-xs-12">
                             <div class="row-xs-12">
-                                <span class="glyphicon glyphicon-plus center close">
+                                <span class="glyphicon glyphicon-plus center close" ng-click="toggle(!mojoShow)">
                                 </span>
                             </div>
 
                         </div>
-                        <div class="col-md-1 row-xs-12">
+                        <div class="col-md-1 col-xs-1 row-xs-12">
                             <div class="row-xs-12" >
                                 <span class="glyphicon glyphicon-ok center close" aria-hidden="true" ng-click="sendMsg(inputMsg)"  >
                                 </span>

diff --git a/public/welcome.html b/public/welcome.html
@@ -32,7 +32,7 @@
 			h1 {
 				font-family: 'Lato', sans-serif;
 				height: 100%;
-    font-weight: 400;
+    			font-weight: 400;
 				/* The html and body elements cannot have any padding or margin. */
 				margin: 0;
 				font-size: 14px;