make layout preview images responsive resolution wise

www/maposmatic/forms.py

@@ -62,7 +62,7 @@ class MapRenderingJobForm(forms.ModelForm):
                   'submittermail')
 
     mode = forms.CharField(initial='bbox', widget=forms.HiddenInput)
-    layout = forms.ChoiceField(choices=(), widget=forms.Select(attrs= { 'onchange' : 'clearPaperSize(this.value); $("#layout-preview").attr("src","/media/img/layout/"+this.value+".png");'}))
+    layout = forms.ChoiceField(choices=(), widget=forms.Select(attrs= { 'onchange' : 'clearPaperSize(this.value); load_preview("#layout-preview", this.value);'}))
     indexer = forms.ChoiceField(choices=(), widget=forms.Select())
     stylesheet = forms.ChoiceField(choices=(), widget=forms.Select(attrs= { 'onchange' : '$("#style-preview").attr("src","/media/img/style/"+this.value+".jpg");'}))
     overlay = forms.MultipleChoiceField(choices=(), widget=forms.SelectMultiple(attrs= { 'class': 'multipleSelect' }), required=False)

www/maposmatic/templates/maposmatic/new.html

@@ -253,7 +253,10 @@ $('#error-modal').modal('show')
           </fieldset>
 	</div>
 	<div class="col-lg-6">
-          <img id="layout-preview" align="right" src="/media/img/layout/{{request.session.new_layout}}.png"/>
+          <img id="layout-preview" align="right"
+	       src="/media/img/layout/{{request.session.new_layout}}.png"
+	       srcset="/media/img/layout/{{request.session.new_layout}}.png, /media/img/layout/{{request.session.new_layout}}-1.5x.png 1.5x, /media/img/layout/{{request.session.new_layout}}-2x.png 2x"
+	       />
 	</div>
       </div>
 

www/maposmatic/templates/maposmatic/wizard-parts/little-helpers.js

@@ -30,3 +30,9 @@ function metric_dist(lat1, lon1, lat2, lon2)
     return Math.acos(dist) * 10000 / 90;
 }
 
+function load_preview(id, base)
+{
+    var base2 = "/media/img/layout/" + base;
+     $(id).attr("src", base2 + ".png");
+     $(id).attr("srcset", base2 + ".png, " + base2 + "-1.5x.png 1.5x, " + base2 + "-2x.png 2x");
+}