MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

breadcrumbs styling fixes

This commit is contained in:
Sofia Papacharalampous 2024-05-30 18:02:35 +03:00
parent a60862f84e
commit 6f4611055e
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/ui/description/overview/description-overview.component.scss
View File

@ -303,7 +303,7 @@
} }
.author-focused { .author-focused {
background-color: #e0e0e0; background-color: #ececec;
border-radius: 3px; border-radius: 3px;
} }

18
dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.html
View File

@ -1,16 +1,20 @@
<nav class="list-inline list-unstyled"> <nav class="list-inline list-unstyled">
<li *ngFor="let item of breadCrumbs; let first = first; let index = index;let last = last" class="list-inline-item mr-2"> <li *ngFor="let item of breadCrumbs; let first = first; let index = index;let last = last" class="list-inline-item m-0">
<div style="display: flex; justify-content: center; align-items:center" *ngIf="!item?.hideItem"> <div style="display: flex; justify-content: center; align-items:center" *ngIf="!item?.hideItem">
<mat-icon [class.hidden]="first">chevron_right</mat-icon> <mat-icon [class.hidden]="first">chevron_right</mat-icon>
<a *ngIf="(!item?.skipNavigation && !last) else regularText" [routerLink]="computePath(index)" class="text-black" disabled> <a *ngIf="(!item?.skipNavigation && !last) else regularText" [routerLink]="computePath(index)" class=" text-black" disabled>
<ng-container *ngIf="item.title !== HOME_SYMBOL else homeIcon"> <ng-container *ngIf="item.title !== HOME_SYMBOL else homeIcon">
{{ item.title | translate:item.translateParams | appTitleCaseTransform }} <span class="breadcrumb-item p-2">
{{ item.title | translate:item.translateParams | appTitleCaseTransform }}
</span>
</ng-container> </ng-container>
</a> </a>
<ng-template #regularText> <ng-template #regularText>
<ng-container *ngIf="item.title !== HOME_SYMBOL else homeIcon"> <ng-container *ngIf="item.title !== HOME_SYMBOL else homeIcon">
{{ item.title | translate:item.translateParams | appTitleCaseTransform }} <span class="p-2">
{{ item.title | translate:item.translateParams | appTitleCaseTransform }}
</span>
</ng-container> </ng-container>
</ng-template> </ng-template>
@ -19,8 +23,6 @@
</li> </li>
</nav> </nav>
<ng-template #homeIcon> <ng-template #homeIcon>
<mat-icon style="width: 1.5rem; height: 1.5rem; font-size: 1.2rem; color: #949597" class="text-muted">home</mat-icon> <mat-icon style="width: auto; height: auto; font-size: 1.2rem; color: #949597" class="text-muted breadcrumb-item p-2">home</mat-icon>
</ng-template> </ng-template>

8
dmp-frontend/src/app/ui/misc/breadcrumb/navigation-breadcrumb.component.scss
View File

@ -10,4 +10,10 @@
.mat-icon{ .mat-icon{
font-size: 1rem; font-size: 1rem;
height: 1rem; height: 1rem;
} }
.breadcrumb-item:hover {
background-color: #ececec;
border-radius: 16px;
}