Dev: Use flex for image display

package.json

@@ -86,7 +86,6 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-sourcemap-writer": "^0.1.2",
     "karma-webpack": "^2.0.6",
-    "masonry-layout": "^4.2.1",
     "node-sass": "^4.7.2",
     "postcss-class-prefix": "^0.3.0",
     "postcss-loader": "^2.0.9",

src/Resources/Resources.js

@@ -1,6 +1,5 @@
 import Tool from '../DevTools/Tool';
 import Settings from '../Settings/Settings';
-import Masonry from 'masonry-layout';
 import {
     evalCss, 
     $, 
@@ -381,34 +380,6 @@ export default class Resources extends Tool
             imageData: imageData,
             imageState: getState('image', imageData.length)
         }));
-
-        if (this._imageData.length === 0) return;
-
-        let $imgList = this._$el.find('.eruda-image-list');
-
-        let columnWidth = ($imgList.offset().width - 20) / 80,
-            maxItemWidth = columnWidth * 20;
-
-        $imgList.find('li').each(function ()
-        {
-            let $this = $(this),
-                img = $this.find('img').get(0);
-
-            let itemWidth = columnWidth,
-                imgWidth = img.naturalWidth || 0;
-
-            while (imgWidth > itemWidth && itemWidth < maxItemWidth) 
-            {
-                itemWidth += columnWidth;
-            }
-
-            $this.css('width', itemWidth);
-        });
-
-        new Masonry($imgList.get(0), {
-            itemSelector: 'li',
-            columnWidth
-        });
     }
     _renderHtml(html)
     {

src/Resources/Resources.scss

@@ -42,15 +42,21 @@
             @include clear-float();
             font-size: $font-size-s;
             background: #fff;
+            display: flex;
+            flex-wrap: wrap;
             padding: $padding !important;
             li {
+                flex-grow: 1;
                 cursor: pointer;
                 &.image {
+                    height: 100px;
                     font-size: 0;
                 }
                 overflow-y: hidden;
                 img {
-                    width: 100%;
+                    height: 100px;
+                    min-width: 100%;
+                    object-fit: cover;
                 }
             }
         }