add is-screen

web/app/helpers/is-screen.js

@@ -0,0 +1,7 @@
+import { helper } from '@ember/component/helper';
+
+export function isScreen([arg]) {
+  return ResponsiveBootstrapToolkit.is(arg)
+}
+
+export default helper(isScreen);

web/app/templates/components/customer-application/preview-btn.hbs

@@ -23,8 +23,14 @@
                         {{#if image.title}}
                         <h5 class="grey" style="margin-bottom: 4px;">{{image.title}}</h5>
                         {{/if}}
-                        {{image-previews image-height=null
-                            image-style='border-radius: 2%; border: 1px solid #DCDCDC; max-width: 90%;' previews=images index=index}}
+
+                        {{image-previews
+                            image-height=null
+                            image-style=(if (is-screen '<md')
+                                'border-radius: 2%; border: 1px solid #DCDCDC; max-width: 90%;'
+                                'border-radius: 2%; border: 1px solid #DCDCDC; max-width: 56%;')
+                            previews=images
+                            index=index}}
                         <div class="space-12"></div>
                     </div>
                 </div>

web/bower.json

@@ -18,7 +18,8 @@
     "jquery-colorbox": "^1.6.4",
     "fuelux": "^3.15.4",
     "jquery.hotkeys": "*",
-    "bootstrap-wysiwyg": "*"
+    "bootstrap-wysiwyg": "*",
+    "responsive-bootstrap-toolkit": "responsive-toolkit#^2.6.3"
   },
   "resolutions": {
     "ember": "release"

web/ember-cli-build.js

@@ -59,6 +59,9 @@ module.exports = function(defaults) {
         destDir: '/assets/fonts'
      });
 
+    // Toolkit
+    importVendor(app, 'bower_components/responsive-bootstrap-toolkit/dist/bootstrap-toolkit.js');
+
     importVendor(app, 'bower_components/bootbox/bootbox.js');
     importVendor(app, 'bower_components/validate/validate.js');
 
@@ -159,7 +162,7 @@ module.exports = function(defaults) {
         bcpAssets,
         aceFonts,
         aceImages,
-        select2Images, 
+        select2Images,
         publicJs
     ]);
 };

web/tests/integration/helpers/is-screen-test.js

@@ -0,0 +1,17 @@
+
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('is-screen', 'helper:is-screen', {
+  integration: true
+});
+
+// Replace this with your real tests.
+test('it renders', function(assert) {
+  this.set('inputValue', '1234');
+
+  this.render(hbs`{{is-screen inputValue}}`);
+
+  assert.equal(this.$().text().trim(), '1234');
+});
+