OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve hotkeys popup accessibility

pull/6000/head
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-container fade" [ngClass]="{'in': helpVisible}">
<div class="cfp-hotkeys"> <div class="cfp-hotkeys">
<h4 class="cfp-hotkeys-title">{{ title }}</h4> <h4 class="cfp-hotkeys-title">{{ title }}</h4>
<div class="cfp-hotkeys-table">
<table> <ul role="presentation">
<tbody> <li *ngFor="let hotkey of hotkeys">
<tr *ngFor="let hotkey of hotkeys"> <div class="cfp-hotkeys-keys">
<td class="cfp-hotkeys-keys"> <span *ngFor="let key of hotkey.formatted">{{ key }}</span>
<span *ngFor="let key of hotkey.formatted" class="cfp-hotkeys-key">{{ key }}</span> </div>
</td>
<td class="cfp-hotkeys-text">{{ hotkey.description }}</td> <div class="cfp-hotkeys-text">{{ hotkey.description }}</div>
</tr> </li>
</tbody> </ul>
</table>
</div>
<button class="button-unstyle cfp-hotkeys-close" (click)="toggleCheatSheet()">&#215;</button> <button class="button-unstyle cfp-hotkeys-close" (click)="toggleCheatSheet()">&#215;</button>
</div> </div>
</div> </div>

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

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