This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
The following commit(s) were added to refs/heads/master by this push:
new 8563e48 feat: support poster (#287)
8563e48 is described below
commit 8563e481274fda9e6d486f04a77c07fe49074479
Author: Juntao Zhang <[email protected]>
AuthorDate: Fri May 28 19:07:02 2021 -0500
feat: support poster (#287)
---
README.md | 1 +
content/events/skywalkingday-2021/index.md | 1 +
themes/docsy/assets/js/event-popup.js | 34 +++++++++++++++++++++-----
themes/docsy/assets/scss/_event-popup.scss | 21 ++++++++++------
themes/docsy/layouts/partials/event-popup.html | 2 ++
5 files changed, 45 insertions(+), 14 deletions(-)
diff --git a/README.md b/README.md
index 64e15dd..7226394 100755
--- a/README.md
+++ b/README.md
@@ -54,6 +54,7 @@ If you want to display the event in the bottom right popover,
you can configure
|startTime|Start time|false|Current time|
|buttonText|Button text|false|Read more|
|img|The illustration|false|/images/skywalking_200x200.png|
+|poster|The poster|false|-|
### Blog
diff --git a/content/events/skywalkingday-2021/index.md
b/content/events/skywalkingday-2021/index.md
index fb6c2b7..7e84774 100644
--- a/content/events/skywalkingday-2021/index.md
+++ b/content/events/skywalkingday-2021/index.md
@@ -4,6 +4,7 @@ date: 2021-04-20
author: SkyWalking Team
description: Apache SkyWalking hosts SkyWalkingDay Conference 2021 in June
20th, jointly with Tencent and Tetrate.
endTime: 2021-06-12T10:00:00Z
+poster: /events/skywalkingday-2021/skywalkingday.png
---
<img src="skywalkingday.png">
diff --git a/themes/docsy/assets/js/event-popup.js
b/themes/docsy/assets/js/event-popup.js
index ae1bb99..3f7786e 100644
--- a/themes/docsy/assets/js/event-popup.js
+++ b/themes/docsy/assets/js/event-popup.js
@@ -34,9 +34,14 @@ $(function () {
function showPopover(count) {
var src;
+ var posterSrc;
+ var link;
+ var $contentBox = $popup.find('.content-box');
if (count === 1) {
- $('.sky-event-popup .content-box').addClass('one')
+ $contentBox.addClass('one')
src = $items.eq(0).data('img')
+ posterSrc = $items.eq(0).data('poster')
+ link = $items.eq(0).data('link')
} else {
$items.sort(function (a, b) {
var aDate = new Date($(a).data('endtime'))
@@ -45,18 +50,35 @@ $(function () {
})
$.each($items, function (index, item) {
var img = $(item).data('img')
+ var poster = $(item).data('poster')
+ if (poster) {
+ posterSrc = poster;
+ link = $(item).data('link');
+ return false
+ }
if (img) {
src = img;
return false
}
})
- $('.content-box').html($items)
+ $contentBox.html($items)
}
- if (!src) {
- src = $pic.data('img')
- $pic.css('height', 'auto')
+ if (posterSrc && document.body.clientWidth >= 440) {
+ $pic.attr('src', posterSrc);
+ $pic.on('click', function () {
+ window.location.href = link;
+ $popup.find('.fa-window-close').trigger('click')
+ })
+ $('.pic-wrapper').addClass('poster')
+ $('.fa-window-close').css('color', '#8797ac')
+ $contentBox.hide()
+ } else {
+ if (!src) {
+ src = $pic.data('img')
+ $pic.css('height', 'auto')
+ }
+ $pic.attr('src', src)
}
- $pic.attr('src', src)
setTimeout(function () {
$popup.show()
diff --git a/themes/docsy/assets/scss/_event-popup.scss
b/themes/docsy/assets/scss/_event-popup.scss
index b92bac9..822c77a 100644
--- a/themes/docsy/assets/scss/_event-popup.scss
+++ b/themes/docsy/assets/scss/_event-popup.scss
@@ -42,20 +42,16 @@
.fa-window-close {
position: absolute;
- top: 10px;
- right: 10px;
- font-size: 14px;
+ top: 16px;
+ right: 16px;
+ font-size: 16px;
cursor: pointer;
color: #c9c9c9;
transition: color 0.3s;
z-index: 99;
&:hover {
- color: #bcbcbc;
-
- &:hover {
- color: #8797ac;
- }
+ color: #8797ac;
}
}
@@ -64,6 +60,15 @@
justify-content: center;
align-items: center;
width: 100px;
+ &.poster{
+ width: auto;
+ .pic{
+ max-width:100%;
+ &:hover{
+ cursor: pointer;
+ }
+ }
+ }
}
.pic {
diff --git a/themes/docsy/layouts/partials/event-popup.html
b/themes/docsy/layouts/partials/event-popup.html
index a3568c3..6e902dd 100644
--- a/themes/docsy/layouts/partials/event-popup.html
+++ b/themes/docsy/layouts/partials/event-popup.html
@@ -29,6 +29,8 @@
<div class="item"
data-img="{{.Params.img}}"
+ data-poster="{{.Params.poster}}"
+ data-link="{{.RelPermalink}}"
data-starttime="{{.Params.startTime}}"
data-endtime="{{.Params.endTime}}">
<a href="{{.RelPermalink}}">
