From fc68fbe9a32261a51220b6a936e5fb421343a342 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Thu, 30 Jul 2020 17:33:12 +0800
Subject: [PATCH] Refactor group-pictures using flex layout

---
 layout/_macro/post.njk                        |  4 ++-
 scripts/tags/group-pictures.js                |  6 ++--
 .../_common/components/post/post-gallery.styl |  9 ++++--
 .../scaffolding/tags/group-pictures.styl      | 28 +++++++++++--------
 test/tags/group-pictures.js                   |  8 +++---
 5 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/layout/_macro/post.njk b/layout/_macro/post.njk
index 7fa5cf0..720ca51 100644
--- a/layout/_macro/post.njk
+++ b/layout/_macro/post.njk
@@ -18,7 +18,9 @@
     {%- if post.photos and post.photos.length %}
       <div class="post-gallery" itemscope itemtype="http://schema.org/ImageGallery">
         {%- for photo in post.photos %}
-          <div class="post-gallery-image" style="background-image: url({{ url_for(photo) }});" itemprop="contentUrl"></div>
+          <div class="post-gallery-image">
+            <img src="{{ url_for(photo) }}" itemprop="contentUrl">
+          </div>
         {%- endfor %}
       </div>
     {%- endif %}
diff --git a/scripts/tags/group-pictures.js b/scripts/tags/group-pictures.js
index 4c20c73..0490759 100644
--- a/scripts/tags/group-pictures.js
+++ b/scripts/tags/group-pictures.js
@@ -82,7 +82,7 @@ const templates = {
 
   dispatch: function(pictures, group, layout) {
     const rule = LAYOUTS[group] ? LAYOUTS[group][layout] : null;
-    return rule ? this.getHTML(groupBy(rule, pictures)) : templates.defaults(pictures);
+    return rule ? this.getHTML(groupBy(rule, pictures)) : this.defaults(pictures);
   },
 
   /**
@@ -113,10 +113,8 @@ const templates = {
   },
 
   getColumnHTML: function(pictures) {
-    const columnWidth = 100 / pictures.length;
-    const columnStyle = `style="width: ${columnWidth}%;"`;
     return pictures.map(picture => {
-      return `<div class="group-picture-column" ${columnStyle}>${picture}</div>`;
+      return `<div class="group-picture-column">${picture}</div>`;
     }).join('');
   }
 };
diff --git a/source/css/_common/components/post/post-gallery.styl b/source/css/_common/components/post/post-gallery.styl
index a6d68bf..580a1a6 100644
--- a/source/css/_common/components/post/post-gallery.styl
+++ b/source/css/_common/components/post/post-gallery.styl
@@ -1,11 +1,10 @@
 .post-gallery {
   display: flex;
   margin-bottom: 60px;
+  min-height: 200px;
 
   .post-gallery-image {
-    background-size: cover;
     flex: 1;
-    height: 200px;
 
     &:not(:first-child) {
       clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
@@ -15,5 +14,11 @@
     &:not(:last-child) {
       margin-right: -20px;
     }
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
   }
 }
diff --git a/source/css/_common/scaffolding/tags/group-pictures.styl b/source/css/_common/scaffolding/tags/group-pictures.styl
index 8a4032f..a581c99 100644
--- a/source/css/_common/scaffolding/tags/group-pictures.styl
+++ b/source/css/_common/scaffolding/tags/group-pictures.styl
@@ -1,14 +1,20 @@
-.post-body .group-picture img {
-  margin: 0 auto;
-  padding: 0 3px;
-}
+.group-picture {
+  margin-bottom: 20px;
 
-.group-picture-row {
-  margin-bottom: 6px;
-  overflow: hidden;
-}
+  .group-picture-row {
+    display: flex;
+    gap: 3px;
+    margin-bottom: 3px;
+  }
 
-.group-picture-column {
-  float: left;
-  margin-bottom: 10px;
+  .group-picture-column {
+    flex: 1;
+
+    img {
+      margin: 0;
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
 }
diff --git a/test/tags/group-pictures.js b/test/tags/group-pictures.js
index c2b6695..8e7e978 100644
--- a/test/tags/group-pictures.js
+++ b/test/tags/group-pictures.js
@@ -13,7 +13,7 @@ describe('group-pictures', () => {
     groupPicture(['3-1'], `
 ![](/images/sample.png)
 ![](/images/sample.png)
-![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div></div></div>');
+![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div></div>');
   });
 
   it('layout 5-2', () => {
@@ -22,7 +22,7 @@ describe('group-pictures', () => {
 ![](/images/sample.png)
 ![](/images/sample.png)
 ![](/images/sample.png)
-![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column" style="width: 100%;"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div></div></div>');
+![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div></div>');
   });
 
   it('remove text', () => {
@@ -31,7 +31,7 @@ describe('group-pictures', () => {
 Text
 ![](/images/sample.png)
 Text
-![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div></div></div>');
+![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div></div>');
   });
 
   it('no layout', () => {
@@ -40,6 +40,6 @@ Text
 ![](/images/sample.png)
 ![](/images/sample.png)
 ![](/images/sample.png)
-![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 33.333333333333336%;"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div><div class="group-picture-column" style="width: 50%;"><img src="/images/sample.png"></div></div></div>');
+![](/images/sample.png)`).should.eql('<div class="group-picture"><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div><div class="group-picture-row"><div class="group-picture-column"><img src="/images/sample.png"></div><div class="group-picture-column"><img src="/images/sample.png"></div></div></div>');
   });
 });