forks
/
peertube
1
0
Fork 0
Code Releases Activity

Improve hotkeys popup accessibility

This commit is contained in:
Chocobozzz 2023-10-05 15:56:36 +02:00
parent 4d61e5ef9c
commit 0ac3820f4d
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 35 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/app/core/hotkeys/hotkeys.component.html
View File

@ -1,18 +1,17 @@
<div class="cfp-hotkeys-container fade" [ngClass]="{'in': helpVisible}">
<div class="cfp-hotkeys">
<h4 class="cfp-hotkeys-title">{{ title }}</h4>
<div class="cfp-hotkeys-table">
<table>
<tbody>
<tr *ngFor="let hotkey of hotkeys">
<td class="cfp-hotkeys-keys">
<span *ngFor="let key of hotkey.formatted" class="cfp-hotkeys-key">{{ key }}</span>
</td>
<td class="cfp-hotkeys-text">{{ hotkey.description }}</td>
</tr>
</tbody>
</table>
</div>
<ul role="presentation">
<li *ngFor="let hotkey of hotkeys">
<div class="cfp-hotkeys-keys">
<span *ngFor="let key of hotkey.formatted">{{ key }}</span>
</div>
<div class="cfp-hotkeys-text">{{ hotkey.description }}</div>
</li>
</ul>
<button class="button-unstyle cfp-hotkeys-close" (click)="toggleCheatSheet()">&#215;</button>
</div>
</div>

45
client/src/app/core/hotkeys/hotkeys.component.scss
View File

@ -39,37 +39,40 @@
max-height: 100%;
}
.cfp-hotkeys table {
.cfp-hotkeys ul {
margin: auto;
width: fit-content;
list-style: none;
color: pvar(--mainForegroundColor);
}
.cfp-content {
display: table-cell;
vertical-align: middle;
.cfp-hotkeys-keys,
.cfp-hotkeys-text {
display: inline-block;
}
.cfp-hotkeys-keys {
padding: 5px;
text-align: end;
}
min-width: 90px;
.cfp-hotkeys-key {
@include margin-right(5px);
> span {
@include margin-right(5px);
display: inline-block;
color: pvar(--mainBackgroundColor);
background-color: pvar(--mainForegroundColor);
border: 1px solid pvar(--mainForegroundColor);
border-radius: 5px;
text-align: center;
box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
padding: 5px 9px;
font-size: 1em;
display: inline-block;
color: pvar(--mainBackgroundColor);
background-color: pvar(--mainForegroundColor);
border: 1px solid pvar(--mainForegroundColor);
border-radius: 5px;
text-align: center;
box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
padding: 5px 9px;
font-size: 1em;
}
}
.cfp-hotkeys-text {
@include padding-left(10px);
font-size: 1em;
}
@ -85,11 +88,11 @@
min-height: 45px;
min-width: 45px;
text-align: center;
}
.cfp-hotkeys-close:hover {
cursor: pointer;
opacity: 0.8;
&:hover {
cursor: pointer;
opacity: 0.8;
}
}
@media all and (max-width: $mobile-view) {