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

Improve menu nested li/ul

pull/6648/head
Chocobozzz 2024-09-27 16:02:38 +02:00
parent ad71614706
commit ae31ff79ac
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/app/menu/menu.component.html
View File

@ -121,12 +121,12 @@
<ng-container *ngFor="let menuSection of menuSections" > <ng-container *ngFor="let menuSection of menuSections" >
<ul [ngClass]="[ menuSection.key, 'menu-block' ]"> <ul [ngClass]="[ menuSection.key, 'menu-block' ]">
<li i18n class="block-title">{{ menuSection.title }}</li> <li i18n class="block-container">
<span class="block-title">{{ menuSection.title }}</span>
<li> <ul class="mt-3">
<ul>
<li *ngFor="let link of menuSection.links"> <li *ngFor="let link of menuSection.links">
<a class="menu-link" [routerLink]="link.path" routerLinkActive="active"> <a class="menu-link ps-0" [routerLink]="link.path" routerLinkActive="active">
<my-global-icon *ngIf="link.icon" [iconName]="link.icon" [ngClass]="link.iconClass" aria-hidden="true"></my-global-icon> <my-global-icon *ngIf="link.icon" [iconName]="link.icon" [ngClass]="link.iconClass" aria-hidden="true"></my-global-icon>
<ng-container>{{ link.shortLabel }}</ng-container> <ng-container>{{ link.shortLabel }}</ng-container>
</a> </a>
@ -138,17 +138,21 @@
</div> </div>
<div class="footer"> <div class="footer">
<div class="footer-block"> <ul class="footer-block">
<li>
<button *ngIf="!isLoggedIn" class="menu-link button-unstyle" (click)="openQuickSettings()"> <button *ngIf="!isLoggedIn" class="menu-link button-unstyle" (click)="openQuickSettings()">
<my-global-icon iconName="cog" aria-hidden="true"></my-global-icon> <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
<ng-container i18n>My settings</ng-container> <ng-container i18n>My settings</ng-container>
</button> </button>
</li>
<li>
<a class="menu-link" routerLink="/about" routerLinkActive="active"> <a class="menu-link" routerLink="/about" routerLinkActive="active">
<my-global-icon iconName="help" aria-hidden="true"></my-global-icon> <my-global-icon iconName="help" aria-hidden="true"></my-global-icon>
<ng-container i18n>About</ng-container> <ng-container i18n>About</ng-container>
</a> </a>
</div> </li>
</ul>
<div class="footer-bottom"> <div class="footer-bottom">

15
client/src/app/menu/menu.component.scss
View File

@ -272,15 +272,16 @@ my-actor-avatar {
.footer-block { .footer-block {
margin-bottom: 15px; margin-bottom: 15px;
.block-title { .block-container {
text-transform: uppercase;
font-weight: $font-bold; // Bold
font-size: 13px;
margin-bottom: 25px;
@include ellipsis;
@include margin-left(26px); @include margin-left(26px);
@include margin-right(15px); @include margin-right(15px);
@include ellipsis;
}
.block-title {
text-transform: uppercase;
font-weight: $font-bold;
font-size: 13px;
} }
a, a,