aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2018-09-08 14:34:32 +0200
committerChocobozzz <me@florianbigard.com>2018-09-11 10:58:48 +0200
commite78980ebd116be1ea901387c126876af902191e6 (patch)
treeea037d021e1383501e2b79add1a9581ef80a7c99 /client/src/app/shared
parentecf06378ff95ec35f75de0169a02a974d2c17c62 (diff)
downloadPeerTube-e78980ebd116be1ea901387c126876af902191e6.tar.gz
PeerTube-e78980ebd116be1ea901387c126876af902191e6.tar.zst
PeerTube-e78980ebd116be1ea901387c126876af902191e6.zip
use focus-visible polyfill to improve keyboard navigation
Only the homepage is concerned, but it should have decent keyboard navigation support now.
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/video/video-miniature.component.html5
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.scss5
2 files changed, 8 insertions, 2 deletions
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index de84bccf9..9cf3fb321 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -3,6 +3,7 @@
3 3
4 <div class="video-miniature-information"> 4 <div class="video-miniature-information">
5 <a 5 <a
6 tabindex="-1"
6 class="video-miniature-name" 7 class="video-miniature-name"
7 [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur() }" 8 [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur() }"
8 > 9 >
@@ -11,10 +12,10 @@
11 12
12 <span i18n class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> 13 <span i18n class="video-miniature-created-at-views">{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
13 14
14 <a *ngIf="displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]"> 15 <a tabindex="-1" *ngIf="displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
15 {{ video.byAccount }} 16 {{ video.byAccount }}
16 </a> 17 </a>
17 <a *ngIf="displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]"> 18 <a tabindex="-1" *ngIf="displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
18 {{ video.byVideoChannel }} 19 {{ video.byVideoChannel }}
19 </a> 20 </a>
20 </div> 21 </div>
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index c3cb1ec75..1dd8e5338 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -14,6 +14,11 @@
14 text-decoration: none !important; 14 text-decoration: none !important;
15 } 15 }
16 16
17 @include disable-outline;
18 &.focus-visible {
19 box-shadow: 0 0 0 2px var(--mainColor);
20 }
21
17 img { 22 img {
18 width: $video-thumbnail-width; 23 width: $video-thumbnail-width;
19 height: $video-thumbnail-height; 24 height: $video-thumbnail-height;