MDL-56938 messages: Images and videos display badly in messaging

Make sure they get minimum and maximum width so they don't overflow and don't appear tiny.
eSrem · Nov 21, 2016 · fce0f1c · fce0f1c
1 parent cd4a6b8
commit fce0f1c
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 0 deletions.
diff --git a/filter/mediaplugin/styles.css b/filter/mediaplugin/styles.css
@@ -6,6 +6,10 @@
     margin-top: 5px;
     margin-bottom: 5px;
     text-align: center;
+
+    /* Make videos as wide as possible without being wider than their containers */
+    width: 100vw;
+    max-width: 100%;
 }
 
 .mediaplugin > div {

diff --git a/theme/boost/scss/moodle/message.scss b/theme/boost/scss/moodle/message.scss
@@ -50,6 +50,10 @@
         border: 1px solid #e3e3e3;
         clear: both;
 
+        img {
+            max-width: 100%;
+        }
+
         .contacts-area {
             border-right: 1px solid #e3e3e3;
             height: 600px;

diff --git a/theme/bootstrapbase/less/moodle/message.less b/theme/bootstrapbase/less/moodle/message.less
@@ -47,6 +47,10 @@
         clear: both;
         border-radius: 4px;
 
+        img {
+            max-width: 100%;
+        }
+
         .contacts-area {
             border-right: 1px solid #e3e3e3;
             height: 600px;

diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
@@ -5838,6 +5838,9 @@ a.ygtvspacer:hover {
   clear: both;
   border-radius: 4px;
 }
+.messaging-area-container .messaging-area img {
+  max-width: 100%;
+}
 .messaging-area-container .messaging-area .contacts-area {
   border-right: 1px solid #e3e3e3;
   height: 600px;