github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-17 18:22:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor group-pictures using flex layout

Browse Source
This commit is contained in:
Mimi 2020-07-30 17:33:12 +08:00
parent 5883e29ad3
commit fc68fbe9a3
5 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layout/_macro/post.njk
View File

@ -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 %}

6
scripts/tags/group-pictures.js
View File

@ -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('');
}
};

9
source/css/_common/components/post/post-gallery.styl
View File

@ -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%;
}
}
}

28
source/css/_common/scaffolding/tags/group-pictures.styl
View File

@ -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%;
}
}
}

8
test/tags/group-pictures.js
View File

@ -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>');
});
});