[frontend] Style margin and map height

PnX-SI · Dec 8, 2023 · 28b8c8e · 28b8c8e
1 parent 71209dd
commit 28b8c8e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
diff --git a/frontend/app/components/monitoring-map-list/monitoring-map-list.component.html b/frontend/app/components/monitoring-map-list/monitoring-map-list.component.html
@@ -1,7 +1,9 @@
-<div class="row">
-  <div class="col-6">
+<div class="flex-container" id="object">
     <div id="geometry" class="monitoring-map-container" class="cadre" *ngIf="displayMap">
-      <pnx-map height="80vh" [ngClass]="{ 'hide-draw-form': !(bEdit && obj) }">
+      <pnx-map
+        *ngIf="heightMap"
+        [height]="heightMap"
+        [ngClass]="{ 'hide-draw-form': !(bEdit && obj) }">
         <pnx-draw-form
           [parentFormControl]="objForm && objForm.controls && objForm.controls['geometry']"
           [geometryType]="obj && obj.config && obj.config['geometry_type']"
@@ -11,14 +13,10 @@
         ></pnx-draw-form>
       </pnx-map>
     </div>
-  </div>
-  <div [ngClass]="displayMap ? 'col-6' : 'col-12'">
-    <div class="mr-3">
-      <div id="monitoring-elem-container" class="cadre scroll">
-        <pnx-monitoring-breadcrumbs></pnx-monitoring-breadcrumbs>
-        <!-- <button (click)="displayMap = !displayMap">HIDE MAP</button> -->
-        <router-outlet (activate)="onActivate($event)"></router-outlet>
-      </div>
+    <div id="monitoring-elem-container" class="cadre scroll">
+      <pnx-monitoring-breadcrumbs></pnx-monitoring-breadcrumbs>
+      <!-- <button (click)="displayMap = !displayMap">HIDE MAP</button> -->
+      <router-outlet (activate)="onActivate($event)"></router-outlet>
     </div>
-  </div>
 </div>
+
diff --git a/frontend/app/components/monitoring-map-list/monitoring-map-list.component.ts b/frontend/app/components/monitoring-map-list/monitoring-map-list.component.ts
@@ -6,7 +6,9 @@ import { FormService } from '../../services/form.service';
 import { ApiGeomService } from '../../services/api-geom.service';
 import { ConfigJsonService } from '../../services/config-json.service';
 import { ObjectService } from '../../services/object.service';
+import { CommonService } from '@geonature_common/service/common.service';
 import { FormGroup } from '@angular/forms';
+
 @Component({
   selector: 'monitoring-map-list.component',
   templateUrl: './monitoring-map-list.component.html',
@@ -17,11 +19,26 @@ export class MonitoringMapListComponent {
   obj: any;
   bEdit: boolean;
   objForm: FormGroup;
+  heightMap: string="80vh";
   //
   displayMap: boolean = true;
   siteSiteGroup: SiteSiteGroup | null = null;
   apiService: ApiGeomService;
-  constructor(private _formService: FormService) {}
+
+  constructor(
+    private _formService: FormService,
+    private _commonService: CommonService
+  ) {}
+
+  ngAfterViewInit() {
+    const container = document.getElementById('object');
+    const height = this._commonService.calcCardContentHeight();
+    container.style.height = height - 40 + 'px';
+    setTimeout(() => {
+      this.heightMap = height - 80 + 'px';
+    });
+
+  }
 
   onActivate(component) {
     this._formService.currentFormMap

diff --git a/frontend/app/components/monitoring-properties-g/monitoring-properties-g.component.html b/frontend/app/components/monitoring-properties-g/monitoring-properties-g.component.html
@@ -42,7 +42,7 @@
         </div>
       </mat-tab>
       <!-- TODO: tester l'ajout de médias et voir le comportement de obj.properties -->
-      <!-- <mat-tab 
+      <mat-tab
       *ngIf="obj.properties['medias'] && obj.properties['medias'].length"
       label="Médias ({{(obj.properties['medias'] && obj.properties['medias'].length) || 0}})"
     >
@@ -68,7 +68,7 @@
           </div>
         </div>
       </ng-container>
-    </mat-tab> -->
+    </mat-tab>
     </mat-tab-group>
 
     <div class="tab-content" id="nav-tabContent" [ngStyle]="{ 'background-color': color }">
@@ -174,11 +174,11 @@
     role="status"
     aria-hidden="true"
     ></span>
-    
+
       Mettre à jour la synthèse
       <mat-icon>sync</mat-icon>
     </button>
-    
+
     <button
       mat-stroked-button
       *ngIf="obj.template['export_csv']"