diff --git a/src/app/profile/edit/edit.component.html b/src/app/profile/edit/edit.component.html
index 2c2d53817eab102c7876c8146655cdc1f29646d2..b5efaa4270ce2d06fb07a8a8323b9f6e9ab757a1 100644
--- a/src/app/profile/edit/edit.component.html
+++ b/src/app/profile/edit/edit.component.html
@@ -30,25 +30,28 @@
</div>
<!-- Navigation -->
<div class="navigation">
- <span [ngClass]="{ tab: true, selected: currentTab === tabsEnum.details }" (click)="navigateTo(tabsEnum.details)"
+ <span class="tab" [ngClass]="{ selected: currentTab === tabsEnum.details }" (click)="navigateTo(tabsEnum.details)"
>Coordonnées</span
>
<span
- [ngClass]="{ tab: true, selected: currentTab === tabsEnum.credentials }"
+ class="tab"
+ [ngClass]="{ selected: currentTab === tabsEnum.credentials }"
(click)="navigateTo(tabsEnum.credentials)"
>Email et mot de passe</span
>
<span
- [ngClass]="{ tab: true, selected: currentTab === tabsEnum.employer }"
+ class="tab"
+ [ngClass]="{ selected: currentTab === tabsEnum.employer }"
(click)="navigateTo(tabsEnum.employer)"
>Employeur et fonction</span
>
<span
- [ngClass]="{ tab: true, selected: currentTab === tabsEnum.description }"
+ class="tab"
+ [ngClass]="{ selected: currentTab === tabsEnum.description }"
(click)="navigateTo(tabsEnum.description)"
>Description</span
>
- <!-- <span [ngClass]="{ tab: true, selected: currentTab === tabsEnum.avatar }" (click)="navigateTo(tabsEnum.avatar)"
+ <!-- <span class="tab" [ngClass]="{ selected: currentTab === tabsEnum.avatar }" (click)="navigateTo(tabsEnum.avatar)"
>Avatar</span
> -->
</div>
diff --git a/src/app/profile/edit/edit.component.scss b/src/app/profile/edit/edit.component.scss
index bff7a90897f7774eacc4cb59833c06f848b6672b..7667ffacd724cb48130ea3b3e5896af4b4a7c197 100644
--- a/src/app/profile/edit/edit.component.scss
+++ b/src/app/profile/edit/edit.component.scss
@@ -38,6 +38,7 @@
.title {
align-items: center;
h1 {
+ margin: 0;
color: $grey-1;
font-weight: lighter;
@media #{$tablet} {
@@ -72,7 +73,6 @@
justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
-
border-bottom: 1px solid $grey-4;
&::-webkit-scrollbar {
diff --git a/src/app/profile/profile-structure/personal-offer/personal-offer.component.html b/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
index d52fd61b2f5f0e6227f25d25a178d165998f1b96..394f353a5501a1f29a9c5ddd9a901b72b7bc9a92 100644
--- a/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
+++ b/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
@@ -24,13 +24,8 @@
<div class="collapseHeader" (click)="toggleOnlineProcedures()">
<p>Démarches en ligne</p>
<app-svg-icon
- *ngIf="!showOnlineProcedures"
- [type]="'ico'"
- [icon]="'unfold'"
- [iconClass]="'icon-26'"
- ></app-svg-icon>
- <app-svg-icon
- *ngIf="showOnlineProcedures"
+ class="showDetails"
+ [ngClass]="showOnlineProcedures ? 'visible' : 'hidden'"
[type]="'ico'"
[icon]="'fold'"
[iconClass]="'icon-26'"
@@ -47,8 +42,13 @@
<div class="dropDown" *ngIf="this.personalOffer.categoriesDisplay.baseSkills.length">
<div class="collapseHeader" (click)="toggleBaseSkills()">
<p>Compétences numériques de base</p>
- <app-svg-icon *ngIf="!showBaseSkills" [type]="'ico'" [icon]="'unfold'" [iconClass]="'icon-26'"></app-svg-icon>
- <app-svg-icon *ngIf="showBaseSkills" [type]="'ico'" [icon]="'fold'" [iconClass]="'icon-26'"></app-svg-icon>
+ <app-svg-icon
+ class="showDetails"
+ [ngClass]="showBaseSkills ? 'visible' : 'hidden'"
+ [type]="'ico'"
+ [icon]="'fold'"
+ [iconClass]="'icon-26'"
+ ></app-svg-icon>
</div>
<div class="collapseContent" [@collapse]="showBaseSkills">
<ul>
@@ -60,12 +60,12 @@
<div class="collapseHeader" (click)="toggleAdvancedSkills()">
<p>Compétences numériques avancées</p>
<app-svg-icon
- *ngIf="!showAdvancedSkills"
+ class="showDetails"
+ [ngClass]="showAdvancedSkills ? 'visible' : 'hidden'"
[type]="'ico'"
- [icon]="'unfold'"
+ [icon]="'fold'"
[iconClass]="'icon-26'"
></app-svg-icon>
- <app-svg-icon *ngIf="showAdvancedSkills" [type]="'ico'" [icon]="'fold'" [iconClass]="'icon-26'"></app-svg-icon>
</div>
<div class="collapseContent" [@collapse]="showAdvancedSkills">
<ul>
diff --git a/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss b/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss
index ab18eae7fb4cff97757c05ff978de5193bfd40b0..b560ceccdbe2b3df28a84c6276f3ea6a88bf2b28 100644
--- a/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss
+++ b/src/app/profile/profile-structure/personal-offer/personal-offer.component.scss
@@ -28,10 +28,17 @@
height: 2.5rem;
cursor: pointer;
color: $grey-2;
+
+ .showDetails {
+ transition: all 0.3s;
+ &.visible {
+ transform: rotate(-180deg);
+ }
+ }
}
.collapseContent {
background-color: $grey-7;
- border-radius: 4px;
+ border-radius: 8px;
ul {
margin: 0;
padding: 0.5rem 1.5rem;
diff --git a/src/app/profile/profile-structure/profile-structure.component.html b/src/app/profile/profile-structure/profile-structure.component.html
index 37d544242a80de329f2b03258da561ba34ba2a13..0f1861584931296054f959812d785f319a078bac 100644
--- a/src/app/profile/profile-structure/profile-structure.component.html
+++ b/src/app/profile/profile-structure/profile-structure.component.html
@@ -1,20 +1,14 @@
-<div class="structureCard" fxLayout="column" fxLayoutAlign="center" [ngClass]="{ fold: !showDetails }">
- <div
- class="collapseHeader"
- fxLayout="row"
- fxLayoutAlign="space-between center"
- fxLayoutGap="20px"
- (click)="toggleDetails()"
- >
- <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
+<div class="structureCard" [ngClass]="{ fold: !showDetails }">
+ <div class="collapseHeader" (click)="toggleDetails()">
+ <div class="left">
<app-svg-icon [type]="'ico'" [icon]="getStructureTypeIcon()" [iconClass]="'icon-52'"></app-svg-icon>
- <div fxLayout="column" fxLayoutAlign="space-between start">
+ <div class="structureInfos">
<p class="structureName">{{ structure.structureName }}</p>
<p class="structureType">{{ getStructureTypeLabel() }}</p>
</div>
</div>
- <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
- <div *ngIf="!isPublic && !isValid()" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="7px">
+ <div class="right">
+ <div class="missingData" *ngIf="!isPublic && !isValid()">
<app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'"></app-svg-icon>
<p class="invalidText hide-on-mobile">
Informations
@@ -22,88 +16,51 @@
manquantes
</p>
</div>
- <app-svg-icon *ngIf="!showDetails" [type]="'ico'" [icon]="'unfold'" [iconClass]="'icon-26'"></app-svg-icon>
- <app-svg-icon *ngIf="showDetails" [type]="'ico'" [icon]="'fold'" [iconClass]="'icon-26'"></app-svg-icon>
+ <app-svg-icon
+ class="showDetails"
+ [ngClass]="showDetails ? 'visible' : 'hidden'"
+ [type]="'ico'"
+ [icon]="'fold'"
+ [iconClass]="'icon-26'"
+ ></app-svg-icon>
</div>
</div>
- <div [@collapse]="showDetails">
- <div class="collapseContent" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="16px">
- <div fxLayout="column">
- <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
- <p class="section-title">informations</p>
- <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="12px">
- <app-button
- class="hide-on-mobile"
- [type]="'button'"
- [iconBtn]="'eyePassword'"
- [iconType]="'form'"
- [text]="'Voir la structure'"
- [style]="buttonTypeEnum.SecondaryWide"
- routerLink="./"
- [queryParams]="{ id: structure._id }"
- [routerLinkActive]="'active'"
- ></app-button>
- <app-button
- class="hide-on-desktop"
- [type]="'button'"
- [iconBtn]="'eyePassword'"
- [iconType]="'form'"
- [style]="buttonTypeEnum.SecondaryOnlyIcon"
- routerLink="./"
- [queryParams]="{ id: structure._id }"
- [routerLinkActive]="'active'"
- ></app-button>
- <app-button
- *ngIf="!isPublic"
- class="hide-on-mobile"
- [type]="'button'"
- [iconBtn]="'edit'"
- [text]="'Modifier la structure'"
- [style]="buttonTypeEnum.SecondaryWide"
- routerLink="./edit-structure/{{ structure._id }}"
- [routerLinkActive]="'active'"
- [ngClass]="{ warning: !isValid() }"
- ></app-button>
- <app-button
- *ngIf="!isPublic"
- class="hide-on-desktop"
- [type]="'button'"
- [iconBtn]="'edit'"
- [style]="buttonTypeEnum.SecondaryOnlyIcon"
- routerLink="./edit-structure/{{ structure._id }}"
- [routerLinkActive]="'active'"
- [ngClass]="{ warning: !isValid() }"
- ></app-button>
- </div>
- </div>
- <div class="infoSection" fxLayout="column" fxLayoutAlign="space-between start" fxLayoutGap="4px">
- <div>
- <p>{{ getAddress() }}</p>
- </div>
- <div>
- <p>{{ structure.contactPhone }}</p>
- </div>
- <div>
- <a class="email" href="mailto:{{ structure.contactMail }}">
- {{ structure.contactMail }}
- </a>
- </div>
- </div>
- </div>
- <app-personal-offer *ngIf="this.personalOffer" [personalOffer]="personalOffer" [isPublic]="isPublic">
- </app-personal-offer>
- <div *ngIf="members.length > 0" fxLayout="column" fxLayoutGap="9px">
- <div fxLayout="row" fxLayoutAlign="space-between center">
- <p class="section-title">membres</p>
+ <div [@collapse]="showDetails" class="collapseContent">
+ <div class="section">
+ <div class="sectionHeader">
+ <p class="sectionTitle">informations</p>
+ <div class="sectionButtons">
+ <app-button
+ class="hide-on-mobile"
+ [type]="'button'"
+ [iconBtn]="'eyePassword'"
+ [iconType]="'form'"
+ [text]="'Voir la structure'"
+ [style]="buttonTypeEnum.SecondaryWide"
+ routerLink="./"
+ [queryParams]="{ id: structure._id }"
+ [routerLinkActive]="'active'"
+ ></app-button>
+ <app-button
+ class="hide-on-desktop"
+ [type]="'button'"
+ [iconBtn]="'eyePassword'"
+ [iconType]="'form'"
+ [style]="buttonTypeEnum.SecondaryOnlyIcon"
+ routerLink="./"
+ [queryParams]="{ id: structure._id }"
+ [routerLinkActive]="'active'"
+ ></app-button>
<app-button
*ngIf="!isPublic"
class="hide-on-mobile"
[type]="'button'"
[iconBtn]="'edit'"
- [text]="'Gérer les membres'"
+ [text]="'Modifier la structure'"
[style]="buttonTypeEnum.SecondaryWide"
- routerLink="./structure-members-management/{{ structure._id }}"
+ routerLink="./edit-structure/{{ structure._id }}"
[routerLinkActive]="'active'"
+ [ngClass]="{ warning: !isValid() }"
></app-button>
<app-button
*ngIf="!isPublic"
@@ -111,34 +68,76 @@
[type]="'button'"
[iconBtn]="'edit'"
[style]="buttonTypeEnum.SecondaryOnlyIcon"
- routerLink="./structure-members-management/{{ structure._id }}"
+ routerLink="./edit-structure/{{ structure._id }}"
[routerLinkActive]="'active'"
+ [ngClass]="{ warning: !isValid() }"
></app-button>
</div>
- <div *ngFor="let member of members; let i = index">
- <app-profile-structure-member [member]="member"></app-profile-structure-member>
- </div>
</div>
- <div class="call-to-action" *ngIf="!isPublic && members.length === 0" fxLayout="row" fxLayoutAlign="center">
+ <div class="sectionContent infoSection">
+ <p>{{ getAddress() }}</p>
+ <p>{{ structure.contactPhone }}</p>
+ <a class="email" href="mailto:{{ structure.contactMail }}">
+ {{ structure.contactMail }}
+ </a>
+ </div>
+ </div>
+ <app-personal-offer
+ class="section"
+ *ngIf="this.personalOffer"
+ [personalOffer]="personalOffer"
+ [isPublic]="isPublic"
+ >
+ </app-personal-offer>
+ <div class="section" *ngIf="members.length > 0">
+ <div class="sectionHeader">
+ <p class="sectionTitle">membres</p>
<app-button
+ *ngIf="!isPublic"
+ class="hide-on-mobile"
[type]="'button'"
- [iconBtn]="'add'"
- [text]="'Ajouter un membre'"
- [style]="buttonTypeEnum.SecondaryUltraWide"
+ [iconBtn]="'edit'"
+ [text]="'Gérer les membres'"
+ [style]="buttonTypeEnum.SecondaryWide"
+ routerLink="./structure-members-management/{{ structure._id }}"
[routerLinkActive]="'active'"
- (click)="addMemberModalOpenned = true"
></app-button>
- </div>
- <div class="call-to-action" *ngIf="!isPublic && !this.personalOffer" fxLayout="row" fxLayoutAlign="center">
<app-button
+ *ngIf="!isPublic"
+ class="hide-on-desktop"
[type]="'button'"
- [iconBtn]="'add'"
- [text]="'Ajouter une offre'"
- [style]="buttonTypeEnum.SecondaryUltraWide"
+ [iconBtn]="'edit'"
+ [style]="buttonTypeEnum.SecondaryOnlyIcon"
+ routerLink="./structure-members-management/{{ structure._id }}"
[routerLinkActive]="'active'"
- [disabled]="true"
></app-button>
</div>
+ <div class="sectionContent members">
+ <app-profile-structure-member
+ *ngFor="let member of members; let i = index"
+ [member]="member"
+ ></app-profile-structure-member>
+ </div>
+ </div>
+ <div class="call-to-action" *ngIf="!isPublic && members.length === 0">
+ <app-button
+ [type]="'button'"
+ [iconBtn]="'add'"
+ [text]="'Ajouter un membre'"
+ [style]="buttonTypeEnum.SecondaryUltraWide"
+ [routerLinkActive]="'active'"
+ (click)="addMemberModalOpenned = true"
+ ></app-button>
+ </div>
+ <div class="call-to-action" *ngIf="!isPublic && !this.personalOffer">
+ <app-button
+ [type]="'button'"
+ [iconBtn]="'add'"
+ [text]="'Ajouter une offre'"
+ [style]="buttonTypeEnum.SecondaryUltraWide"
+ [routerLinkActive]="'active'"
+ [disabled]="true"
+ ></app-button>
</div>
</div>
</div>
diff --git a/src/app/profile/profile-structure/profile-structure.component.scss b/src/app/profile/profile-structure/profile-structure.component.scss
index d68ea7797bf995ed3c6038a47ff3540247793dbf..a8a0e1a97f122ac46132f394d5d2711d645e35f6 100644
--- a/src/app/profile/profile-structure/profile-structure.component.scss
+++ b/src/app/profile/profile-structure/profile-structure.component.scss
@@ -16,7 +16,28 @@
.collapseHeader {
padding: 0 0.5rem;
+ display: flex;
+ justify-content: space-between;
cursor: pointer;
+ .left {
+ display: flex;
+ gap: 1rem;
+ .structureInfos {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+ }
+
+ .right {
+ display: flex;
+ .showDetails {
+ transition: all 0.3s;
+ &.visible {
+ transform: rotate(-180deg);
+ }
+ }
+ }
p {
margin: 0 !important;
&.structureName {
@@ -33,27 +54,74 @@
color: $orange-warning;
}
}
+
+ .missingData {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin-right: 1rem;
+ }
}
.collapseContent {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
padding: 0 1rem;
- .infoSection {
- @include lato-regular-14;
+ margin-bottom: 0.5rem;
+ .section {
+ .sectionHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .sectionTitle {
+ text-transform: uppercase;
+ @include lato-bold-14;
+ color: $grey-3;
+ }
- .email {
- text-decoration: underline;
- color: $grey-1;
+ p {
+ text-transform: uppercase;
+ @include lato-bold-14;
+ color: $grey-3;
+ }
+ .sectionButtons {
+ display: flex;
+ gap: 12px;
+ }
+ }
+
+ .sectionContent {
+ &.infoSection {
+ @include lato-regular-14;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ .email {
+ text-decoration: underline;
+ color: $grey-1;
+ }
+ }
+
+ &.members {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ }
}
}
- .section-title {
- text-transform: uppercase;
- @include lato-bold-14;
- color: $grey-3;
- }
+
p {
margin: 0 !important;
}
+ .call-to-action {
+ margin-top: 18px;
+ display: flex;
+ justify-content: center;
+ }
}
+
app-button {
&.warning {
position: relative;
@@ -69,9 +137,6 @@
}
}
}
- .call-to-action {
- margin-top: 18px;
- }
}
::ng-deep app-button.warning button .text {
border: 1px solid $orange-warning !important;
diff --git a/src/app/profile/profile-structure/profile-structure.component.ts b/src/app/profile/profile-structure/profile-structure.component.ts
index 758518d79d9d7de1745c105c1d8d9cf53e446c3e..d8e4ab9328407a67e1137357da19abb7960bdd4e 100644
--- a/src/app/profile/profile-structure/profile-structure.component.ts
+++ b/src/app/profile/profile-structure/profile-structure.component.ts
@@ -21,7 +21,7 @@ import { UserService } from './../../services/user.service';
styleUrls: ['./profile-structure.component.scss'],
animations: [
trigger('collapse', [
- state('true', style({ height: AUTO_STYLE, visibility: AUTO_STYLE, margin: '8px 0' })),
+ state('true', style({ height: AUTO_STYLE, visibility: AUTO_STYLE, marginTop: '10px' })),
state('false', style({ height: '0px', visibility: 'hidden', margin: '0' })),
transition('true => false', animate('300ms ease-out')),
transition('false => true', animate('300ms ease-out')),
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
index 6918307a61478c37a029ec2f1e73c70fba59ef66..f0fb8d1e5482c66a6dce90dfcc5828dcef5eab94 100644
--- a/src/app/profile/profile.component.html
+++ b/src/app/profile/profile.component.html
@@ -1,12 +1,6 @@
-<div
- fxLayout="column"
- fxLayoutAlign="start center"
- fxLayoutGap="16px"
- class="content-container full-screen"
- *ngIf="userProfile"
->
+<div *ngIf="userProfile" class="content-container full-screen">
<section>
- <div fxLayout="row" fxLayoutAlign="start center" fxFill>
+ <div class="header">
<app-svg-icon
*ngIf="isPublic"
(click)="goBack()"
@@ -67,60 +61,55 @@
</section>
<section>
- <div fxLayoutGap="12px" fxLayout="column" fxFill>
- <div fxLayout="row" fxLayoutAlign="start center" fxFill>
- <h1>Structures</h1>
- <app-button
- *ngIf="!isPublic && userProfile.structuresLink.length > 0"
- class="hide-on-mobile"
- [type]="'button'"
- [iconBtn]="'edit'"
- [text]="'Gérer mes structures'"
- [style]="buttonTypeEnum.SecondaryWide"
- routerLink="./structures-management"
- [routerLinkActive]="'active'"
- ></app-button>
- <app-button
- *ngIf="!isPublic && userProfile.structuresLink.length > 0"
- class="hide-on-desktop"
- [type]="'button'"
- [iconBtn]="'edit'"
- [style]="buttonTypeEnum.SecondaryOnlyIcon"
- routerLink="./structures-management"
- [routerLinkActive]="'active'"
- ></app-button>
- </div>
- <div fxLayoutGap="16px" fxLayout="column" fxFill>
- <ng-container *ngIf="userProfile.structuresLink.length > 0 && structures">
- <div *ngFor="let structure of structures; let i = index">
- <app-profile-structure
- [structureWithOwners]="structure"
- [userProfile]="this.userProfile"
- [isPublic]="this.isPublic"
- ></app-profile-structure>
- </div>
- </ng-container>
- </div>
- <div fxLayoutAlign="center center" fxFill>
- <app-button
- *ngIf="!isPublic && userProfile.structuresLink.length == 0"
- [style]="buttonTypeEnum.SecondaryUltraWide"
- [iconBtn]="'add'"
- [text]="'Ajouter une structure'"
- routerLink="/form/structure"
- tabindex="0"
- ></app-button>
+ <div class="header">
+ <h1>Structures</h1>
+ <app-button
+ *ngIf="!isPublic && userProfile.structuresLink.length > 0"
+ class="hide-on-mobile"
+ [type]="'button'"
+ [iconBtn]="'edit'"
+ [text]="'Gérer mes structures'"
+ [style]="buttonTypeEnum.SecondaryWide"
+ routerLink="./structures-management"
+ [routerLinkActive]="'active'"
+ ></app-button>
+ <app-button
+ *ngIf="!isPublic && userProfile.structuresLink.length > 0"
+ class="hide-on-desktop"
+ [type]="'button'"
+ [iconBtn]="'edit'"
+ [style]="buttonTypeEnum.SecondaryOnlyIcon"
+ routerLink="./structures-management"
+ [routerLinkActive]="'active'"
+ ></app-button>
+ </div>
+ <div class="structuresContainer" *ngIf="userProfile.structuresLink.length > 0 && structures">
+ <div *ngFor="let structure of structures; let i = index">
+ <app-profile-structure
+ [structureWithOwners]="structure"
+ [userProfile]="this.userProfile"
+ [isPublic]="this.isPublic"
+ ></app-profile-structure>
</div>
</div>
+ <app-button
+ class="addStructure"
+ *ngIf="!isPublic && userProfile.structuresLink.length == 0"
+ [style]="buttonTypeEnum.SecondaryUltraWide"
+ [iconBtn]="'add'"
+ [text]="'Ajouter une structure'"
+ routerLink="/form/structure"
+ tabindex="0"
+ ></app-button>
</section>
<section *ngIf="!isPublic">
- <div fxLayout="row" fxLayoutAlign="start center" fxFill>
+ <div class="header">
<h1>Ressources</h1>
</div>
</section>
<section *ngIf="!isPublic">
- <div fxLayout="row" fxLayoutAlign="start center" fxFill>
+ <div class="header">
<h1>Newsletter</h1>
</div>
</section>
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss
index b27287863c1c0e73c513c59eb804d7cf18aac7be..1bfbf23c8e18e39d60b64c339023ef7eb35d2682 100644
--- a/src/app/profile/profile.component.scss
+++ b/src/app/profile/profile.component.scss
@@ -6,25 +6,41 @@
@import '../../assets/scss/layout';
.content-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
padding-block: 16px;
- padding-inline: 4px;
+ box-sizing: border-box;
+
+ @media #{$tablet} {
+ padding: 16px 4px;
+ }
}
section {
width: $content-desktop-width;
display: flex;
+ gap: 1.5rem;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
- padding: 24px 40px 40px;
+ padding: 2rem;
background: $white;
border: 1px solid $grey-6;
border-radius: 8px;
@media #{$tablet} {
width: 100%;
- padding: 24px 24px 40px 24px;
+ padding: 1.5rem;
}
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ }
h1 {
+ margin: 0;
@include lato-regular-24;
color: $grey-1;
flex-grow: 1;
@@ -76,3 +92,14 @@ section {
}
}
}
+
+.structuresContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+}
+
+.addStructure {
+ margin: auto;
+}
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss b/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
index 87d469cb4cf09d2308ba06c55d93bc87817deaac..4bbda707eaf874a8ea49169f92278d0bd7568274 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
+++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
@@ -32,6 +32,9 @@
overflow-y: scroll;
overflow-x: hidden;
padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
p {
margin: 0;
@@ -39,7 +42,6 @@
.header {
display: flex;
align-items: center;
- margin-bottom: 1.5rem;
h2 {
@include lato-regular-24;
@@ -51,8 +53,6 @@
}
.section {
- margin-top: 1rem;
-
.sectionHeader {
display: flex;
justify-content: space-between;
diff --git a/src/app/shared/components/text-input-modal/text-input-modal.component.html b/src/app/shared/components/text-input-modal/text-input-modal.component.html
index 1ba0fc04d93cef1364cd11e8e0201c94aed4a6da..acea5cafdd0379528bd932be737391dfe22e3ec8 100644
--- a/src/app/shared/components/text-input-modal/text-input-modal.component.html
+++ b/src/app/shared/components/text-input-modal/text-input-modal.component.html
@@ -4,9 +4,19 @@
<h3>ATTENTION</h3>
<p>{{ content }}</p>
<textarea #myText id="story" class="textarea" name="story" rows="6" placeholder="{{ placeholder }}"></textarea>
- <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
- <button class="btn-primary small leave" (click)="closeModal(true, myText.value)">Confirmer</button>
- <button class="btn-primary small" (click)="closeModal(false, myText.value)">Annuler</button>
+ <div class="footerModal">
+ <app-button
+ [type]="'button'"
+ [text]="'Annuler'"
+ [style]="buttonTypeEnum.modalSecondary"
+ (action)="closeModal(false, myText.value)"
+ ></app-button>
+ <app-button
+ [type]="'button'"
+ [text]="'Confirmer'"
+ [style]="buttonTypeEnum.modalPrimary"
+ (action)="closeModal(true, myText.value)"
+ ></app-button>
</div>
</div>
</div>
diff --git a/src/app/shared/components/text-input-modal/text-input-modal.component.scss b/src/app/shared/components/text-input-modal/text-input-modal.component.scss
index a085676ce7a73ec3b74f3a03979bf1dce7d0ee55..a0e22082c712cbd58ab38e83806ed3803eee3b60 100644
--- a/src/app/shared/components/text-input-modal/text-input-modal.component.scss
+++ b/src/app/shared/components/text-input-modal/text-input-modal.component.scss
@@ -3,62 +3,30 @@
@import '../../../../assets/scss/shapes';
@import '../../../../assets/scss/z-index';
-.modalExitContainer {
- width: 100%;
- height: 100%;
- z-index: $modal-z-index;
- position: absolute;
- content: '';
- top: 0;
- background-color: $modal-background;
+.modalBackground {
.modal {
.contentModal {
- width: 100%;
- background: $white;
- padding: 35px 20px 18px 20px;
- h3 {
- @include lato-bold-18;
- color: $orange-warning;
- }
+ padding: 20px;
+
p {
- @include lato-bold-16;
- color: $grey-1;
- text-align: center;
+ padding: 0 1rem;
}
+
+ .textarea {
+ padding: 13px 8px;
+ background: $grey-8;
+ border: 1px solid $grey-4;
+ border-radius: 1px;
+ resize: none;
+ width: 90%;
+ @include lato-regular-16;
+ }
+
.footerModal {
- width: 100%;
- margin-top: 14px;
- @include lato-bold-16;
- .leave {
- background: none;
- color: $grey-1;
- text-decoration: underline;
- }
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
}
}
- width: 350px;
- margin: auto;
- border-radius: 6px;
- @include background-hash($grey-2);
- border: 1px solid $grey-4;
- margin-top: 50vh;
- transform: translateY(-50%);
- }
-}
-.modalBackground {
- .modal {
- .contentModal {
- padding: 20px;
- }
}
}
-
-.textarea {
- padding: 13px 8px;
- background: $grey-8;
- border: 1px solid $grey-4;
- border-radius: 1px;
- resize: none;
- width: 100%;
- @include lato-regular-16;
-}
diff --git a/src/app/shared/components/text-input-modal/text-input-modal.component.ts b/src/app/shared/components/text-input-modal/text-input-modal.component.ts
index 45bb24ba698dbd8099445fea1743c9aaef5be51b..d3acb12244589091c2d1d68d16a28bedc04ab34f 100644
--- a/src/app/shared/components/text-input-modal/text-input-modal.component.ts
+++ b/src/app/shared/components/text-input-modal/text-input-modal.component.ts
@@ -1,4 +1,5 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ButtonType } from '../button/buttonType.enum';
@Component({
selector: 'app-text-input-modal',
@@ -11,10 +12,10 @@ export class TextInputModalComponent {
@Input() public placeholder: string;
@Output() closed = new EventEmitter<boolean>();
@Output() newContent = new EventEmitter<{ content: string; shouldSend: boolean }>();
-
+ public buttonTypeEnum = ButtonType;
public myContent: string;
public closeModal(shouldSend: boolean, content: string) {
- this.newContent.emit({ content, shouldSend });
+ this.newContent.emit({ shouldSend, content });
}
}
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 bdd4cc7b4986265ba8b7c6c3f2858a3a7b135cf7..7ed5ab94eaf11383de72c37a4a69eec9b743b3c3 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
@@ -282,7 +282,7 @@ export class StructureDetailsComponent implements OnInit {
this.structureErrorModalOpenned = !this.structureErrorModalOpenned;
}
- public sendErrorEmail(modalValue: any): void {
+ public sendErrorEmail(modalValue: { shouldSend: boolean; content: string }): void {
this.displayModalError();
if (modalValue.shouldSend) {
this.structureService.sendMailOnStructureError(this.structure._id, modalValue.content).subscribe(() => {});
diff --git a/src/styles.scss b/src/styles.scss
index b3e3f2cbac5fcd167107e5361e6e45aac6c61ae5..18e55da682622cd620c4863526bd57dae0604f22 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -329,7 +329,7 @@ button {
}
.footerModal {
width: 100%;
- margin-top: 14px;
+ margin-top: 1rem;
@include lato-bold-16;
.btn {
background: $primary-color;