[US TRTL-632] Add heading / content app structure

ui/ui-frontend-common/src/app/modules/account/account.component.html

-<div class="vitamui-body">
+<div class="vitamui-heading">
   <vitamui-common-title-breadcrumb [data]="dataBreadcrumb">
     <div class="d-flex align-items-center d-flex">
       <vitamui-common-user-photo class="mr-1" [photo]="account?.photo"></vitamui-common-user-photo>
@@ -13,7 +13,9 @@
       <button class="btn primary">Contacter l'administrateur</button>
     </div>
   </div>
+</div>
 
+<div class="vitamui-content">
   <mat-tab-group>
     <mat-tab label="Informations" i18n-label="Information tab@@profileDetailTabInformation">
       <vitamui-common-account-information-tab [account]=account></vitamui-common-account-information-tab>

ui/ui-frontend-common/src/app/modules/account/account.component.scss

@@ -13,15 +13,9 @@ h2 {
   margin-right: 20px;
 }
 
-mat-tab-group {
-  margin-top: 40px;
-  
-}
-
 :host::ng-deep {
   --radius: 20px;
   
-
   .mat-tab-body-wrapper {
     border-top-right-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
@@ -32,7 +26,6 @@ mat-tab-group {
   }
 
   .mat-tab-label {
-    
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     margin-right: 5px;
@@ -59,13 +52,11 @@ mat-tab-group {
   }
 
   .mat-tab-body-content {
-    
     height: 100%;
     overflow: hidden;
   }
 
   .mat-tab-body-content {
-    
     height: 100%;
     overflow: hidden;
   }

ui/ui-frontend-common/src/app/modules/components/vitamui-body/vitamui-body.component.scss

 div {
-    padding-top: 72px;
     min-height: calc(100vh - 100px);
     background-color: var(--vitamui-background);
-    margin: 40px auto;
-    width: 1440px;
-}
-
-@media screen and (max-width: 1440px){
-
-  div {
-    width: 1200px;
-  }
-
-}
-
-
-@media screen and (max-width: 1200px){
-
-  div {
-    width: 1060px;
-  }
-
+    margin: 102px auto;
 }
 

ui/ui-frontend-common/src/app/modules/components/vitamui-common-banner/vitamui-common-banner.component.html

-<div class="d-flex align-items-center mb-5 px-1">
+<div class="d-flex align-items-center px-1">
   <vitamui-common-search-bar [disabled]="disableSearchBar" [placeholder]="searchbarPlaceholder" (search)="search.emit($event)"></vitamui-common-search-bar>
   <ng-content></ng-content>
 </div>
\ No newline at end of file

ui/ui-frontend-common/src/sass/_layout.scss

 $header-height: 72px !default;
 $footer-height: 100px !default;
 
+.vitamui-heading {
+    margin-bottom: 3rem;
+    max-width: 1440px;
+    margin: 0 240px;
+}
+
+.vitamui-content {
+    max-width: 1440px;
+    margin: 0 240px;
+}
+
+/** RESPONSIVE MANAGEMENT */
+@media screen and (max-width: 1440px) {
+    .vitamui-heading, .vitamui-content {
+        max-width: 1200px;
+        margin: 0 120px;
+    }
+}
+  
+@media screen and (max-width: 1200px) {
+    .vitamui-heading, .vitamui-content {
+        max-width: 1060px;
+        margin: 0 70px;
+    }
+}
+
+.vitamui-body {
+    min-height: calc(100vh - #{$header-height + $footer-height});
+}
+
+/**** DEPRECATED : REMOVE AT THE END OF THE REDESIGN **/
 .vitamui-header {
     background-image: url('/assets/background.jpg');
     background-size: cover;
@@ -39,9 +70,6 @@ $footer-height: 100px !default;
     }
 }
 
-.vitamui-body {
-    min-height: calc(100vh - #{$header-height + $footer-height});
-}
 
 .bg-fingerprint {
     z-index: -2;

ui/ui-frontend/projects/identity/src/app/customer/customer.component.html

@@ -5,23 +5,23 @@
     <app-owner-preview *ngIf="previewType === 'TENANT'" (previewClose)="closePanel()" [owner]="owner" [tenant]="openedItem"></app-owner-preview>
   </mat-sidenav>
 
-  <mat-sidenav-content class="vitamui-body">
-    <vitamui-common-title-breadcrumb>
-      Paramétrer les organisations
-    </vitamui-common-title-breadcrumb>
+  <mat-sidenav-content>
+    <div class="vitamui-heading">
+      <vitamui-common-title-breadcrumb>
+        Paramétrer les organisations
+      </vitamui-common-title-breadcrumb>
 
-    <vitamui-common-banner
-      [searchbarPlaceholder]="'Nom, Raison sociale, Code client, Adresse...'"
-      [disableSearchBar]="true">
+      <vitamui-common-banner [searchbarPlaceholder]="'Nom, Raison sociale, Code client, Adresse...'" [disableSearchBar]="true">
         <button class="btn primary ml-5" (click)="openCreateCustomerDialog()">
           <span>Créer un Client</span>
         </button>
-    </vitamui-common-banner>
+      </vitamui-common-banner>
+    </div>
 
-    <app-customer-list
-      (customerClick)="openCustomerPanel($event)"
-      (ownerClick)="openOwnerPanel($event)"
-      (tenantClick)="openTenantPanel($event)">
-    </app-customer-list>
+    <div class="vitamui-content">
+      <app-customer-list (customerClick)="openCustomerPanel($event)" (ownerClick)="openOwnerPanel($event)"
+        (tenantClick)="openTenantPanel($event)">
+      </app-customer-list>
+    </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

ui/ui-frontend/projects/identity/src/app/group/group.component.html

@@ -3,19 +3,21 @@
     <app-group-preview *ngIf="openedItem" (previewClose)="closePanel()" [group]="openedItem"></app-group-preview>
   </mat-sidenav>
 
-  <mat-sidenav-content class="vitamui-body">
-    <vitamui-common-title-breadcrumb>
-      Paramétrer les groupes de profils
-    </vitamui-common-title-breadcrumb>
-    
-    <vitamui-common-banner
-      [searchbarPlaceholder]="'Nom du groupe, Identifiant'"
-      (search)="onSearchSubmit($event)">
+  <mat-sidenav-content>
+    <div class="vitamui-heading">
+      <vitamui-common-title-breadcrumb>
+        Paramétrer les groupes de profils
+      </vitamui-common-title-breadcrumb>
+
+      <vitamui-common-banner [searchbarPlaceholder]="'Nom du groupe, Identifiant'" (search)="onSearchSubmit($event)">
         <button class="btn primary ml-5" (click)="openCreateGroupDialog()">
           <span>Créer un Groupe</span>
         </button>
-    </vitamui-common-banner>
-    
-    <app-group-list [search]="search" (groupClick)="openPanel($event)"></app-group-list>
+      </vitamui-common-banner>
+    </div>
+
+    <div class="vitamui-content">
+      <app-group-list [search]="search" (groupClick)="openPanel($event)"></app-group-list>
+    </div>
   </mat-sidenav-content>
-</mat-sidenav-container>
+</mat-sidenav-container>
\ No newline at end of file

ui/ui-frontend/projects/identity/src/app/hierarchy/hierarchy.component.html

 <mat-sidenav-container [autosize]="true" [hasBackdrop]="false">
   <mat-sidenav #panel mode="side" position="end" [fixedInViewport]="true">
-    <app-hierarchy-detail
-      *ngIf="openedItem"
-      (previewClose)="closePanel()"
-      [id]="openedItem?.id"
-    ></app-hierarchy-detail>
+    <app-hierarchy-detail *ngIf="openedItem" (previewClose)="closePanel()" [id]="openedItem?.id"></app-hierarchy-detail>
   </mat-sidenav>
 
-  <mat-sidenav-content class="overflow-none vitamui-body">
-    <vitamui-common-title-breadcrumb>
-      Paramétrer les Profils de droits d'accès
-    </vitamui-common-title-breadcrumb>
+  <mat-sidenav-content>
+    <div class="vitamui-heading">
+      <vitamui-common-title-breadcrumb>
+        Paramétrer les Profils de droits d'accès
+      </vitamui-common-title-breadcrumb>
 
-    <vitamui-common-banner
-      [searchbarPlaceholder]="'Nom du profil, Identifiant'"
-      (search)="onSearchSubmit($event)"
-    >
-      <button class="btn primary ml-5" (click)="openHierarchyDuplicateDialog()">
-        <span>Dupliquer un Profil</span>
-      </button>
-    </vitamui-common-banner>
+      <vitamui-common-banner [searchbarPlaceholder]="'Nom du profil, Identifiant'" (search)="onSearchSubmit($event)">
+        <button class="btn primary ml-5" (click)="openHierarchyDuplicateDialog()">
+          <span>Dupliquer un Profil</span>
+        </button>
+      </vitamui-common-banner>
+    </div>
 
-    <app-hierarchy-list
-      [search]="search"
-      (profileClick)="openPanel($event)"
-    ></app-hierarchy-list>
+    <div class="vitamui-content">
+      <app-hierarchy-list [search]="search" (profileClick)="openPanel($event)"></app-hierarchy-list>
+    </div>
   </mat-sidenav-content>
-</mat-sidenav-container>
+</mat-sidenav-container>
\ No newline at end of file

ui/ui-frontend/projects/identity/src/app/profile/profile.component.html

@@ -3,19 +3,22 @@
     <app-profile-detail (profileClose)="closePanel()" [profile]="openedItem"></app-profile-detail>
   </mat-sidenav>
 
-  <mat-sidenav-content class="vitamui-body">
-    <vitamui-common-title-breadcrumb>
-      Paramétrer les droits des administrateurs
-    </vitamui-common-title-breadcrumb>
+  <mat-sidenav-content>
+    <div class="vitamui-heading">
+      <vitamui-common-title-breadcrumb>
+        Paramétrer les droits des administrateurs
+      </vitamui-common-title-breadcrumb>
 
-    <vitamui-common-banner
-      [searchbarPlaceholder]="'Nom du profil administrateur, Identifiant'"
-      (search)="onSearchSubmit($event)">
+      <vitamui-common-banner [searchbarPlaceholder]="'Nom du profil administrateur, Identifiant'"
+        (search)="onSearchSubmit($event)">
         <button class="btn primary ml-5" (click)="openProfilAdminCreateDialog()">
           <span>Créer un Profil Administrateur</span>
         </button>
     </vitamui-common-banner>
+</div>
 
-    <app-profile-list [search]="search" (profileClick)="openPanel($event)"></app-profile-list>
+    <div class="vitamui-content">
+      <app-profile-list [search]="search" (profileClick)="openPanel($event)"></app-profile-list>
+    </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

ui/ui-frontend/projects/identity/src/app/subrogation/subrogate-user/subrogate-user.component.html

 <mat-sidenav-container [autosize]="true" [hasBackdrop]="false">
-  <mat-sidenav-content class="vitamui-body">
-    <vitamui-common-title-breadcrumb>
-      Subroger un utilisateur
-    </vitamui-common-title-breadcrumb>
+  <mat-sidenav-content>
+    <div class="vitamui-heading">
+      <vitamui-common-title-breadcrumb>
+        Subroger un utilisateur
+      </vitamui-common-title-breadcrumb>
 
-    <vitamui-common-banner
-      [searchbarPlaceholder]="'Utilisateur, Admin'"
-      (search)="onSearchSubmit($event)">
+      <vitamui-common-banner [searchbarPlaceholder]="'Utilisateur, Admin'" (search)="onSearchSubmit($event)">
         <button class="btn primary ml-5" (click)="openUserSubrogationDialog()">
           Subroger un Utilisateur Client
         </button>
     </vitamui-common-banner>
+</div>
 
-    <app-subrogate-user-list [search]="search" [emailDomains]="customer?.emailDomains"></app-subrogate-user-list>
+    <div class="vitamui-content">
+      <app-subrogate-user-list [search]="search" [emailDomains]="customer?.emailDomains"></app-subrogate-user-list>
+    </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

ui/ui-frontend/projects/identity/src/app/user/user.component.html

@@ -3,17 +3,23 @@
     <app-user-preview *ngIf="openedItem" (previewClose)="closePanel()" [user]="openedItem" [customer]="customer"></app-user-preview>
   </mat-sidenav>
 
-  <mat-sidenav-content class="overflow-none  vitamui-body">
-    <vitamui-common-title-breadcrumb>
-      Administrer mes utilisateurs
-    </vitamui-common-title-breadcrumb>
+  <mat-sidenav-content>
+    <div class="vitamui-heading">
+      <vitamui-common-title-breadcrumb>
+        Administrer mes utilisateurs
+      </vitamui-common-title-breadcrumb>
 
-    <vitamui-common-banner [searchbarPlaceholder]="'Nom, Prénom, Identifiant, Email'" i18n-placeholder="@@userSearchPlaceholder" (search)="onSearchSubmit($event)">
-      <button class="btn primary" (click)="openCreateUserDialog()" [disabled]="!connectedUserInfo.createUser">
-        <span>Créer un Utilisateur</span>
-      </button>
-    </vitamui-common-banner>
+      <vitamui-common-banner [searchbarPlaceholder]="'Nom, Prénom, Identifiant, Email'"
+        i18n-placeholder="@@userSearchPlaceholder" (search)="onSearchSubmit($event)">
+        <button class="btn primary" (click)="openCreateUserDialog()" [disabled]="!connectedUserInfo.createUser">
+          <span>Créer un Utilisateur</span>
+        </button>
+      </vitamui-common-banner>
+    </div>
 
-    <app-user-list [search]="search" [connectedUserInfo]="connectedUserInfo" (userClick)="openPanel($event)"></app-user-list>
+    <div class="vitamui-content">
+      <app-user-list [search]="search" [connectedUserInfo]="connectedUserInfo" (userClick)="openPanel($event)">
+      </app-user-list>
+    </div>
   </mat-sidenav-content>
-</mat-sidenav-container>
+</mat-sidenav-container>
\ No newline at end of file