added message about particularly large images

100Shapes · Jul 18, 2014 · 055233b · 055233b
1 parent e9ce324
commit 055233b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/typography.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/typography.scss
@@ -56,9 +56,10 @@ kbd{
 /* Help text formatters */
 
 .help-block{
-    display:inline-block;
+    float:left;
     padding:1em;
     margin:1em 0;
+    clear:both;
 
     p{
         margin-top:0;

diff --git a/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js b/wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js
@@ -10,6 +10,7 @@ $(function() {
         var $result = $this.find('#result-url');
         var $loadingMask = $this.find('.loading-mask')
         var $preview = $this.find('img.preview');
+        var $sizeNote = $('#note-size')
 
         var generatorUrl = $this.data('generatorUrl');
 
@@ -35,6 +36,13 @@ $(function() {
                 filterSpec += '-' + $widthField.val() + 'x' + $heightField.val();
             }
 
+            // Display note about scaled down images if image is large
+            if($widthField.val() > $(window).width()){
+                $sizeNote.show();
+            }else{
+                $sizeNote.hide();
+            }
+
             // Fields with width and height
             $.getJSON(generatorUrl.replace('__filterspec__', filterSpec))
                 .done(function(data) {

diff --git a/wagtail/wagtailimages/templates/wagtailimages/images/url_generator.html b/wagtail/wagtailimages/templates/wagtailimages/images/url_generator.html
@@ -26,10 +26,12 @@ <h2 class="icon icon-link">{% trans "URL" %}</h2>
         <textarea id="result-url" rows="1"></textarea>
 
         <h2 class="icon icon-view">{% trans "Preview" %}</h2>
-        <div class="loading-mask inline-block">
-            <img class="preview" src="" alt="Preview" />
+        <div>
+            <div class="loading-mask inline-block">
+                <img class="preview" src="" alt="Preview" />
+            </div>
         </div>
-        <p class="help-block help-info">{% trans "Note that images generated larger than the screen will appear smaller when previewed here, so they fit the screen." %}</p>
+        <p id="note-size" class="help-block help-warning">{% trans "Note that images generated larger than the screen will appear smaller when previewed here, so they fit the screen." %}</p>
     </div>
 {% endblock %}