diff options
author | Evgeny Fadeev <evgeny.fadeev@gmail.com> | 2013-08-16 09:18:57 -0400 |
---|---|---|
committer | Evgeny Fadeev <evgeny.fadeev@gmail.com> | 2013-08-16 09:18:57 -0400 |
commit | 19714da7eea62823ff532303b826085a27333a9c (patch) | |
tree | 8443a3867d467e222aac0ab62a2cd650e6b3a358 | |
parent | d221c840fc25b06c4dc0ebe50b94a1d93e1442ad (diff) | |
download | askbot-19714da7eea62823ff532303b826085a27333a9c.tar.gz askbot-19714da7eea62823ff532303b826085a27333a9c.tar.bz2 askbot-19714da7eea62823ff532303b826085a27333a9c.zip |
made images fit the width of the layout regardless of the screen width
-rw-r--r-- | askbot/media/js/utils.js | 52 | ||||
-rw-r--r-- | askbot/media/style/style.css | 10 | ||||
-rw-r--r-- | askbot/media/style/style.less | 2 | ||||
-rw-r--r-- | askbot/middleware/spaceless.py | 2 | ||||
-rw-r--r-- | askbot/templates/question/javascript.html | 17 |
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" %} |