Merge pull request #28 from qor/add-border-to-sortable-select-many

add square  border to sortable_select_many

Author: zealllot

views/assets/javascripts/sorting-sortable-select-many.js

@@ -320,7 +320,7 @@
         '<li data-index="[[id]]" data-result-id="[[_resultId]]" data-value="[[value]]"><span>[[value]]</span><div><i class="material-icons qor-dragable__list-delete">clear</i><i class="material-icons qor-dragable__list-handle">drag_handle</i></div></li>';
 
     QorChooserSortable.LIST_HTML_WITH_IMAGE =
-        '<li data-index="[[id]]" data-result-id="[[_resultId]]" data-value="[[value]]"><span><img src="[[Image]]">[[value]]</span><div><i class="material-icons qor-dragable__list-delete">clear</i><i class="material-icons qor-dragable__list-handle">drag_handle</i></div></li>';
+        '<li data-index="[[id]]" data-result-id="[[_resultId]]" data-value="[[value]]"><span><span class="square-image-wrapper"><img src="[[Image]]"></span>[[value]]</span><div><i class="material-icons qor-dragable__list-delete">clear</i><i class="material-icons qor-dragable__list-handle">drag_handle</i></div></li>';
 
     QorChooserSortable.OPTION_HTML = '<option selected value="[[value]]"></option>';
 

views/assets/javascripts/sorting-sortable-select-many/2.sorting-sortable-select-many.js

@@ -86,4 +86,24 @@ $color-black: "0,0,0";
 .select2-selection__rendered .select2-selection__choice{
     position: absolute;
     top: -10000px;
-}
+}
+
+.square-image-wrapper {
+    width: 64px;
+    height: 64px;
+    background: #e0e0e0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+  .square-image-wrapper img {
+    max-width: 100% !important;
+    max-height: 100% !important;
+    object-fit: contain;
+    margin: 0 !important;
+  }
+  

views/assets/stylesheets/sorting-sortable-select-many.css

@@ -36,7 +36,9 @@
                 <span>
                   {{if $hasImage}}
                     {{if gt (len (index $values)) 2}}
-                    <img src="{{index $values 2}}">
+                    <span class="square-image-wrapper">
+                      <img src="{{index $values 2}}">
+                    </span>
                     {{end}}
                   {{end}}
                   {{index $values 1}}