improved chat slideout / content push-pull

app/client/scripts/events.js

@@ -1357,12 +1357,12 @@ Template.room.events({
         Session.set("songResults", []);
         Session.set("YTImportQueue", [])
     },
-    "click #chat-tab": function () {
-        $("#chat-tab").removeClass("unread-messages");
-    },
     "click #global-chat-tab": function () {
         $("#global-chat-tab").removeClass("unread-messages");
     },
+    "click .header-collapse": function(){
+        console.log("Hello");
+    },
     "click #sync": function () {
         if (Session.get("currentSong") !== undefined) {
             var room = Rooms.findOne({type: Session.get("type")});

app/client/scripts/onCreated.js

@@ -341,6 +341,22 @@ Template.room.onCreated(function () {
             }, 500)
         }
     });
+    Meteor.setTimeout(function(){
+        $("#chat-slideout").on("click", function(){
+            var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";
+            $(".chat-ul").scrollTop(1000000);
+            $(".container").css("margin-right", "370px")
+            if($("#slide-out").css("right") === "0px"){
+                $(".container").css("margin-right", marginRightWidth);
+            }
+        });
+        $("body").on("click", function(){
+            var marginRightWidth = ($(document).width() - $(".container").width()) / 2 + "px";
+            if($("#slide-out").css("right") === "0px"){
+                $(".container").css("margin-right", marginRightWidth);
+            }
+        })
+    }, 1000);
 });
 
 Template.settings.onCreated(function() {

app/client/stylesheets/app.css

@@ -42,6 +42,10 @@ hr{
     margin: 0;
 }
 
+.container{
+    transition: all 0.1s;
+}
+
 .brand-logo {
     margin-left: 10px;
     font-weight: 300 !important;
@@ -287,8 +291,25 @@ hr{
     vertical-align: middle;
 }
 
+#sidenav-overlay{
+    background-color: initial !important;
+    z-index: 0 !important;
+}
+
+.room-slideout{
+    top: 64px;
+    height: 100%;
+}
+
+.room-slideout h5{
+    text-align: center;
+    background-color: #028A77 !important;
+    margin: 0;
+    color: white;
+}
+
 .chat-ul{
-    height: 79%;
+    height: 70%;
     overflow-y: scroll;
 }
 

app/client/templates/room.html

@@ -14,7 +14,7 @@
                     <ul class="right hide-on-med-and-down">
                         <li><a href="#"><i class="material-icons">queue_music</i></a></li>
                         <!-- <li><a href="#" data-activates="chat" class="dropdown-button"><i class="material-icons">chat</i></a></li> -->
-                        <li><a href="#" data-activates="slide-out" class="header-collapse"><i class="material-icons">chat</i></a></li>
+                        <li><a href="#" id="chat-slideout" data-activates="slide-out" class="header-collapse"><i class="material-icons">chat</i></a></li>
                     </ul>
                     <div id='chat' class='dropdown-content right'>
                         <ul id="chat-ul">
@@ -223,7 +223,8 @@
                 </div>
             </div>
         </main>
-        <div id="slide-out" class="side-nav">
+        <div id="slide-out" class="side-nav room-slideout">
+            <h5>Chat</h5>
             <ul class="chat-ul">
                 {{#each globalChat}}
                     {{#emojione}}

app/server/server.js

@@ -770,8 +770,6 @@ Meteor.methods({
                             rawrank: rawrank,
                             rank: "[A]",
                             message: message,
-                            curUserMention: isCurUserMentioned,
-                            isMentioned: mentionUsername,
                             time: time,
                             username: username
                         });