Merge branch 'MDL-56025-master' of git://github.com/damyon/moodle

message/amd/src/message_area_messages.js

@@ -93,6 +93,11 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/cust
                 CustomEvents.events.enter,
             ]);
 
+            // We have a responsive media query based on height that reduces this size on screens shorter than 670.
+            if ($(window).height() <= 670) {
+                MESSAGES_AREA_DEFAULT_HEIGHT = 400;
+            }
+
             AutoRows.init(this.messageArea.node);
 
             this.messageArea.onCustomEvent(Events.CONVERSATIONSELECTED, this._viewMessages.bind(this));

theme/boost/scss/moodle/message.scss

@@ -53,6 +53,9 @@
         .contacts-area {
             border-right: 1px solid #e3e3e3;
             height: 600px;
+            @media (max-height: 670px) {
+                height: 500px;
+            }
             width: 280px;
             display: inline-block;
             box-sizing: border-box;
@@ -148,6 +151,9 @@
 
             .contacts {
                 height: 500px;
+                @media (max-height: 670px) {
+                    height: 400px;
+                }
                 overflow-y: auto;
                 -webkit-overflow-scrolling: touch;
 
@@ -284,6 +290,9 @@
         .messages-area {
             width: calc(100% - 280px);
             height: 600px;
+            @media (max-height: 670px) {
+                height: 500px;
+            }
             box-sizing: border-box;
             margin: 0;
             position: relative;
@@ -324,6 +333,9 @@
                 padding: 30px;
                 font-size: 16px;
                 height: 600px;
+                @media (max-height: 670px) {
+                    height: 500px;
+                }
                 box-sizing: border-box;
                 overflow-y: auto;
                 -webkit-overflow-scrolling: touch;
@@ -440,6 +452,9 @@
 
             .messages {
                 height: 500px;
+                @media (max-height: 670px) {
+                    height: 400px;
+                }
                 overflow-y: auto;
                 overflow-x: hidden;
                 -webkit-overflow-scrolling: touch;
@@ -851,6 +866,9 @@
 
 .notification-area {
     height: 600px;
+    @media (max-height: 670px) {
+        height: 500px;
+    }
     box-sizing: border-box;
     border-radius: 4px;
     margin-bottom: 30px;
@@ -950,6 +968,9 @@
 
         .content {
             height: 500px;
+            @media (max-height: 670px) {
+                height: 400px;
+            }
             box-sizing: border-box;
             overflow: auto;
             -webkit-overflow-scrolling: touch;
@@ -992,6 +1013,9 @@
             position: relative;
             overflow: hidden;
             height: 600px;
+            @media (max-height: 670px) {
+                height: 500px;
+            }
 
             .messages-area {
                 .messages-header {

theme/bootstrapbase/less/moodle/message.less

@@ -50,6 +50,9 @@
         .contacts-area {
             border-right: 1px solid #e3e3e3;
             height: 600px;
+            @media (max-height: 670px) {
+                height: 500px;
+            }
             width: 280px;
             display: inline-block;
             box-sizing: border-box;
@@ -140,6 +143,9 @@
 
             .contacts {
                 height: 500px;
+                @media (max-height: 670px) {
+                    height: 400px;
+                }
                 overflow-y: auto;
                 -webkit-overflow-scrolling: touch;
 
@@ -276,6 +282,9 @@
         .messages-area {
             width: ~"calc(100% - 280px)";
             height: 600px;
+            @media (max-height: 670px) {
+                height: 500px;
+            }
             box-sizing: border-box;
             margin: 0;
             position: relative;
@@ -316,6 +325,9 @@
                 padding: 30px;
                 font-size: 16px;
                 height: 600px;
+                @media (max-height: 670px) {
+                    height: 500px;
+                }
                 box-sizing: border-box;
                 overflow-y: auto;
                 -webkit-overflow-scrolling: touch;
@@ -432,6 +444,9 @@
 
             .messages {
                 height: 500px;
+                @media (max-height: 670px) {
+                    height: 400px;
+                }
                 overflow-y: auto;
                 overflow-x: hidden;
                 -webkit-overflow-scrolling: touch;
@@ -837,6 +852,9 @@
 
 .notification-area {
     height: 600px;
+    @media (max-height: 670px) {
+        height: 500px;
+    }
     box-sizing: border-box;
     border-radius: 4px;
     margin-bottom: 30px;
@@ -936,6 +954,9 @@
 
         .content {
             height: 500px;
+            @media (max-height: 670px) {
+                height: 400px;
+            }
             box-sizing: border-box;
             overflow: auto;
             -webkit-overflow-scrolling: touch;
@@ -978,6 +999,9 @@
             position: relative;
             overflow: hidden;
             height: 600px;
+            @media (max-height: 670px) {
+                height: 500px;
+            }
 
             .messages-area {
                 .messages-header {

theme/bootstrapbase/style/moodle.css

@@ -5842,6 +5842,11 @@ a.ygtvspacer:hover {
   display: inline-block;
   box-sizing: border-box;
 }
+@media (max-height: 670px) {
+  .messaging-area-container .messaging-area .contacts-area {
+    height: 500px;
+  }
+}
 .messaging-area-container .messaging-area .contacts-area.searchfilter .searchtextarea {
   height: 80px;
 }
@@ -5911,6 +5916,11 @@ a.ygtvspacer:hover {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
+@media (max-height: 670px) {
+  .messaging-area-container .messaging-area .contacts-area .contacts {
+    height: 400px;
+  }
+}
 .messaging-area-container .messaging-area .contacts-area .contacts .nocontacts {
   padding-top: 20px;
   text-align: center;
@@ -6038,6 +6048,11 @@ a.ygtvspacer:hover {
   position: relative;
   float: right;
 }
+@media (max-height: 670px) {
+  .messaging-area-container .messaging-area .messages-area {
+    height: 500px;
+  }
+}
 .messaging-area-container .messaging-area .messages-area .btn-container {
   position: absolute;
   top: 0;
@@ -6071,6 +6086,11 @@ a.ygtvspacer:hover {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
+@media (max-height: 670px) {
+  .messaging-area-container .messaging-area .messages-area .profile {
+    height: 500px;
+  }
+}
 .messaging-area-container .messaging-area .messages-area .profile .user-container {
   height: 100px;
 }
@@ -6167,6 +6187,11 @@ a.ygtvspacer:hover {
   box-sizing: border-box;
   padding: 20px;
 }
+@media (max-height: 670px) {
+  .messaging-area-container .messaging-area .messages-area .messages {
+    height: 400px;
+  }
+}
 .messaging-area-container .messaging-area .messages-area .messages .blocktime {
   clear: both;
   text-align: center;
@@ -6455,6 +6480,11 @@ a.ygtvspacer:hover {
   margin-bottom: 30px;
   border: 1px solid #e3e3e3;
 }
+@media (max-height: 670px) {
+  .notification-area {
+    height: 500px;
+  }
+}
 .notification-area .control-area {
   box-sizing: border-box;
   display: inline-block;
@@ -6538,6 +6568,11 @@ a.ygtvspacer:hover {
   -webkit-overflow-scrolling: touch;
   padding: 15px;
 }
+@media (max-height: 670px) {
+  .notification-area .content-area .content {
+    height: 400px;
+  }
+}
 .notification-area .content-area .content:empty {
   display: none;
 }
@@ -6698,6 +6733,11 @@ a.ygtvspacer:hover {
     transition: right 0.25s;
   }
 }
+@media (max-width: 979px) and (max-height: 670px) {
+  .messaging-area-container .messaging-area {
+    height: 500px;
+  }
+}
 @media (max-width: 480px) {
   .messaging-area-container .messaging-area .messages-area.editing .messages-header {
     height: 80px;