kylefang/probot.github.io
1
0
Fork 0
mirror of https://github.com/zhigang1992/probot.github.io.git synced 2026-01-12 22:49:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add image switcher

Browse Source
This commit is contained in:
Brandon Keepers
2017-07-11 13:07:04 +02:00
parent f8cc852478
commit 743b89775f
2 changed files with 41 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
_layouts/plugin.html
View File

@@ -27,16 +27,19 @@ layout: default
<div class="d-flex flex-row d-flex-row gutter-spacious">
<div class="flex-coumn col-9">
<div class="">
<div class="d-flex flex-items-center flex-justify-center rounded-1 bg-white overflow-hidden p-3">
{% for screenshot in page.screenshots limit:1 %}
<img src="{{ screenshot }}" style="max-width:100%; max-height:100%;">
<div class="sixteen-by-nine rounded-1 bg-white overflow-hidden">
{% for screenshot in page.screenshots %}
<input class="switcher-input" id="screenshot-{{ forloop.index }}" type="radio" name="switcher"{% if forloop.index == 1 %} checked{% endif %}>
<div class="switcher-item content d-flex flex-items-center flex-justify-center p-3">
<img src="{{ screenshot }}" style="max-width:100%; max-height:100%;">
</div>
{% endfor %}
</div>
{% if page.screenshots.size > 1 %}
<div class="d-flex flex-items-center flex-justify-center p-2">
<div class="d-flex flex-items-center flex-justify-center mt-3">
{% for screenshot in page.screenshots %}
<div class="rounded-1 border border-gray-light mx-1" style="width:125px; height: 70px; background-image: url({{ screenshot }}); background-size: cover; background-position: center;">
</div>
<label for="screenshot-{{ forloop.index }}" class="rounded-1 border border-gray-light mx-2" style="width:125px; height: 70px; background-image: url({{ screenshot }}); background-size: cover; background-position: center;">
</label>
{% endfor %}
</div>
{% endif %}

32
assets/css/index.scss
View File

@@ -97,3 +97,35 @@ code {
color: $text-gray;
}
}
.sixteen-by-nine {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: (9 / 16) * 100%;
}
> .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.switcher-input {
display: none;
}
.switcher-item {
transition: opacity .15s ease-in-out;
opacity: 0;
input:checked + & {
opacity: 1;
}
}