diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html index 1aefaa617f50d8474b34bd15d041db15507666bd..ab25efff639d8f59c84774b016676dca5161c98c 100644 --- a/src/app/structure-list/components/structure-details/structure-details.component.html +++ b/src/app/structure-list/components/structure-details/structure-details.component.html @@ -368,54 +368,26 @@ <span *ngIf="!multipleWorkshop()" class="bold-info">L'accès à cette formation est gratuit</span> </div> <div class="formationDetails"> - <!--Toggle BaseSkills--> - <div *ngIf="hasBaseSkills()" class="collapse" [ngClass]="{ notCollapsed: !showBaseSkills }"> + <!-- BaseSkills--> + <div *ngIf="hasBaseSkills()" class="skills"> <div fxLayout="column"> - <div - class="collapseHeader" - fxLayout="row" - fxLayoutGap="20px" - fxLayoutAlign=" center" - (click)="toggleBaseSkills()" - > - <div class="titleCollapse">Compétences numériques de base</div> - <div class="logo"> - <svg class="show" aria-hidden="true"> - <use [attr.xlink:href]="'assets/form/sprite.svg#unfold'"></use> - </svg> - <svg class="hide" aria-hidden="true"> - <use [attr.xlink:href]="'assets/form/sprite.svg#fold'"></use> - </svg> - </div> + <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign=" center"> + <div class="titleSkills">Compétences numériques de base</div> </div> - <div class="detailsContainer" [@show]="showBaseSkills"> + <div class="detailsContainer"> <ul> <li class="details" *ngFor="let skill of structure.categoriesDisplay.baseSkills">{{ skill }}</li> </ul> </div> </div> </div> - <!--Toggle advancedSkills--> - <div *ngIf="hasAdvancedSkills()" class="collapse" [ngClass]="{ notCollapsed: !showAdvancedSkills }"> + <!-- advancedSkills--> + <div *ngIf="hasAdvancedSkills()" class="skills"> <div fxLayout="column"> - <div - class="collapseHeader" - fxLayout="row" - fxLayoutGap="20px" - fxLayoutAlign=" center" - (click)="toggleAdvancedSkills()" - > - <div class="titleCollapse">Culture Numérique</div> - <div class="logo"> - <svg class="show" aria-hidden="true"> - <use [attr.xlink:href]="'assets/form/sprite.svg#unfold'"></use> - </svg> - <svg class="hide" aria-hidden="true"> - <use [attr.xlink:href]="'assets/form/sprite.svg#fold'"></use> - </svg> - </div> + <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign=" center"> + <div class="titleSkills">Culture Numérique</div> </div> - <div class="detailsContainer" [@show]="showAdvancedSkills"> + <div class="detailsContainer"> <ul> <li class="details" *ngFor="let skill of structure.categoriesDisplay.advancedSkills">{{ skill }}</li> </ul> diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss index cce48d930c02dfa0edc659dfa8ca3ee44158324e..fd8572e9466d4fd0682ff62c557f0d590de713d1 100644 --- a/src/app/structure-list/components/structure-details/structure-details.component.scss +++ b/src/app/structure-list/components/structure-details/structure-details.component.scss @@ -201,47 +201,16 @@ ul { .formationDetails { width: 100%; - .collapse { + .skills { margin-bottom: 13px; @media #{$small-phone} { width: 95% !important; - } - &.notCollapsed { border-bottom: 2px solid $grey-8; - .logo { - .hide { - display: none; - } - .show { - display: block; - } - } } - .titleCollapse { + .titleSkills { width: 100%; @include lato-regular-16; } - .collapseHeader { - cursor: pointer; - } - .logo { - height: 24px; - width: 24px; - svg { - width: 100%; - height: 100%; - fill: $grey-1; - } - } - .logo, - .titleCollapse { - .hide { - display: block; - } - .show { - display: none; - } - } .detailsContainer { margin: 8px 0px; padding: 8px 0; diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts index 829f53c61bacd4b77c1ef6e9544855c12d686464..dfc9177bb4e6aa66b805a3eedeedaa17c4840368 100644 --- a/src/app/structure-list/components/structure-details/structure-details.component.ts +++ b/src/app/structure-list/components/structure-details/structure-details.component.ts @@ -1,4 +1,4 @@ -import { animate, AUTO_STYLE, state, style, transition, trigger } from '@angular/animations'; +import { animate, style, transition, trigger } from '@angular/animations'; import { Location } from '@angular/common'; import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; @@ -34,12 +34,6 @@ import { SearchService } from '../../services/search.service'; ]), transition(':leave', [animate('200ms ease-in', style({ backgroundColor: 'rgb(00, 00, 00, 0)' }))]), ]), - trigger('show', [ - state('true', style({ height: AUTO_STYLE, visibility: AUTO_STYLE, margin: '8px 0' })), - state('false', style({ height: '0px', visibility: 'hidden', margin: '0' })), - transition('true => false', animate('300ms ease-out')), - transition('false => true', animate('300ms ease-out')), - ]), ], }) export class StructureDetailsComponent implements OnInit { @@ -47,8 +41,6 @@ export class StructureDetailsComponent implements OnInit { @Output() public closeDetails: EventEmitter<boolean> = new EventEmitter<boolean>(); public accessModality = AccessModality; public categories: Category[] = []; - public showBaseSkills = false; - public showAdvancedSkills = false; public tclStopPoints: TclStopPoint[] = []; public printMode = false; public isLoading = true; @@ -79,9 +71,6 @@ export class StructureDetailsComponent implements OnInit { if (url.length > 0 && url[0].path === 'structure') { this.structure = new Structure(this.printService.structure); this.printMode = true; - // Display formations for printing - this.toggleAdvancedSkills(); - this.toggleBaseSkills(); this.initForm(); } }); @@ -299,14 +288,6 @@ export class StructureDetailsComponent implements OnInit { return false; } - public toggleBaseSkills(): void { - this.showBaseSkills = !this.showBaseSkills; - } - - public toggleAdvancedSkills(): void { - this.showAdvancedSkills = !this.showAdvancedSkills; - } - public goToWebsite(): void { let url = this.structure.website; if (!url.startsWith('http')) {