fixed styles

front/salix/components/app/style.scss

@@ -3,6 +3,7 @@
 body {
     background-color: $color-bg;
     overflow: auto;
+    height: 100%
 }
 vn-app {
     height: inherit;

front/salix/styles/index.js

@@ -14,3 +14,4 @@ import './summary.scss';
 import './descriptor.scss';
 import './list.scss';
 import './modal-form.scss';
+import './photo-list.scss';

front/salix/styles/photo-list.scss

@@ -0,0 +1,38 @@
+@import "./variables";
+.photo-list {
+    justify-content: center;
+    align-items: flex-start;
+    align-content: flex-start;
+    flex-wrap: wrap;
+    
+    .photo {
+        box-sizing: border-box;
+        transition: all 0.5s;
+        padding: $pad-small;
+        position: relative;
+        opacity: 0.7;
+        width: 28em;
+
+        .image {
+            box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
+                        0 3px 1px -2px rgba(0,0,0,.2),
+                        0 1px 5px 0 rgba(0,0,0,.12);
+            overflow: hidden;
+            cursor: zoom-in;
+            height: 100%;
+
+            img {
+                max-width: 100%
+            }
+        }
+        .actions {
+            position: absolute;
+            right: 1em;
+            top: 1em
+        }
+    }
+
+    .photo:hover {
+        opacity: 1
+    }
+}

modules/claim/front/dms/index/index.html

@@ -6,9 +6,8 @@
 </vn-crud-model>
 <vn-horizontal class="photo-list" vn-droppable="true" on-drop="$ctrl.onDrop(event)">
     <section class="photo" ng-repeat="photo in $ctrl.photos">
-        <section class="image">
+        <section class="image mdl-shadow--2dp" on-error-src 
-            <img alt="" on-error-src
+            ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
-            ng-src="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}" 
             zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
         </section>
         <section class="actions">

modules/claim/front/dms/index/style.scss

@@ -10,6 +10,7 @@ vn-claim-dms-index {
 
         .photo {
             width: 32em;
+            height: 18em;
         }
     }
 

modules/claim/front/summary/index.html

@@ -83,9 +83,8 @@
             <h4 translate>Photos</h4>
             <vn-horizontal class="photo-list">
                 <section class="photo" ng-repeat="photo in photos">
-                    <section class="image">
+                    <section class="image" on-error-src 
-                        <img alt="" on-error-src
+                        ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
-                        ng-src="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}" 
                         zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
                     </section>
                 </section>

modules/claim/front/summary/style.scss

@@ -1,36 +1,12 @@
 @import "./variables";
 
-.photo-list {
+vn-claim-summary {
-    justify-content: center;
-    align-items: flex-start;
-    align-content: flex-start;
-    flex-wrap: wrap;
-    
     .photo {
-        box-sizing: border-box;
+        height: 15.5em;
-        padding: $pad-small;
+    }
-        position: relative;
+    .photo .image { 
-        opacity: 0.7;
+        border: 2px solid $color-bg-dark;
-        transition: all 0.5s;
+        border-radius: 0.2em;
-        width: 28em;
-
-        .image {
-            border: 2px solid $color-bg-dark;
-            border-radius: 0.2em;
-            overflow: hidden;
-
-            img, video {
-                max-width: 100%
-            }
-        }
-        .actions {
-            position: absolute;
-            right: 1em;
-            top: 1em
-        }
     }
    
-    .photo:hover {
-        opacity: 1
-    }
 }