From 1aabcae7e36bb113c2887bd7180dad2916ecaaf2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 20 Feb 2019 14:56:18 +0100 Subject: Add hover effect on video miniature --- .../shared/video/video-thumbnail.component.html | 2 ++ .../shared/video/video-thumbnail.component.scss | 35 +++++++++++++++++++++- .../videos/video-list/video-trending.component.ts | 4 +-- 3 files changed, 38 insertions(+), 3 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html index d25666916..a15df725e 100644 --- a/client/src/app/shared/video/video-thumbnail.component.html +++ b/client/src/app/shared/video/video-thumbnail.component.html @@ -6,6 +6,8 @@
{{ video.durationLabel }}
+
+
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss index 97a0e72ed..e57baba5c 100644 --- a/client/src/app/shared/video/video-thumbnail.component.scss +++ b/client/src/app/shared/video/video-thumbnail.component.scss @@ -1,7 +1,13 @@ @import '_variables'; @import '_mixins'; +$play-overlay-transition: 0.2s ease; +$play-overlay-height: 26px; +$play-overlay-width: 18px; + .video-thumbnail { + @include disable-outline; + display: inline-block; position: relative; border-radius: 3px; @@ -9,12 +15,20 @@ width: $video-thumbnail-width; height: $video-thumbnail-height; background-color: #ececec; + transition: filter $play-overlay-transition; &:hover { text-decoration: none !important; + + filter: brightness(85%); + + .play-overlay { + opacity: 1; + + transform: translate(-50%, -50%) scale(1); + } } - @include disable-outline; &.focus-visible { box-shadow: 0 0 0 2px var(--mainColor); } @@ -29,6 +43,25 @@ } } + .play-overlay { + width: 0; + height: 0; + + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(0.5); + + transition: all $play-overlay-transition; + + border-top: calc(#{$play-overlay-height} / 2) solid transparent; + border-bottom: calc(#{$play-overlay-height} / 2) solid transparent; + + border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95); + + opacity: 0; + } + .progress-bar { height: 3px; width: 100%; diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts index 6fd74e67a..a66a0f97c 100644 --- a/client/src/app/videos/video-list/video-trending.component.ts +++ b/client/src/app/videos/video-list/video-trending.component.ts @@ -45,11 +45,11 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, if (trendingDays === 1) { this.titlePage = this.i18n('Trending for the last 24 hours') - this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours.') + this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours') } else { this.titlePage = this.i18n('Trending for the last {{days}} days', { days: trendingDays }) this.titleTooltip = this.i18n( - 'Trending videos are those totalizing the greatest number of views during the last {{days}} days.', + 'Trending videos are those totalizing the greatest number of views during the last {{days}} days', { days: trendingDays } ) } -- cgit v1.2.3