more style fixes, added alt texts

This commit is contained in:
mchouliara 2024-09-27 16:01:01 +03:00
parent c7e4ae3ff9
commit 2d4504a91b
31 changed files with 87 additions and 65 deletions

View File

@ -41,7 +41,6 @@ export class AppComponent implements OnInit, AfterViewInit {
cssConfigLoaded = false; cssConfigLoaded = false;
@ViewChild('sidenav') sidenav: MatSidenav; @ViewChild('sidenav') sidenav: MatSidenav;
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
constructor( constructor(
private router: Router, private router: Router,

View File

@ -37,7 +37,7 @@
</div> </div>
</div> </div>
<div class="col-auto p-0 d-flex align-items-end"> <div class="col-auto p-0 d-flex align-items-end">
<img src="../../../assets/images/guided-tour-side.png" alt="cartoon tour pointing to text with raised arm"> <img src="../../../assets/images/guided-tour-side.png" alt="{{('ALT-TEXT.GUIDED-TOUR-IMG' | translate) ?? 'tour guide image'}}">
</div> </div>
</div> </div>
</div> </div>

View File

@ -3,10 +3,11 @@ import { GuidedTourComponent } from './guided-tour.component';
import { NgModule, ErrorHandler, ModuleWithProviders } from '@angular/core'; import { NgModule, ErrorHandler, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { WindowRefService } from './windowref.service'; import { WindowRefService } from './windowref.service';
import { TranslateModule } from '@ngx-translate/core';
@NgModule({ @NgModule({
declarations: [GuidedTourComponent], declarations: [GuidedTourComponent],
imports: [CommonModule], imports: [CommonModule, TranslateModule],
providers: [WindowRefService], providers: [WindowRefService],
exports: [GuidedTourComponent] exports: [GuidedTourComponent]
}) })

View File

@ -6,7 +6,7 @@
</div> </div>
</div> </div>
<div *ngIf="progressIndication" class="progress-bar"> <div *ngIf="progressIndication" class="progress-bar">
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar> <mat-progress-bar color="primary" mode="indeterminate" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
</div> </div>
<div mat-dialog-content class="definition-content"> <div mat-dialog-content class="definition-content">
<app-description-form *ngIf="formGroup && formGroup.get('properties')" [propertiesFormGroup]="previewPropertiesFormGroup" [descriptionId]="descriptionId" [descriptionTemplate]="descriptionTemplate" [canAnnotate]="false" [visibilityRulesService]="visibilityRulesService" [isNew]="true"></app-description-form> <app-description-form *ngIf="formGroup && formGroup.get('properties')" [propertiesFormGroup]="previewPropertiesFormGroup" [descriptionId]="descriptionId" [descriptionTemplate]="descriptionTemplate" [canAnnotate]="false" [visibilityRulesService]="visibilityRulesService" [isNew]="true"></app-description-form>

View File

@ -160,7 +160,7 @@
<li class="list-inline-item" *ngIf="!viewOnly"> <li class="list-inline-item" *ngIf="!viewOnly">
<span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger"> <span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}" /> <img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="{{('DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate) ?? 'add input'}}" />
<span class="fieldset-new-input-action">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span> <span class="fieldset-new-input-action">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span>
</span> </span>
<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'"> <mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">

View File

@ -105,12 +105,12 @@
<div class="row"> <div class="row">
<ng-container *ngIf="annotationsPerThread[thread].length === 1 && !this.showRepliesPerThread[thread]"> <ng-container *ngIf="annotationsPerThread[thread].length === 1 && !this.showRepliesPerThread[thread]">
<button mat-button class="action-button mt-3" (click)="showReplies(thread)"> <button mat-button class="action-button mt-3" (click)="showReplies(thread)">
<img src="/assets/images/annotations/reply.png" alt="{{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}"> <span class="mt-1 reply-btn"> 1 {{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}} </span> <img src="/assets/images/annotations/reply.png" alt="{{ ('ANNOTATION-DIALOG.THREADS.REPLY' | translate) ?? 'reply'}}"> <span class="mt-1 reply-btn"> 1 {{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}} </span>
</button> </button>
</ng-container> </ng-container>
<ng-container *ngIf="annotationsPerThread[thread].length > 1 && !this.showRepliesPerThread[thread]"> <ng-container *ngIf="annotationsPerThread[thread].length > 1 && !this.showRepliesPerThread[thread]">
<button mat-button class="action-button mt-3" (click)="showReplies(thread)"> <button mat-button class="action-button mt-3" (click)="showReplies(thread)">
<img src="/assets/images/annotations/reply.png" alt="{{ 'ANNOTATION-DIALOG.THREADS.REPLY' | translate}}"> <span class="mt-1 reply-btn"> {{ annotationsPerThread[thread].length }} {{ 'ANNOTATION-DIALOG.THREADS.REPLIES' | translate}} </span> <img src="/assets/images/annotations/reply.png" alt="{{ ('ANNOTATION-DIALOG.THREADS.REPLY' | translate) ?? 'reply'}}"> <span class="mt-1 reply-btn"> {{ annotationsPerThread[thread].length }} {{ 'ANNOTATION-DIALOG.THREADS.REPLIES' | translate}} </span>
</button> </button>
</ng-container> </ng-container>
</div> </div>

View File

@ -22,7 +22,7 @@
</a> </a>
</div> </div>
<span class="new-releases-logo"> <span class="new-releases-logo">
<img src="../../../assets/images/new-releases-logo.png" alt="{{'ALT-TEXT.NEW-RELEASES' | translate}}"> <img src="../../../assets/images/new-releases-logo.png" alt="{{('ALT-TEXT.NEW-RELEASES' | translate) ?? 'new releases'}}">
</span> </span>
</div> </div>
</div> </div>
@ -54,7 +54,7 @@
</div> </div>
</div> </div>
<span class="col-auto ml-auto"> <span class="col-auto ml-auto">
<img class="laptop-img\6" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png"> <img class="laptop-img\6" alt="{{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard popup image' }}" src="../../../assets/images/dashboard-popup.png">
</span> </span>
</div> </div>
</div> </div>
@ -176,7 +176,7 @@
<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p> <p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
</div> </div>
<div class="d-flex"> <div class="d-flex">
<img class="col-auto ml-auto laptop-img" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png"> <img class="col-auto ml-auto laptop-img" alt="{{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard popup image' }}" src="../../../assets/images/dashboard-popup.png">
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,7 +1,7 @@
<div class="demo-progress-bar-container" *ngIf="!formGroup.disabled"> <div class="demo-progress-bar-container" *ngIf="!formGroup.disabled">
<div class="percentage d-flex justify-content-center"><span *ngIf="total>0">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</span>&nbsp;</div> <div class="percentage d-flex justify-content-center"><span *ngIf="total>0">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</span>&nbsp;</div>
<mat-progress-bar *ngIf="value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="value"></mat-progress-bar> <mat-progress-bar *ngIf="value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="value" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
<mat-progress-bar *ngIf="!value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="0"></mat-progress-bar> <mat-progress-bar *ngIf="!value" class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="0" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
<div class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }"> <div class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }">
<span *ngIf="value">{{value}}%</span> <span *ngIf="value">{{value}}%</span>
<span *ngIf="!value">0%</span> <span *ngIf="!value">0%</span>

View File

@ -8,7 +8,7 @@
</span> </span>
</div> </div>
<div *ngIf="progressIndication" class="progress-bar"> <div *ngIf="progressIndication" class="progress-bar">
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar> <mat-progress-bar color="primary" mode="indeterminate" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
</div> </div>
<div mat-dialog-content *ngIf="prefillForm" [formGroup]="prefillForm" class="definition-content"> <div mat-dialog-content *ngIf="prefillForm" [formGroup]="prefillForm" class="definition-content">
<div class="row d-flex align-items-center"> <div class="row d-flex align-items-center">

View File

@ -9,7 +9,7 @@
<button mat-button class="rounded-btn secondary align-self-center" (click)="addNewDescription()"> <button mat-button class="rounded-btn secondary align-self-center" (click)="addNewDescription()">
{{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}} {{'DESCRIPTION-LISTING.ACTIONS.ADD-DESCRIPTION' | translate}}
</button> </button>
<img class="col-auto ml-auto laptop-img" alt="{{'ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate }}" src="../../../assets/images/dashboard-popup.png"> <img class="col-auto ml-auto laptop-img" alt="{{('ALT-TEXT.DASHBOARD-POPUP-IMAGE' | translate) ?? 'dashboard pop up image' }}" src="../../../assets/images/dashboard-popup.png">
</div> </div>
</div> </div>
</div> </div>

View File

@ -33,32 +33,32 @@
</div> </div>
</a> </a>
<div class="description-card-actions"> <div class="description-card-actions">
<a <div role="button"
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
*ngIf="fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description) && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description).length > 0" *ngIf="fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description) && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Description).length > 0"
[matMenuTriggerFor]="exportMenu" [matMenuTriggerFor]="exportMenu"
> >
<mat-icon class="material-icons icon-align pr-2" aria-hidden>open_in_new</mat-icon> <mat-icon class="material-icons icon-align pr-2" aria-hidden>open_in_new</mat-icon>
{{'DESCRIPTION-LISTING.ACTIONS.EXPORT' | translate}} {{'DESCRIPTION-LISTING.ACTIONS.EXPORT' | translate}}
</a> </div>
<a <div role="button"
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
*ngIf="canInvitePlanUsers" *ngIf="canInvitePlanUsers"
(click)="openShareDialog()" (click)="openShareDialog()"
> >
<mat-icon class="material-icons icon-align pr-2" aria-hidden>group_add</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.INVITE-SHORT' | translate}}</a> <mat-icon class="material-icons icon-align pr-2" aria-hidden>group_add</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.INVITE-SHORT' | translate}}</div>
<a <div role="button"
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
*ngIf="isAuthenticated()" *ngIf="isAuthenticated()"
(click)="copyToPlan(description)" (click)="copyToPlan(description)"
> >
<mat-icon class="material-icons icon-align pr-2" aria-hidden>file_copy</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.COPY-DESCRIPTION' | translate}}</a> <mat-icon class="material-icons icon-align pr-2" aria-hidden>file_copy</mat-icon>{{'DESCRIPTION-LISTING.ACTIONS.COPY-DESCRIPTION' | translate}}</div>
<a <div role="button"
class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem"
*ngIf="canDelete" *ngIf="canDelete"
(click)="deleteClicked(description.id)" (click)="deleteClicked(description.id)"
> >
<mat-icon class="material-icons icon-align pr-2" aria-hidden>delete</mat-icon>{{ 'DESCRIPTION-LISTING.ACTIONS.DELETE' | translate }}</a> <mat-icon class="material-icons icon-align pr-2" aria-hidden>delete</mat-icon>{{ 'DESCRIPTION-LISTING.ACTIONS.DELETE' | translate }}</div>
</div> </div>
<mat-menu #actionsMenu="matMenu"> <mat-menu #actionsMenu="matMenu">
<button *ngIf="isAuthenticated()" mat-menu-item (click)="copyToPlan(description)" class="menu-item"> <button *ngIf="isAuthenticated()" mat-menu-item (click)="copyToPlan(description)" class="menu-item">

View File

@ -149,14 +149,14 @@ input[type="text"] {
color: var(--gray); color: var(--gray);
} }
.description-card-actions a, .description-card-actions div,
.plan-card-actions a { .plan-card-actions div {
color: var(--gray) !important; color: var(--gray) !important;
text-decoration: none !important; text-decoration: none !important;
} }
.description-card-actions a:hover, .description-card-actions div:hover,
.plan-card-actions a:hover { .plan-card-actions div:hover {
color: var(--primary-color) !important; color: var(--primary-color) !important;
} }

View File

@ -8,12 +8,12 @@
</button> </button>
<h1 class="logo mr-auto" > <h1 class="logo mr-auto" >
<a [routerLink]="routerUtils.generateUrl(['home'])"> <a [routerLink]="routerUtils.generateUrl(['home'])">
<img class="logo-image" alt="{{'ALT-TEXT.GO-TO-MAIN' | translate}}" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension"> <img class="logo-image" alt="{{('ALT-TEXT.GO-TO-MAIN' | translate) ?? 'go to main page'}}" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension">
</a> </a>
</h1> </h1>
@if(extraImageURL){ @if(extraImageURL){
<a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])"> <a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])">
<img aria-hidden class="extra-logo-image" [src]="extraImageURL" alt="{{'ALT-TEXT.GO-TO-MAIN' | translate}}" > <img aria-hidden class="extra-logo-image" [src]="extraImageURL" alt="{{('ALT-TEXT.GO-TO-MAIN' | translate) ?? 'go to main page'}}" >
</a> </a>
} }
@ -70,7 +70,7 @@
<li class="pl-2"> <li class="pl-2">
@if(this.isAuthenticated()) { @if(this.isAuthenticated()) {
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;"> <button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
<img alt="{{'ALT-TEXT.USER-OPTIONS' | translate}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)"> <img alt="{{('ALT-TEXT.USER-OPTIONS' | translate) ?? 'user options'}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
</button> </button>
}@else { }@else {
<ng-container *ngTemplateOutlet="loginOptionTemplate"/> <ng-container *ngTemplateOutlet="loginOptionTemplate"/>

View File

@ -41,7 +41,7 @@ $mat-card-header-size: 40px !default;
display: flex; display: flex;
background: #ffffff 0% 0% no-repeat padding-box; background: #ffffff 0% 0% no-repeat padding-box;
#navigation { #navigation {
color: var(--dark-gray); color: #555;
} }
box-shadow: 0px 0px 6px #00000029; box-shadow: 0px 0px 6px #00000029;

View File

@ -41,28 +41,28 @@
<a class="d-flex justify-content-center pb-3 show-more" *ngIf="plan.descriptions?.length > 3" [routerLink]="isPublic ? this.routerUtils.generateUrl(['/explore-plans/overview/public/', plan.id]) : this.routerUtils.generateUrl(['/plans/overview/', plan.id])"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a> <a class="d-flex justify-content-center pb-3 show-more" *ngIf="plan.descriptions?.length > 3" [routerLink]="isPublic ? this.routerUtils.generateUrl(['/explore-plans/overview/public/', plan.id]) : this.routerUtils.generateUrl(['/plans/overview/', plan.id])"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
</a> </a>
<div class="plan-card-actions"> <div class="plan-card-actions">
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canExportPlan && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan).length > 0" [matMenuTriggerFor]="exportMenu"> <div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canExportPlan && fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan).length > 0" [matMenuTriggerFor]="exportMenu">
<mat-icon class="material-icons icon-align pr-2" aria-hidden>open_in_new</mat-icon>{{'PLAN-LISTING.ACTIONS.EXPORT' | translate}} <mat-icon class="material-icons icon-align pr-2" aria-hidden>open_in_new</mat-icon>{{'PLAN-LISTING.ACTIONS.EXPORT' | translate}}
</a> </div>
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canEditPlan" [routerLink]="this.routerUtils.generateUrl(['/plans/edit/', plan.id])" target="_blank"> <div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canEditPlan" [routerLink]="this.routerUtils.generateUrl(['/plans/edit/', plan.id])" target="_blank">
<mat-icon class="material-icons icon-align">add</mat-icon>{{'PLAN-LISTING.ACTIONS.ADD-DESCRIPTION-SHORT' | translate}} <mat-icon class="material-icons icon-align">add</mat-icon>{{'PLAN-LISTING.ACTIONS.ADD-DESCRIPTION-SHORT' | translate}}
</a> </div>
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canInvitePlanUsers" (click)="inviteToPlan()"> <div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canInvitePlanUsers" (click)="inviteToPlan()">
<mat-icon class="material-icons icon-align pr-2" aria-hidden>group_add</mat-icon>{{'PLAN-LISTING.ACTIONS.INVITE-SHORT' | translate}} <mat-icon class="material-icons icon-align pr-2" aria-hidden>group_add</mat-icon>{{'PLAN-LISTING.ACTIONS.INVITE-SHORT' | translate}}
</a> </div>
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canClonePlan" (click)="cloneClicked()"> <div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canClonePlan" (click)="cloneClicked()">
<mat-icon class="material-icons icon-align pr-2" aria-hidden>filter_none</mat-icon>{{'PLAN-LISTING.ACTIONS.CLONE' | translate}} <mat-icon class="material-icons icon-align pr-2" aria-hidden>filter_none</mat-icon>{{'PLAN-LISTING.ACTIONS.CLONE' | translate}}
</a> </div>
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="!isAuthenticated() && showAllVersionsAction" (click)="viewVersions(plan)"> <div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="!isAuthenticated() && showAllVersionsAction" (click)="viewVersions(plan)">
<mat-icon class="material-icons icon-align pr-2" aria-hidden>library_books</mat-icon>{{'PLAN-LISTING.ACTIONS.VIEW-VERSION' | translate}} <mat-icon class="material-icons icon-align pr-2" aria-hidden>library_books</mat-icon>{{'PLAN-LISTING.ACTIONS.VIEW-VERSION' | translate}}
</a> </div>
<a class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canDeletePlan" (click)="deleteClicked(plan.id)"> <div role="button" class="col-auto border-right pointer d-flex align-items-center gap-quarter-rem" *ngIf="canDeletePlan" (click)="deleteClicked(plan.id)">
<mat-icon class="material-icons icon-align pr-2" aria-hidden>delete</mat-icon>{{ 'PLAN-LISTING.ACTIONS.DELETE' | translate }} <mat-icon class="material-icons icon-align pr-2" aria-hidden>delete</mat-icon>{{ 'PLAN-LISTING.ACTIONS.DELETE' | translate }}
</a> </div>
<a class="col-auto pointer" *ngIf="showActionsMenu" [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate"> <div role="button" class="col-auto pointer" *ngIf="showActionsMenu" [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon> <mat-icon>more_horiz</mat-icon>
</a> </div>
</div> </div>
<mat-menu #exportMenu="matMenu" xPosition="before"> <mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan)' (click)="fileTransformerService.exportPlan(plan.id, fileTransformer.repositoryId, fileTransformer.format, isPublic)"> <button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Plan)' (click)="fileTransformerService.exportPlan(plan.id, fileTransformer.repositoryId, fileTransformer.format, isPublic)">

View File

@ -183,14 +183,14 @@ input[type="text"] {
color: var(--gray); color: var(--gray);
} }
.description-card-actions a, .description-card-actions div,
.plan-card-actions a { .plan-card-actions div {
color: var(--gray) !important; color: var(--gray) !important;
text-decoration: none !important; text-decoration: none !important;
} }
.description-card-actions a:hover, .description-card-actions div:hover,
.plan-card-actions a:hover { .plan-card-actions div:hover {
color: var(--primary-color) !important; color: var(--primary-color) !important;
} }

View File

@ -184,7 +184,7 @@
<ng-container *ngIf="isDraftPlan() && canFinalizePlan() && !isLocked"> <ng-container *ngIf="isDraftPlan() && canFinalizePlan() && !isLocked">
<div role="button" aria-describedby="{{ 'PLAN-OVERVIEW.ACTIONS.FINALIZE' | translate }}" class="row align-items-center" (click)="finalize(plan)"> <div role="button" aria-describedby="{{ 'PLAN-OVERVIEW.ACTIONS.FINALIZE' | translate }}" class="row align-items-center" (click)="finalize(plan)">
<div class="col-auto pr-0" aria-hidden> <div class="col-auto pr-0" aria-hidden>
<button mat-mini-fab class="finalize-btn"> <button mat-mini-fab class="finalize-btn" aria-hidden="true">
<mat-icon class="mat-mini-fab-icon" aria-hidden>check</mat-icon> <mat-icon class="mat-mini-fab-icon" aria-hidden>check</mat-icon>
</button> </button>
</div> </div>
@ -219,7 +219,7 @@
</button> </button>
</div> </div>
<div class="col-auto pl-0"> <div class="col-auto pl-0">
<p class="mb-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'PLAN-OVERVIEW.ACTIONS.EXPORT' | translate }}</p> <p role="button" class="mb-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'PLAN-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
</div> </div>
</div> </div>
</ng-container> </ng-container>

View File

@ -1,5 +1,5 @@
<div class="demo-progress-bar-container"> <div class="demo-progress-bar-container">
<div class="percentage d-flex justify-content-center">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</div> <div class="percentage d-flex justify-content-center">{{progressSoFar}} {{'GENERAL.PREPOSITIONS.OF' | translate}} {{total}}</div>
<mat-progress-bar class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="value"></mat-progress-bar> <mat-progress-bar class="form-progress-bar" [ngClass]="{'progress-bar': true}" mode="determinate" [value]="value" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
<div class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }">{{value}}%</div> <div class="percentage" [ngStyle]="{'padding-left': value ? value - 10 + '%' : 0 + '%' }">{{value}}%</div>
</div> </div>

View File

@ -30,7 +30,7 @@
<div class="col"> <div class="col">
<div class="row mb-4"> <div class="row mb-4">
<div class="col-auto"> <div class="col-auto">
<img mat-card-avatar class="avatar" [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)" alt="{{''ALT-TEXT.USER-AVATAR' | translate}}"> <img mat-card-avatar class="avatar" [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)" alt="{{('ALT-TEXT.USER-AVATAR' | translate) ?? 'user avatar'}}">
</div> </div>
<div class="col-auto d-flex flex-column justify-content-center main-info"> <div class="col-auto d-flex flex-column justify-content-center main-info">
<div class="name">{{formGroup.get('name').value}}</div> <div class="name">{{formGroup.get('name').value}}</div>

View File

@ -2603,6 +2603,8 @@
"MORE-ACTIONS": "More actions", "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu", "OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card" "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed"
} }
} }

View File

@ -2606,6 +2606,8 @@
"MORE-ACTIONS": "More actions", "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu", "OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card" "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed"
} }
} }

View File

@ -2607,6 +2607,8 @@
"MORE-ACTIONS": "More actions", "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu", "OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card" "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed"
} }
} }

View File

@ -2606,6 +2606,8 @@
"MORE-ACTIONS": "More actions", "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu", "OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card" "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed"
} }
} }

View File

@ -2606,6 +2606,8 @@
"MORE-ACTIONS": "More actions", "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu", "OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card" "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed"
} }
} }

View File

@ -2605,6 +2605,8 @@
"MORE-ACTIONS": "More actions", "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu", "OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card" "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed"
} }
} }

View File

@ -2606,6 +2606,8 @@
"MORE-ACTIONS": "More actions", "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu", "OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card" "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed"
} }
} }

View File

@ -2605,6 +2605,8 @@
"MORE-ACTIONS": "More actions", "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu", "OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card" "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed"
} }
} }

View File

@ -2606,6 +2606,8 @@
"MORE-ACTIONS": "More actions", "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu", "OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card" "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed"
} }
} }

View File

@ -2606,6 +2606,8 @@
"MORE-ACTIONS": "More actions", "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu", "OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card" "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed"
} }
} }

View File

@ -2606,6 +2606,8 @@
"MORE-ACTIONS": "More actions", "MORE-ACTIONS": "More actions",
"OPEN-MENU-FOR": "Open menu", "OPEN-MENU-FOR": "Open menu",
"CLOSE-RELEASE": "Close release notifications", "CLOSE-RELEASE": "Close release notifications",
"CLOSE-INTRO-CARD": "Close intro card" "CLOSE-INTRO-CARD": "Close intro card",
"GUIDED-TOUR-IMG": "cartoon tour pointing to text with raised arm",
"PROGRESS-BAR": "Percentage of the form that is completed"
} }
} }

View File

@ -157,7 +157,6 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
font-weight: 300; font-weight: 300;
line-height: 1.5em;
} }
@ -172,6 +171,7 @@ a {
} }
} }
.required-text { .required-text {
font-size: 13px; font-size: 13px;
} }
@ -480,7 +480,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
&.rounded-btn{ &.rounded-btn{
padding: 0.62rem 1.87rem; padding: 0.62rem 1.87rem;
height: 40px; min-height: 40px;
border-radius: 30px; border-radius: 30px;
opacity: 1; opacity: 1;