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

Add sub menu skip links

This commit is contained in:
Chocobozzz 2024-09-27 14:56:29 +02:00
parent 9e2649b8b7
commit e5e94644c2
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
5 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/+admin/admin.component.html
View File

@ -1,7 +1,9 @@
<div class="root"> <div class="root">
<a i18n class="visually-hidden-focusable skip-to-content-sub-menu" href="#admin-content" (click)="$event.preventDefault(); adminContent.focus()">Skip the sub menu</a>
<my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown> <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
<div class="margin-content" [ngClass]="{ 'sub-menu-offset-content': !isBroadcastMessageDisplayed }"> <div #adminContent tabindex="-1" id="admin-content" class="margin-content outline-0" [ngClass]="{ 'sub-menu-offset-content': !isBroadcastMessageDisplayed }">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
</div> </div>

4
client/src/app/+my-account/my-account.component.html
View File

@ -1,7 +1,9 @@
<div class="root"> <div class="root">
<a i18n class="visually-hidden-focusable skip-to-content-sub-menu" href="#my-account-content" (click)="$event.preventDefault(); myAccountContent.focus()">Skip the sub menu</a>
<my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown> <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
<div class="margin-content pb-5" [ngClass]="{ 'sub-menu-offset-content': !isBroadcastMessageDisplayed }"> <div #myAccountContent tabindex="-1" id="my-account-content" class="margin-content pb-5 outline-0" [ngClass]="{ 'sub-menu-offset-content': !isBroadcastMessageDisplayed }">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
</div> </div>

4
client/src/app/+my-library/my-library.component.html
View File

@ -1,7 +1,9 @@
<div class="root"> <div class="root">
<a i18n class="visually-hidden-focusable skip-to-content-sub-menu" href="#my-library-content" (click)="$event.preventDefault(); myLibraryContent.focus()">Skip the sub menu</a>
<my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown> <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
<div class="margin-content pb-5" [ngClass]="{ 'sub-menu-offset-content': !isBroadcastMessageDisplayed }"> <div #myLibraryContent tabindex="-1" id="my-library-content" class="margin-content pb-5 outline-0" [ngClass]="{ 'sub-menu-offset-content': !isBroadcastMessageDisplayed }">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
</div> </div>

9
client/src/sass/application.scss
View File

@ -172,6 +172,15 @@ code {
} }
} }
.skip-to-content-sub-menu {
display: block;
z-index: z(modal);
padding: 1rem;
background: pvar(--mainBackgroundColor);
text-align: center;
text-decoration: underline;
}
// Use an appropriate offset top when sub-menu fixed // Use an appropriate offset top when sub-menu fixed
.sub-menu-offset-content { .sub-menu-offset-content {
padding-top: $sub-menu-height + $sub-menu-margin-bottom; padding-top: $sub-menu-height + $sub-menu-margin-bottom;

6
client/src/sass/class-helpers/_common.scss
View File

@ -101,3 +101,9 @@
.chip { .chip {
@include chip; @include chip;
} }
// ---------------------------------------------------------------------------
.outline-0 {
outline: none;
}