From 02ea23a4adfb07c504f460e2516ed6ead17e9e83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Thu, 2 Jan 2014 12:15:47 +0100
Subject: [PATCH] clean up images max-width mess in the CSS

---
 .../discourse/views/composer/composer_view.js |  8 +++++++-
 app/assets/stylesheets/desktop/compose.scss   |  3 ---
 app/assets/stylesheets/desktop/onebox.scss    |  7 ++-----
 .../stylesheets/desktop/topic-list.scss       |  1 -
 .../stylesheets/desktop/topic-post.scss       | 19 +++++++------------
 5 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/discourse/views/composer/composer_view.js b/app/assets/javascripts/discourse/views/composer/composer_view.js
index 93bf57fe434..64e1ee98f88 100644
--- a/app/assets/javascripts/discourse/views/composer/composer_view.js
+++ b/app/assets/javascripts/discourse/views/composer/composer_view.js
@@ -121,7 +121,13 @@ Discourse.ComposerView = Discourse.View.extend(Ember.Evented, {
   },
 
   ensureMaximumDimensionForImagesInPreview: function() {
-    $('<style>#wmd-preview img, .cooked img {' +
+    // This enforce maximum dimensions of images in the preview according
+    // to the current site settings.
+    // For interactivity, we immediately insert the locally cooked version
+    // of the post into the stream when the user hits reply. We therefore also
+    // need to enforce these rules on the .cooked version.
+    // Meanwhile, the server is busy post-processing the post and generating thumbnails.
+    $('<style>#wmd-preview img:not(.thumbnail), .cooked img:not(.thumbnail) {' +
       'max-width:' + Discourse.SiteSettings.max_image_width + 'px;' +
       'max-height:' + Discourse.SiteSettings.max_image_height + 'px;' +
       '}</style>'
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index f8be996d397..2c3ecd513fa 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -496,9 +496,6 @@ div.ac-wrap {
     .preview-wrapper {
       padding-left: 5px;
       float: right;
-      img, svg {
-        max-width: 100%;
-      }
     }
   }
   #wmd-button-bar {
diff --git a/app/assets/stylesheets/desktop/onebox.scss b/app/assets/stylesheets/desktop/onebox.scss
index 55a6544684e..2a67cde5234 100644
--- a/app/assets/stylesheets/desktop/onebox.scss
+++ b/app/assets/stylesheets/desktop/onebox.scss
@@ -43,18 +43,15 @@ a.loading-onebox {
   .onebox-result-body {
     padding-top: 5px;
     img {
-      max-width: 100px;
       max-height: 80%;
+      max-width: 25%;
+      height: auto;
       float: left;
       margin-right: 10px;
     }
     h3, h4 {
       margin: 0px !important;
     }
-    img.thumbnail {
-      max-width: 25%;
-      height: auto;
-    }
     code {
       max-height: 400px;
     }
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index fc9276125a1..fdf59c34112 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -182,7 +182,6 @@
     width: 140px;
   }
   .posters {
-    max-width: 220px;
     min-width: 150px;
     > a {
       float: left;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 506e8153681..8afa9a3b8ba 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -402,12 +402,6 @@ span.post-count {
   }
 }
 
-article.boxed {
-  img, svg {
-    max-width: 100%;
-  }
-}
-
 .quote-button {
   display: none;
   position: absolute;
@@ -693,11 +687,13 @@ blockquote { /* solo quotes */
   position: relative;
   width: 720px;
   padding: 10px 10px 15px 20px;
-
-.highlighted {
-  background-color: lighten(yellow, 45%) !important;
-        }
-
+  .highlighted {
+    background-color: lighten(yellow, 45%) !important;
+  }
+  img, svg {
+    max-width: 100%;
+    height: auto;
+  }
 }
 
 
@@ -736,7 +732,6 @@ blockquote { /* solo quotes */
   }
   &.bottom .arrow {float: right; margin: 0 0 0 0;}
   &.top {margin-left: 112px;}
-  .topic-body img {max-width: 100%; height: auto;}
   .topic-body, .topic-meta-data {border: none;}
   .row {border-top: 1px solid #ddd; padding-top: 7px;}
   .reply:first-of-type .row {border-top: none;}