aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorCaroline Chuong <caroline.chuong@octo.com>2020-06-11 18:12:52 +0200
committerGitHub <noreply@github.com>2020-06-11 18:12:52 +0200
commit45800f7e63665708665ab0252049e54846ec84c5 (patch)
treec0c489f9f7ad920ec684a71b8737accbe661803f /client/src/app
parentcf78883c70dca99fc519374d55620d9403d482be (diff)
downloadPeerTube-45800f7e63665708665ab0252049e54846ec84c5.tar.gz
PeerTube-45800f7e63665708665ab0252049e54846ec84c5.tar.zst
PeerTube-45800f7e63665708665ab0252049e54846ec84c5.zip
add scope tags and aria-labels to instance table (#2866)
also move label to caption element in table
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.html1
-rw-r--r--client/src/app/shared/instance/feature-boolean.component.html4
-rw-r--r--client/src/app/shared/instance/instance-features-table.component.html31
-rw-r--r--client/src/app/shared/instance/instance-features-table.component.scss8
4 files changed, 26 insertions, 18 deletions
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 1df1ef2ad..7ba2d9ac8 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -91,7 +91,6 @@
91 </div> 91 </div>
92 92
93 <div class="col-md-12 col-xl-6"> 93 <div class="col-md-12 col-xl-6">
94 <label i18n>Features found on this instance</label>
95 <my-instance-features-table></my-instance-features-table> 94 <my-instance-features-table></my-instance-features-table>
96 </div> 95 </div>
97 96
diff --git a/client/src/app/shared/instance/feature-boolean.component.html b/client/src/app/shared/instance/feature-boolean.component.html
index ac208fc13..ccb8a30cc 100644
--- a/client/src/app/shared/instance/feature-boolean.component.html
+++ b/client/src/app/shared/instance/feature-boolean.component.html
@@ -1,3 +1,3 @@
1<span *ngIf="value === true" class="glyphicon glyphicon-ok"></span> 1<span *ngIf="value === true" class="glyphicon glyphicon-ok" i18n-aria-label aria-label="yes"></span>
2<span *ngIf="value === false" class="glyphicon glyphicon-remove"></span> 2<span *ngIf="value === false" class="glyphicon glyphicon-remove" i18n-aria-label aria-label="no"></span>
3 3
diff --git a/client/src/app/shared/instance/instance-features-table.component.html b/client/src/app/shared/instance/instance-features-table.component.html
index 99b854d13..f6a3b7f0b 100644
--- a/client/src/app/shared/instance/instance-features-table.component.html
+++ b/client/src/app/shared/instance/instance-features-table.component.html
@@ -1,41 +1,42 @@
1<div class="feature-table"> 1<div class="feature-table">
2 2
3 <table class="table" *ngIf="serverConfig"> 3 <table class="table" *ngIf="serverConfig">
4 <caption i18n>Features found on this instance</caption>
4 <tr> 5 <tr>
5 <td i18n class="label">PeerTube version</td> 6 <th i18n class="label" scope="row">PeerTube version</th>
6 7
7 <td class="value">{{ getServerVersionAndCommit() }}</td> 8 <td class="value">{{ getServerVersionAndCommit() }}</td>
8 </tr> 9 </tr>
9 10
10 <tr> 11 <tr>
11 <td i18n class="label"> 12 <th i18n class="label" scope="row">
12 <div>Default NSFW/sensitive videos policy</div> 13 <div>Default NSFW/sensitive videos policy</div>
13 <div class="more-info">can be redefined by the users</div> 14 <div class="more-info">can be redefined by the users</div>
14 </td> 15 </th>
15 16
16 <td class="value">{{ buildNSFWLabel() }}</td> 17 <td class="value">{{ buildNSFWLabel() }}</td>
17 </tr> 18 </tr>
18 19
19 <tr> 20 <tr>
20 <td i18n class="label">User registration allowed</td> 21 <th i18n class="label" scope="row">User registration allowed</th>
21 <td> 22 <td>
22 <my-feature-boolean [value]="serverConfig.signup.allowed"></my-feature-boolean> 23 <my-feature-boolean [value]="serverConfig.signup.allowed"></my-feature-boolean>
23 </td> 24 </td>
24 </tr> 25 </tr>
25 26
26 <tr> 27 <tr>
27 <td i18n class="label" colspan="2">Video uploads</td> 28 <th i18n class="label" colspan="2">Video uploads</th>
28 </tr> 29 </tr>
29 30
30 <tr> 31 <tr>
31 <td i18n class="sub-label">Transcoding in multiple resolutions</td> 32 <th i18n class="sub-label" scope="row">Transcoding in multiple resolutions</th>
32 <td> 33 <td>
33 <my-feature-boolean [value]="serverConfig.transcoding.enabledResolutions.length !== 0"></my-feature-boolean> 34 <my-feature-boolean [value]="serverConfig.transcoding.enabledResolutions.length !== 0"></my-feature-boolean>
34 </td> 35 </td>
35 </tr> 36 </tr>
36 37
37 <tr> 38 <tr>
38 <td i18n class="sub-label">Video uploads</td> 39 <th i18n class="sub-label" scope="row">Video uploads</th>
39 <td> 40 <td>
40 <span i18n *ngIf="serverConfig.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span> 41 <span i18n *ngIf="serverConfig.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
41 <span i18n *ngIf="!serverConfig.autoBlacklist.videos.ofUsers.enabled">Automatically published</span> 42 <span i18n *ngIf="!serverConfig.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
@@ -43,7 +44,7 @@
43 </tr> 44 </tr>
44 45
45 <tr> 46 <tr>
46 <td i18n class="sub-label">Video quota</td> 47 <th i18n class="sub-label" scope="row">Video quota</th>
47 48
48 <td class="value"> 49 <td class="value">
49 <ng-container *ngIf="initialUserVideoQuota !== -1"> 50 <ng-container *ngIf="initialUserVideoQuota !== -1">
@@ -63,18 +64,18 @@
63 </tr> 64 </tr>
64 65
65 <tr> 66 <tr>
66 <td i18n class="label" colspan="2">Import</td> 67 <th i18n class="label" colspan="2">Import</th>
67 </tr> 68 </tr>
68 69
69 <tr> 70 <tr>
70 <td i18n class="sub-label">HTTP import (YouTube, Vimeo, direct URL...)</td> 71 <th i18n class="sub-label" scope="row">HTTP import (YouTube, Vimeo, direct URL...)</th>
71 <td> 72 <td>
72 <my-feature-boolean [value]="serverConfig.import.videos.http.enabled"></my-feature-boolean> 73 <my-feature-boolean [value]="serverConfig.import.videos.http.enabled"></my-feature-boolean>
73 </td> 74 </td>
74 </tr> 75 </tr>
75 76
76 <tr> 77 <tr>
77 <td i18n class="sub-label">Torrent import</td> 78 <th i18n class="sub-label" scope="row">Torrent import</th>
78 <td> 79 <td>
79 <my-feature-boolean [value]="serverConfig.import.videos.torrent.enabled"></my-feature-boolean> 80 <my-feature-boolean [value]="serverConfig.import.videos.torrent.enabled"></my-feature-boolean>
80 </td> 81 </td>
@@ -82,22 +83,22 @@
82 83
83 84
84 <tr> 85 <tr>
85 <td i18n class="label" colspan="2">Player</td> 86 <th i18n class="label" colspan="2">Player</th>
86 </tr> 87 </tr>
87 88
88 <tr> 89 <tr>
89 <td i18n class="sub-label">P2P enabled</td> 90 <th i18n class="sub-label" scope="row">P2P enabled</th>
90 <td> 91 <td>
91 <my-feature-boolean [value]="serverConfig.tracker.enabled"></my-feature-boolean> 92 <my-feature-boolean [value]="serverConfig.tracker.enabled"></my-feature-boolean>
92 </td> 93 </td>
93 </tr> 94 </tr>
94 95
95 <tr> 96 <tr>
96 <td i18n class="label" colspan="2">Search</td> 97 <th i18n class="label" colspan="2">Search</th>
97 </tr> 98 </tr>
98 99
99 <tr> 100 <tr>
100 <td i18n class="sub-label">Users can resolve distant content</td> 101 <th i18n class="sub-label" scope="row">Users can resolve distant content</th>
101 <td> 102 <td>
102 <my-feature-boolean [value]="serverConfig.search.remoteUri.users"></my-feature-boolean> 103 <my-feature-boolean [value]="serverConfig.search.remoteUri.users"></my-feature-boolean>
103 </td> 104 </td>
diff --git a/client/src/app/shared/instance/instance-features-table.component.scss b/client/src/app/shared/instance/instance-features-table.component.scss
index 47c064265..a51574741 100644
--- a/client/src/app/shared/instance/instance-features-table.component.scss
+++ b/client/src/app/shared/instance/instance-features-table.component.scss
@@ -14,6 +14,7 @@ table {
14 } 14 }
15 15
16 &.sub-label { 16 &.sub-label {
17 font-weight: $font-regular;
17 padding-left: 30px; 18 padding-left: 30px;
18 } 19 }
19 20
@@ -27,6 +28,13 @@ table {
27 td { 28 td {
28 vertical-align: middle; 29 vertical-align: middle;
29 } 30 }
31
32 caption {
33 caption-side: top;
34 font-size: 15px;
35 font-weight: $font-semibold;
36 color: pvar(--mainForegroundColor);
37 }
30} 38}
31 39
32 40