refactor(style-issues): refactor my code as recommended during PR review

andela · Dec 14, 2016 · 8be40a6 · 8be40a6
1 parent 71ae9f7
commit 8be40a6
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 61 deletions.
diff --git a/app/views/includes/foot.jade b/app/views/includes/foot.jade
@@ -44,4 +44,3 @@ script(type='text/javascript', src='/socket.io/socket.io.js')
 //chat
 script(type='text/javascript', src='https://cdn.firebase.com/js/client/2.4.0/firebase.js')
 script(type='text/javascript', src='/js/services/chat.js')
-<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
diff --git a/public/css/style.css b/public/css/style.css
@@ -1274,32 +1274,26 @@
     z-index: 2000;
 }
 #chatbox {
-    text-align:left;
-    margin-bottom:25px;
-    padding-top:2px;
+    text-align: left;
+    margin-bottom: 25px;
+    padding-top: 2px;
     padding-right: 2px; 
-    padding-bottom:2px;
+    padding-bottom: 2px;
     padding-left: 2px;
-    background:#eeeeef;
-    height:300px;
-    width:280px;
+    background: #eeeeef;
+    height: 300px;
+    width: 280px;
     border:1px solid gray;
-    overflow:auto;
+    overflow: auto;
 }
 .chatinput {
-    margin-top: -10px;
+    margin-bottom: 1px;
     width: 280px !important;
 }
 
 .user {
      padding-top: 5px;
 }
-.header {
-     text-align: left !important;
-}
-.heads {
-     text-align: right !important;
-}
 .inner-addon { 
     position: relative; 
 }
@@ -1309,25 +1303,24 @@
   padding: 10px;
 }
 .right-addon .paper { 
-     right: 0px;
+     right: 0;
 }
 .right-addon input { 
      padding-right: 30px; 
 }
-margin: 0 0 0.2rem 0;
-  }
 
+margin: 0 0 0.2rem 0;
 
 /*chat box*/
 
 .col-md-2, .col-md-10{
     padding:0;
 }
 .chat-window{
-    bottom:0;
-    position:fixed;
-    float:right;
-    margin-left:10px;
+    bottom: 0;
+    position: fixed;
+    float: right;
+    margin-left: 10px;
 }
 .chat-window > div > .panel{
     border-radius: 5px 5px 0 0;
@@ -1339,8 +1332,8 @@ margin: 0 0 0.2rem 0;
   background: #e5e5e5;
   margin: 0;
   padding: 0 10px 10px;
-  max-height:300px;
-  overflow-x:hidden;
+  max-height: 300px;
+  overflow-x: hidden;
 }
 .top-bar {
   background: #666;
@@ -1350,19 +1343,19 @@ margin: 0 0 0.2rem 0;
   overflow: hidden;
 }
 .msg_receive{
-    padding-left:0;
-    margin-left:0;
+    padding-left: 0;
+    margin-left: 0;
 }
 .msg_sent{
-    padding-bottom:20px !important;
-    margin-right:0;
+    padding-bottom: 20px !important;
+    margin-right: 0;
 }
 .messages {
   background: white;
   padding: 10px;
   border-radius: 2px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  max-width:100%;
+  box-shadow: 0 1px 2px  #000000;
+  max-width: 100%;
 }
 .messages > p {
     font-size: 13px;
@@ -1386,8 +1379,8 @@ margin: 0 0 0.2rem 0;
     width: 0;
     height: 0;
     border: 5px solid #FFF;
-    border-left-color: rgba(0, 0, 0, 0);
-    border-bottom-color: rgba(0, 0, 0, 0);
+    border-left-color:  #000000;
+    border-bottom-color:  #000000;
 }
 
 .base_sent {
@@ -1404,7 +1397,7 @@ margin: 0 0 0.2rem 0;
     border: 5px solid white;
     border-right-color: transparent;
     border-top-color: transparent;
-    box-shadow: 1px 1px 2px rgba(black, 0.2); // not quite perfect but close
+    box-shadow: 1px 1px 2px #ffffff; // didn't find any color better
 }
 
 .msg_sent > time{
@@ -1429,31 +1422,23 @@ margin: 0 0 0.2rem 0;
 
 .msg_container_base::-webkit-scrollbar-thumb
 {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    -webkit-box-shadow: inset 0 0 6px #000000;
     background-color: #555;
 }
 
-.btn-group.dropup{
-    position:fixed;
-    left:0px;
-    bottom:0;
-}
 .avatar-image {
    bottom: 0;
-   max-width:300%;
-   max-height:300%;
+   max-width: 300%;
+   max-height: 300%;
 }
 .panel {
     height: 39px;
     margin-left: -5px;
     width: 280px;
     background: #a7b1c1;
-    margin-bottom: 0px;
+    margin-bottom: 0;
 }
 .minimize {
-    float:right;
+    float: right;
     cursor: pointer;
-}
-.chat-head {
-    text-align: center;
 }
diff --git a/public/js/services/chat.js b/public/js/services/chat.js
@@ -13,7 +13,7 @@ angular.module('mean.system')
         this.messageArray = [];
         this.enableListener = true;
         this.chatAvatar = null;
-        this.IsHidden = false;
+        this.isHidden = false;
         this.unreadMessageCount = 0;
       }
 
@@ -83,15 +83,15 @@ angular.module('mean.system')
       }
       showHide() {
       // If DIV is hidden it will be visible and vice versa.
-      if(!this.IsHidden){
+      if(!this.isHidden){
         this.unreadMessageCount = 0;
-        this.IsHidden = true;       
+        this.isHidden = true;       
       } else {
-        this.IsHidden = false;
+        this.isHidden = false;
       }
     }
     unreadMessage() {
-      if(!this.IsHidden) {
+      if(!this.isHidden) {
         this.unreadMessageCount += 1;
       }
       return this.unreadMessageCount;

diff --git a/public/views/chat.html b/public/views/chat.html
@@ -1,13 +1,13 @@
 <div class="wrapper">
     <div class="panel">
         <i class="fa fa-2x fa-comments-o" size="30" aria-hidden="true"></i>
-        <span ng-show= "chat.unreadMessageCount === 0" class="chat-head">Kissa Chat</span>
-        <span ng-hide= "chat.unreadMessageCount === 0" class="chat-head">
+        <span ng-show="chat.unreadMessageCount === 0" class="text-center">Kissa Chat</span>
+        <span ng-hide="chat.unreadMessageCount === 0" class="text-center">
             <span class="badge badge-danger">{{chat.unreadMessageCount}}</span>&nbsp;New&nbsp;Message</span>
-        <i class="fa fa-2x fa-chevron-up minimize" ng-click="chat.showHide()" ng-hide="chat.IsHidden" aria-hidden="true"></i>
-        <i class="fa fa-2x fa-chevron-down minimize" ng-click="chat.showHide()"  ng-show="chat.IsHidden" aria-hidden="true"></i>
+        <i class="fa fa-2x fa-chevron-up minimize" ng-click="chat.showHide()" ng-hide="chat.isHidden" aria-hidden="true"></i>
+        <i class="fa fa-2x fa-chevron-down minimize" ng-click="chat.showHide()" ng-show="chat.isHidden" aria-hidden="true"></i>
     </div>
-    <div ng-show="chat.IsHidden" id="chatbox">
+    <div ng-show="chat.isHidden" id="chatbox">
         <span ng-repeat="message in chat.messageArray">
             <span ng-if="chat.userName == message.senderName">
                 <span class="row msg_container base_sent">
@@ -37,8 +37,8 @@
     </div>
     </span>
     </span>
-    <span ng-if="chat.userName !== message.senderName" class="heads">
-          <div class="heads">
+    <span ng-if="chat.userName !== message.senderName" class="text-right">
+          <div class="text-right">
             <b>&nbsp;&nbsp;&nbsp;{{message.senderName}} </b> 
             <small class="text-muted">  {{message.time}}</small>
           </div>
@@ -47,7 +47,7 @@
     </span>
     </span>
 </div>
-<div ng-show="chat.IsHidden" class="chatinput">
+<div ng-show="chat.isHidden" class="chatinput">
     <div class="inner-addon right-addon">
         <i class="fa fa-smile-o paper" aria-hidden="true" style="cursor: pointer;"></i>
         <input name="usermsg" type="text" id="usermsg" class="form-control" placeholder="Enter Message" ng-model="chatMessage" ng-keypress="keyPressed($event)"

diff --git a/public/views/index.html b/public/views/index.html
@@ -80,7 +80,7 @@ <h1>Cards for Humanity</h1>
                             <p><h2>A Game for horrible people desperately trying to do good</h2></p>
                         </span>
                         <p>
-                            <a class="btn btn-danger btn-lg" href="/play" role="button">Play Game</a>
+                            <a class="btn btn-danger btn-lg" href="#" role="button">Play Game</a>
                         </p>
                     </div>
                 </div>