made images fit the width of the layout regardless of the screen width

5 files changed, 68 insertions, 15 deletions

diff --git a/askbot/media/js/utils.js b/askbot/media/js/utils.js
index b359fa5d..7011063d 100644
--- a/askbot/media/js/utils.js
+++ b/askbot/media/js/utils.js
@@ -503,16 +503,60 @@ WaitIcon.prototype.createDom = function() {
 
 /**
  * makes images never take more spaces then they can take
+ * @param {<Array>} breakPoints
+ * @param {number} maxWidth
+ * an array of array values like (min-width, width-offset) 
+ * where min-width is screen minimum width
+ * width-offset - difference between the actual screen width and
+ * max-width of the image.
+ * width-offset may be undefined - this way we know that this is
+ * the widest breakpoint and we apply the default max-width
+ * instead.
+ * We use this offset to calculate max-width in order to
+ * have the images fit the layout no matter the size of the image
  */
-var LimitedWidthImage = function(sizeRules) {
-    this._sizeRules = sizeRules;
+var LimitedWidthImage = function(breakPoints, maxWidth) {
+    /**
+     * breakPoints must be sorted in decreasing
+     * order of min-width
+     */
+    this._breakPoints = breakPoints;
+    /**
+     * this is width for the fully stretched
+     * window, above the first widest breakpoint
+     */
+    this._maxWidth = maxWidth;
     WrappedElement.call(this);
 };
 inherits(LimitedWidthImage, WrappedElement);
 
+LimitedWidthImage.prototype.getImageWidthOffset = function(width) {
+    var numBreaks = this._breakPoints.length;
+    var offset = this._breakPoints[0][1];
+    for (var i = 0; i < numBreaks; i++) {
+        var point = this._breakPoints[i];
+        var minWidth = point[0];
+        if (width >= minWidth) {
+            break;
+        } else {
+            offset = point[1];
+        }
+    }
+    return offset;
+};
+
 LimitedWidthImage.prototype.autoResize = function() {
-    var winWidth = $(window).width();
-    //@todo: do the actual resizing job here
+    var windowWidth = $(window).width();
+    //1) find the offset for the nearest breakpoint
+    var widthOffset = this.getImageWidthOffset(windowWidth);
+    var maxWidth = '100%';
+    if (widthOffset !== undefined) {
+        maxWidth = windowWidth - widthOffset;
+    } else {
+        maxWidth = this._maxWidth;
+    }
+    this._element.css('max-width', maxWidth);
+    this._element.css('height', 'auto');
 };
 
 LimitedWidthImage.prototype.decorate = function(element) {
diff --git a/askbot/media/style/style.css b/askbot/media/style/style.css
index 43c82dc3..b319815b 100644
--- a/askbot/media/style/style.css
+++ b/askbot/media/style/style.css
@@ -661,11 +661,6 @@ input[type="submit"].searchBtn {
 }
 input[type="submit"].searchBtn:hover {
   background-image: none;
-  background-image: none;
-  background-image: none;
-  background-image: none;
-  background-image: none;
-  background-image: none;
   background: -146px -37px url(../images/sprites.png) no-repeat;
 }
 input[type="button"].cancelSearchBtn {
@@ -1171,8 +1166,6 @@ body.anon.ask-page .search-drop-menu {
   border: none;
 }
 .rss {
-  float: right;
-  font-size: 16px;
   color: #f57900;
   margin: 5px 0px 3px 7px;
   width: 52px;
@@ -2124,7 +2117,7 @@ ul#related-tags li {
   color: #1b79bd;
 }
 .question-page .post-body img {
-  max-width: 100%;
+  max-width: 685px;
 }
 .question-page .post-body li {
   margin-bottom: 7px;
@@ -2450,7 +2443,6 @@ ul#related-tags li {
 .question-page .comments .counter {
   display: inline-block;
   width: auto;
-  float: right;
   vertical-align: top;
   font-family: Arial;
   float: right;
diff --git a/askbot/media/style/style.less b/askbot/media/style/style.less
index 07c6017a..a17e78cc 100644
--- a/askbot/media/style/style.less
+++ b/askbot/media/style/style.less
@@ -2240,7 +2240,7 @@ ul#related-tags li {
         }
 
         img {
-            max-width: 100%;
+            max-width: 685px;
         }
 
         li {
diff --git a/askbot/middleware/spaceless.py b/askbot/middleware/spaceless.py
index 2f5744af..b0c64032 100644
--- a/askbot/middleware/spaceless.py
+++ b/askbot/middleware/spaceless.py
@@ -21,7 +21,7 @@ class SpacelessMiddleware(object):
         """strips whitespace from all documents
         whose content type is text/html
         """
-        if 'text/html' in response['Content-Type']:
+        if 'Content-Type' in response and 'text/html' in response['Content-Type']:
             response.content = reduce_spaces_between_tags(response.content)
             response['Content-Length'] = str(len(response.content))
         return response
diff --git a/askbot/templates/question/javascript.html b/askbot/templates/question/javascript.html
index a9d48551..fd5c04ca 100644
--- a/askbot/templates/question/javascript.html
+++ b/askbot/templates/question/javascript.html
@@ -1,3 +1,20 @@
+<script type='text/javascript'>
+    (function() {
+        //make images always fit the screen
+        var images = $('.question-page .post-body img');
+        //these breakpoints must match those in css
+        //for explanation see utils.js:LimitedWidthImage
+        var breakpoints = [
+            [980, undefined],
+            [800, 55]
+        ];
+        var maxWidth = 685;
+        images.each(function(idx, item) {
+            var img = new LimitedWidthImage(breakpoints, maxWidth);
+            img.decorate($(item));
+        });
+    })();
+</script>
 <script type='text/javascript' src='{{"/js/editor.js"|media}}'></script>
 <script type="text/javascript" src='{{"/bootstrap/js/bootstrap.js"|media}}'></script>
 {% include "meta/markdown_javascript.html" %}