diff --git a/package.json b/package.json index 1d6a7d1..6638eb0 100644 --- a/package.json +++ b/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", diff --git a/src/Resources/Resources.js b/src/Resources/Resources.js index 7f31695..ccb447d 100644 --- a/src/Resources/Resources.js +++ b/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) { diff --git a/src/Resources/Resources.scss b/src/Resources/Resources.scss index 04b4129..ecc6466 100644 --- a/src/Resources/Resources.scss +++ b/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; } } }