From c0b2fa62addf3ca1d12fea74e6d9e44d6817259f Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Thu, 7 Mar 2024 15:28:56 +0100
Subject: [PATCH] fix(structureDetails): reorganize sections to match mockup
---
.../structure-details.component.html | 216 +++++++++---------
.../structure-details.component.scss | 2 +-
2 files changed, 111 insertions(+), 107 deletions(-)
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 e15ca38bb..9cb93262b 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
@@ -112,7 +112,7 @@
</a>
</section>
- <!-- Informations-->
+ <!-- Informations -->
<section class="informations">
<h2>Informations</h2>
<div *ngIf="structure.address" class="inline">
@@ -159,11 +159,13 @@
</div>
</section>
+ <!-- Description -->
<section *ngIf="structure.description" class="description">
<h2>Description</h2>
<div class="description">{{ structure.description }}</div>
</section>
+ <!-- Horaires -->
<section *ngIf="structure.hours.hasData()" class="hours">
<h2>Horaires</h2>
<app-structure-hours-list [hours]="structure.hours" />
@@ -174,6 +176,106 @@
</div>
</section>
+ <!-- Aides aux démarches en ligne -->
+ <section
+ *ngIf="
+ (structure.categoriesDisplay.onlineProcedures && structure.categoriesDisplay.onlineProcedures.length) ||
+ structure.otherDescription
+ "
+ class="onlineDemarch"
+ >
+ <h2>Aides aux démarches en ligne</h2>
+ <app-tag-item
+ *ngIf="structure.categoriesDisplay.onlineProcedures.length > 0"
+ label="Accompagnements gratuits"
+ size="small"
+ color="red"
+ [clickable]="false"
+ />
+ <div class="wrapper">
+ <div *ngFor="let accompagnement of structure.categoriesDisplay.onlineProcedures.sort()">
+ <app-logo-card *ngIf="accompagnement.name !== 'Autres'" [module]="accompagnement" />
+ </div>
+ </div>
+ <div *ngIf="structure.otherDescription" class="otherDescription">
+ <b>Autres démarches :</b>
+ <p>{{ structure.otherDescription }}</p>
+ </div>
+ </section>
+
+ <!-- Accompagnements aux usages numériques -->
+ <section *ngIf="hasBaseSkills() || hasAdvancedSkills()" class="digitalSkills">
+ <h2>Accompagnements aux usages numériques</h2>
+ <app-tag-item [label]="structure.getFreeWorkshopLabel()" [size]="'small'" [color]="'red'" [clickable]="false" />
+
+ <!-- BaseSkills-->
+ <div *ngIf="hasBaseSkills()" class="skillsContainer">
+ <h3 class="titleSkills">Compétences numériques de base</h3>
+ <ul>
+ <li *ngFor="let skill of structure.categoriesDisplay.baseSkills" class="details">{{ skill.name }}</li>
+ </ul>
+ </div>
+
+ <!-- advancedSkills-->
+ <div *ngIf="hasAdvancedSkills()" class="skillsContainer">
+ <h3 class="titleSkills">Approfondir sa culture numérique</h3>
+ <ul>
+ <li *ngFor="let skill of structure.categoriesDisplay.advancedSkills" class="details">
+ {{ skill.name }}
+ </li>
+ </ul>
+ </div>
+ </section>
+
+ <!-- Matériel et wifi -->
+ <section *ngIf="structure.hasEquipments()" class="equipments">
+ <h2>Matériel et wifi en accès libre</h2>
+ <app-tag-item
+ *ngIf="structure.categories.selfServiceMaterial.includes('wifiEnAccesLibre')"
+ [label]="getEquipmentsLabel(Equipment.wifi)"
+ [color]="'red'"
+ [size]="'small'"
+ [clickable]="false"
+ />
+ <div>
+ <div *ngFor="let equipment of structure.categories.selfServiceMaterial">
+ <p *ngIf="equipment === 'computer' && structure.nbComputers">
+ <strong>{{ structure.nbComputers }}</strong>
+ <sup>•</sup>
+ <span>{{ getEquipmentsLabel(Equipment.computer) }}</span>
+ </p>
+ <p *ngIf="equipment === 'printer' && structure.nbPrinters">
+ <strong>{{ structure.nbPrinters }}</strong>
+ <sup>•</sup>
+ <span>{{ getEquipmentsLabel(Equipment.printer) }}</span>
+ </p>
+ <p *ngIf="equipment === 'scanner' && structure.nbScanners">
+ <strong>{{ structure.nbScanners }}</strong>
+ <sup>•</sup>
+ <span>{{ getEquipmentsLabel(Equipment.scanner) }}</span>
+ </p>
+ </div>
+ </div>
+ </section>
+
+ <!-- Vente de matériel -->
+ <section
+ *ngIf="structure.categoriesDisplay.solidarityMaterial && structure.categoriesDisplay.solidarityMaterial.length"
+ class="solidarityEquipments"
+ >
+ <h2>Vente de Matériel à tarif solidaire</h2>
+ <div class="inline">
+ <app-tag-item
+ *ngFor="let equipment of structure.categoriesDisplay.solidarityMaterial"
+ [label]="equipment.name"
+ [color]="'red'"
+ [size]="'small'"
+ [clickable]="false"
+ />
+ </div>
+ </section>
+
+ <!-- Modalités d'accès -->
<section
*ngIf="structure.categoriesDisplay.accessModality && structure.categoriesDisplay.accessModality.length > 0"
class="accessModality"
@@ -259,15 +361,7 @@
</ng-container>
</section>
- <!-- Labellisation -->
- <section *ngIf="structure.categoriesDisplay.labelsQualifications.length" class="labels">
- <h2>Labellisations</h2>
- <div class="wrapper">
- <app-logo-card *ngFor="let label of structure.categoriesDisplay.labelsQualifications.sort()" [module]="label" />
- </div>
- </section>
-
- <!-- Members -->
+ <!-- Accompagnants numériques -->
<section *ngIf="userIsLoggedIn() && membersWithJobWithPO.length" class="members">
<h2>Accompagnant·es numériques</h2>
<div class="members">
@@ -280,106 +374,15 @@
</div>
</section>
- <!-- Démarches en lignes -->
- <section
- *ngIf="
- (structure.categoriesDisplay.onlineProcedures && structure.categoriesDisplay.onlineProcedures.length) ||
- structure.otherDescription
- "
- class="onlineDemarch"
- >
- <h2>Aides aux démarches en ligne</h2>
- <app-tag-item
- *ngIf="structure.categoriesDisplay.onlineProcedures.length > 0"
- label="Accompagnements gratuits"
- size="small"
- color="red"
- [clickable]="false"
- />
+ <!-- Labellisation -->
+ <section *ngIf="structure.categoriesDisplay.labelsQualifications.length" class="labels">
+ <h2>Labellisations</h2>
<div class="wrapper">
- <div *ngFor="let accompagnement of structure.categoriesDisplay.onlineProcedures.sort()">
- <app-logo-card *ngIf="accompagnement.name !== 'Autres'" [module]="accompagnement" />
- </div>
- </div>
- <div *ngIf="structure.otherDescription" class="otherDescription">
- <b>Autres démarches :</b>
- <p>{{ structure.otherDescription }}</p>
- </div>
- </section>
-
- <!-- Compétences numériques -->
- <section *ngIf="hasBaseSkills() || hasAdvancedSkills()" class="digitalSkills">
- <h2>Compétences numériques</h2>
- <app-tag-item [label]="structure.getFreeWorkshopLabel()" [size]="'small'" [color]="'red'" [clickable]="false" />
-
- <!-- BaseSkills-->
- <div *ngIf="hasBaseSkills()" class="skillsContainer">
- <h3 class="titleSkills">Compétences numériques de base</h3>
- <ul>
- <li *ngFor="let skill of structure.categoriesDisplay.baseSkills" class="details">{{ skill.name }}</li>
- </ul>
- </div>
-
- <!-- advancedSkills-->
- <div *ngIf="hasAdvancedSkills()" class="skillsContainer">
- <h3 class="titleSkills">Approfondir sa culture numérique</h3>
- <ul>
- <li *ngFor="let skill of structure.categoriesDisplay.advancedSkills" class="details">
- {{ skill.name }}
- </li>
- </ul>
- </div>
- </section>
-
- <!-- Matériel et wifi -->
- <section *ngIf="structure.hasEquipments()" class="equipments">
- <h2>Matériel et wifi</h2>
- <app-tag-item
- *ngIf="structure.categories.selfServiceMaterial.includes('wifiEnAccesLibre')"
- [label]="getEquipmentsLabel(Equipment.wifi)"
- [color]="'red'"
- [size]="'small'"
- [clickable]="false"
- />
- <div>
- <div *ngFor="let equipment of structure.categories.selfServiceMaterial">
- <p *ngIf="equipment === 'computer' && structure.nbComputers">
- <strong>{{ structure.nbComputers }}</strong>
- <sup>•</sup>
- <span>{{ getEquipmentsLabel(Equipment.computer) }}</span>
- </p>
- <p *ngIf="equipment === 'printer' && structure.nbPrinters">
- <strong>{{ structure.nbPrinters }}</strong>
- <sup>•</sup>
- <span>{{ getEquipmentsLabel(Equipment.printer) }}</span>
- </p>
- <p *ngIf="equipment === 'scanner' && structure.nbScanners">
- <strong>{{ structure.nbScanners }}</strong>
- <sup>•</sup>
- <span>{{ getEquipmentsLabel(Equipment.scanner) }}</span>
- </p>
- </div>
- </div>
- </section>
-
- <!-- Vente de matériel -->
- <section
- *ngIf="structure.categoriesDisplay.solidarityMaterial && structure.categoriesDisplay.solidarityMaterial.length"
- class="solidarityEquipments"
- >
- <h2>Vente de matériel a prix solidaire</h2>
- <div class="inline">
- <app-tag-item
- *ngFor="let equipment of structure.categoriesDisplay.solidarityMaterial"
- [label]="equipment.name"
- [color]="'red'"
- [size]="'small'"
- [clickable]="false"
- />
+ <app-logo-card *ngFor="let label of structure.categoriesDisplay.labelsQualifications.sort()" [module]="label" />
</div>
</section>
- <!-- Transport -->
+ <!-- Accès -->
<section *ngIf="tclStopPoints.length" class="transportation">
<h2>Accès</h2>
<div class="stopPoints">
@@ -399,6 +402,7 @@
</div>
</div>
</section>
+
<!-- Mise à jour -->
<section *ngIf="structure.updatedAt" class="updatedAt">
<p class="updated">Mise à jour le {{ structure.updatedAt | date: 'mediumDate' }}</p>
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 8ffb32ccc..b6d591c01 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
@@ -156,7 +156,7 @@ section.onlineDemarch {
}
}
.otherDescription {
- margin-top: 4px;
+ margin-top: 12px;
display: flex;
flex-direction: column;
gap: 12px;
--
GitLab