merging in #1450

Author: rmisio

css/obBase.css

@@ -1058,13 +1058,20 @@ label.fieldItem {
   height: 100%;
   top: 0;
   left: 0;
-  right: 0;
-  /* use fadeIn and fadeOut to change opacity */
-  transition: opacity .05s cubic-bezier(0, 0, 0.2, 1);
+  transition: opacity .05s cubic-bezier(0, 0, 0.2, 1),
+              width 0.5s ease;
   padding-top: 25px;
   z-index: 1;
 }
 
+#ov1.chatLoaded .modal:not(.modal-cover-fullscreen) {
+  width: calc(100% - 45px);
+}
+
+#ov1.chatOpen .modal:not(.modal-cover-fullscreen) {
+  width: calc(100% - 230px);
+}
+
 .modal.modal-navOffset {
   top: 50px;
 }
@@ -1092,11 +1099,6 @@ label.fieldItem {
   height: 574px;
 }
 
-#ov1.chatOpen .modal-child {
-  right: 230px;
-}
-
-
 .modal.modal-navOffset .modal-child {
   margin-top: 25px;
 }
@@ -1495,6 +1497,10 @@ h5 {
   top: 50px;
 }
 
+.modal-cover-fullscreen.modal.modal-navOffset .modal-childMain {
+  top: 0;
+}
+
 .modal-childMain {
   border-radius: 3px;
   background-color: #327eb8;
@@ -3838,10 +3844,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   padding-top: 1px;
 }
 
-#ov1.chatOpen .spinner-with-logo {
-  left: calc(50% - 115.5px);
-}
-
 .spinnerWrapper {
   transition: opacity 1s;
 }
@@ -4689,10 +4691,6 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   transition: transform 0.5s ease;
 }
 
-#ov1.chatOpen .page-connect-modal .content {
-  transform: translateX(-115.5px);
-}
-
 .page-connect-modal .content .btn {
   float: none;
 }

index.html

@@ -44,7 +44,7 @@ <h2 class="ion-android-close custCol-text clickable"></h2>
   <div id="pageNav" class="bar navBar navBar-main custCol-secondary padding0"></div>
   <div id="appBar" class="top0 alignCenter custCol-secondary"></div>  
   <!-- the loading modal must be on top of the page nav or the reload button is hidden -->
-  <div id="loadingModal" class="modal modal-opaque js-loadingModal top0 hide">
+  <div id="loadingModal" class="modal modal-opaque modal-cover-fullscreen js-loadingModal hide">
     <div class="spinner-with-logo fullCentered">
       <i class="ion-android-sync spinner fontSize30 spinner-with-logo-icon"></i>
     </div>

js/start.js

@@ -406,6 +406,7 @@ var loadProfile = function(landingRoute, onboarded) {
               });
 
               $('#sideBar').html(app.chatVw.render().el);
+              $('html').addClass('chatLoaded');
 
               app.router = new router({userModel: user, userProfile: userProfile, socketView: newSocketView});
 

js/views/chatVw.js

@@ -204,7 +204,6 @@ module.exports = baseVw.extend({
     this.slideOut();
 
     // mark as read
-    // $.post(app.serverConfigs.getActive().getServerBaseUrl() + '/mark_chat_message_as_read', { guid: model.get('guid') });
     this.markConvoAsRead(model.get('guid'));
 
     // mark as read on chat head