aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.html10
-rw-r--r--client/src/app/shared/channel/avatar.component.scss2
-rw-r--r--client/src/app/shared/menu/top-menu-dropdown.component.html4
-rw-r--r--client/src/app/shared/users/user-notifications.component.html20
-rw-r--r--client/src/app/shared/video/abstract-video-list.html2
-rw-r--r--client/src/app/shared/video/video-miniature.component.html2
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss10
7 files changed, 28 insertions, 22 deletions
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 952b3b6f8..12933d4ca 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,5 +1,5 @@
1<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)"> 1<div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
2 <div 2 <button
3 class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }" 3 class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
4 ngbDropdownToggle role="button" 4 ngbDropdownToggle role="button"
5 > 5 >
@@ -7,7 +7,7 @@
7 <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon> 7 <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon>
8 8
9 <span *ngIf="label" class="dropdown-toggle">{{ label }}</span> 9 <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
10 </div> 10</button>
11 11
12 <div ngbDropdownMenu class="dropdown-menu"> 12 <div ngbDropdownMenu class="dropdown-menu">
13 <ng-container *ngFor="let actions of getActions()"> 13 <ng-container *ngFor="let actions of getActions()">
@@ -16,7 +16,7 @@
16 <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true"> 16 <ng-container *ngIf="action.isDisplayed === undefined || action.isDisplayed(entry) === true">
17 17
18 <ng-template #templateActionLabel let-action> 18 <ng-template #templateActionLabel let-action>
19 <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName"></my-global-icon> 19 <my-global-icon *ngIf="action.iconName" [iconName]="action.iconName" [ngClass]="'icon-' + action.iconName" aria-hidden="true"></my-global-icon>
20 20
21 <div class="d-flex flex-column"> 21 <div class="d-flex flex-column">
22 <span i18n>{{ action.label }}</span> 22 <span i18n>{{ action.label }}</span>
@@ -33,14 +33,14 @@
33 33
34 <span 34 <span
35 *ngIf="!action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }" 35 *ngIf="!action.linkBuilder && !action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
36 class="custom-action dropdown-item" role="button" [title]="action.title || ''" (click)="action.handler(entry)" 36 class="custom-action dropdown-item" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
37 > 37 >
38 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container> 38 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
39 </span> 39 </span>
40 40
41 <h6 41 <h6
42 *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }" 42 *ngIf="!action.linkBuilder && action.isHeader" [ngClass]="{ 'with-icon': !!action.iconName }"
43 class="dropdown-header" role="button" [title]="action.title || ''" (click)="action.handler(entry)" 43 class="dropdown-header" tabindex="0" role="button" [title]="action.title || ''" (click)="action.handler(entry)" (keyup.enter)="action.handler(entry)"
44 > 44 >
45 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container> 45 <ng-container *ngTemplateOutlet="templateActionLabel; context:{ $implicit: action }"></ng-container>
46 </h6> 46 </h6>
diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss
index 4bf8fcd21..37709fce6 100644
--- a/client/src/app/shared/channel/avatar.component.scss
+++ b/client/src/app/shared/channel/avatar.component.scss
@@ -7,10 +7,12 @@
7 height: $avatar-size; 7 height: $avatar-size;
8 position: relative; 8 position: relative;
9 margin-right: 5px; 9 margin-right: 5px;
10 margin-bottom: 5px;
10 11
11 &.avatar-sm { 12 &.avatar-sm {
12 width: 28px; 13 width: 28px;
13 height: 28px; 14 height: 28px;
15 margin-bottom: 3px;
14 } 16 }
15 17
16 a { 18 a {
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html
index 7b13eade4..aeaceb662 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.html
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.html
@@ -24,7 +24,7 @@
24 24
25 <div ngbDropdownMenu> 25 <div ngbDropdownMenu>
26 <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink"> 26 <a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink">
27 <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon> 27 <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
28 28
29 {{ menuChild.label }} 29 {{ menuChild.label }}
30 </a> 30 </a>
@@ -40,7 +40,7 @@
40 <a *ngFor="let menuChild of menuEntry.children" 40 <a *ngFor="let menuChild of menuEntry.children"
41 [ngClass]="{ icon: hasIcons }" 41 [ngClass]="{ icon: hasIcons }"
42 [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()"> 42 [routerLink]="menuChild.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
43 <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName"></my-global-icon> 43 <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
44 44
45 {{ menuChild.label }} 45 {{ menuChild.label }}
46 </a> 46 </a>
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
index c6037f0a9..08771110d 100644
--- a/client/src/app/shared/users/user-notifications.component.html
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -18,7 +18,7 @@
18 </ng-template> 18 </ng-template>
19 19
20 <ng-template #noVideo> 20 <ng-template #noVideo>
21 <my-global-icon iconName="alert"></my-global-icon> 21 <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
22 22
23 <div class="message" i18n> 23 <div class="message" i18n>
24 The notification concerns a video now unavailable 24 The notification concerns a video now unavailable
@@ -27,7 +27,7 @@
27 </ng-container> 27 </ng-container>
28 28
29 <ng-container *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO"> 29 <ng-container *ngSwitchCase="UserNotificationType.UNBLACKLIST_ON_MY_VIDEO">
30 <my-global-icon iconName="undo"></my-global-icon> 30 <my-global-icon iconName="undo" aria-hidden="true"></my-global-icon>
31 31
32 <div class="message" i18n> 32 <div class="message" i18n>
33 Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblocked 33 Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.video.name }}</a> has been unblocked
@@ -35,7 +35,7 @@
35 </ng-container> 35 </ng-container>
36 36
37 <ng-container *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO"> 37 <ng-container *ngSwitchCase="UserNotificationType.BLACKLIST_ON_MY_VIDEO">
38 <my-global-icon iconName="no"></my-global-icon> 38 <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
39 39
40 <div class="message" i18n> 40 <div class="message" i18n>
41 Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blocked 41 Your video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been blocked
@@ -43,7 +43,7 @@
43 </ng-container> 43 </ng-container>
44 44
45 <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS"> 45 <ng-container *ngSwitchCase="UserNotificationType.NEW_VIDEO_ABUSE_FOR_MODERATORS">
46 <my-global-icon iconName="alert"></my-global-icon> 46 <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
47 47
48 <div class="message" i18n> 48 <div class="message" i18n>
49 <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a> 49 <a (click)="markAsRead(notification)" [routerLink]="notification.videoAbuseUrl">A new video abuse</a> has been created on video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoAbuse.video.name }}</a>
@@ -51,7 +51,7 @@
51 </ng-container> 51 </ng-container>
52 52
53 <ng-container *ngSwitchCase="UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS"> 53 <ng-container *ngSwitchCase="UserNotificationType.VIDEO_AUTO_BLACKLIST_FOR_MODERATORS">
54 <my-global-icon iconName="no"></my-global-icon> 54 <my-global-icon iconName="no" aria-hidden="true"></my-global-icon>
55 55
56 <div class="message" i18n> 56 <div class="message" i18n>
57 The recently added video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been <a (click)="markAsRead(notification)" [routerLink]="notification.videoAutoBlacklistUrl">automatically blocked</a> 57 The recently added video <a (click)="markAsRead(notification)" [routerLink]="notification.videoUrl">{{ notification.videoBlacklist.video.name }}</a> has been <a (click)="markAsRead(notification)" [routerLink]="notification.videoAutoBlacklistUrl">automatically blocked</a>
@@ -72,7 +72,7 @@
72 </ng-template> 72 </ng-template>
73 73
74 <ng-template #noComment> 74 <ng-template #noComment>
75 <my-global-icon iconName="alert"></my-global-icon> 75 <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
76 76
77 <div class="message" i18n> 77 <div class="message" i18n>
78 The notification concerns a comment now unavailable 78 The notification concerns a comment now unavailable
@@ -105,7 +105,7 @@
105 </ng-container> 105 </ng-container>
106 106
107 <ng-container *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION"> 107 <ng-container *ngSwitchCase="UserNotificationType.NEW_USER_REGISTRATION">
108 <my-global-icon iconName="user-add"></my-global-icon> 108 <my-global-icon iconName="user-add" aria-hidden="true"></my-global-icon>
109 109
110 <div class="message" i18n> 110 <div class="message" i18n>
111 User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }}</a> registered on your instance 111 User <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.account.name }}</a> registered on your instance
@@ -136,7 +136,7 @@
136 </ng-container> 136 </ng-container>
137 137
138 <ng-container *ngSwitchCase="UserNotificationType.NEW_INSTANCE_FOLLOWER"> 138 <ng-container *ngSwitchCase="UserNotificationType.NEW_INSTANCE_FOLLOWER">
139 <my-global-icon iconName="users"></my-global-icon> 139 <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
140 140
141 <div class="message" i18n> 141 <div class="message" i18n>
142 Your instance has <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">a new follower</a> ({{ notification.actorFollow?.follower.host }}) 142 Your instance has <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">a new follower</a> ({{ notification.actorFollow?.follower.host }})
@@ -145,7 +145,7 @@
145 </ng-container> 145 </ng-container>
146 146
147 <ng-container *ngSwitchCase="UserNotificationType.AUTO_INSTANCE_FOLLOWING"> 147 <ng-container *ngSwitchCase="UserNotificationType.AUTO_INSTANCE_FOLLOWING">
148 <my-global-icon iconName="users"></my-global-icon> 148 <my-global-icon iconName="users" aria-hidden="true"></my-global-icon>
149 149
150 <div class="message" i18n> 150 <div class="message" i18n>
151 Your instance automatically followed <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">{{ notification.actorFollow.following.host }}</a> 151 Your instance automatically followed <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">{{ notification.actorFollow.following.host }}</a>
@@ -153,7 +153,7 @@
153 </ng-container> 153 </ng-container>
154 154
155 <ng-container *ngSwitchDefault> 155 <ng-container *ngSwitchDefault>
156 <my-global-icon iconName="alert"></my-global-icon> 156 <my-global-icon iconName="alert" aria-hidden="true"></my-global-icon>
157 157
158 <div class="message" i18n> 158 <div class="message" i18n>
159 The notification points to a content now unavailable 159 The notification points to a content now unavailable
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 9e551c1c8..54557df6b 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -10,7 +10,7 @@
10 <div class="action-block" *ngIf="actions.length > 0"> 10 <div class="action-block" *ngIf="actions.length > 0">
11 <a [routerLink]="action.routerLink" routerLinkActive="active" *ngFor="let action of actions"> 11 <a [routerLink]="action.routerLink" routerLinkActive="active" *ngFor="let action of actions">
12 <button class="btn"> 12 <button class="btn">
13 <my-global-icon [iconName]="action.iconName"></my-global-icon> 13 <my-global-icon [iconName]="action.iconName" aria-hidden="true"></my-global-icon>
14 <span>{{ action.label }}</span> 14 <span>{{ action.label }}</span>
15 </button> 15 </button>
16 </a> 16 </a>
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index d37ab478d..992c16585 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -9,7 +9,7 @@
9 9
10 <div class="video-bottom"> 10 <div class="video-bottom">
11 <div class="video-miniature-information"> 11 <div class="video-miniature-information">
12 <div class="d-inline-flex"> 12 <div class="d-inline-flex video-miniature-meta">
13 <div *ngIf="displayOptions.avatar" class="avatar"> 13 <div *ngIf="displayOptions.avatar" class="avatar">
14 <img [src]="getAvatarUrl()" alt="Avatar" /> 14 <img [src]="getAvatarUrl()" alt="Avatar" />
15 </div> 15 </div>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 4e7c9fb57..d926c4dec 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -2,7 +2,7 @@
2@import '_mixins'; 2@import '_mixins';
3@import '_miniature'; 3@import '_miniature';
4 4
5$more-button-width: 41px; 5$more-button-width: 40px;
6$more-margin-right: 15px; 6$more-margin-right: 15px;
7 7
8.video-miniature { 8.video-miniature {
@@ -11,7 +11,6 @@ $more-margin-right: 15px;
11 padding-bottom: $video-miniature-margin-bottom; 11 padding-bottom: $video-miniature-margin-bottom;
12 height: 195px; 12 height: 195px;
13 vertical-align: top; 13 vertical-align: top;
14 overflow: hidden;
15 14
16 .video-bottom { 15 .video-bottom {
17 display: flex; 16 display: flex;
@@ -32,6 +31,11 @@ $more-margin-right: 15px;
32 @include miniature-name; 31 @include miniature-name;
33 } 32 }
34 33
34 .video-miniature-meta {
35 width: calc(100% + #{$more-button-width});
36 overflow: hidden;
37 }
38
35 .video-miniature-created-at-views { 39 .video-miniature-created-at-views {
36 display: block; 40 display: block;
37 font-size: 13px; 41 font-size: 13px;
@@ -122,7 +126,7 @@ $more-margin-right: 15px;
122 width: 100% !important; 126 width: 100% !important;
123 127
124 .video-miniature-information { 128 .video-miniature-information {
125 width: calc(100% - 40px) !important; 129 width: calc(100% - #{$more-button-width}) !important;
126 } 130 }
127 } 131 }
128 132