Made map component fill 100% in height, actual height now on pr-use-basis

Author: fcv-iteratorIt

src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.html

@@ -64,7 +64,9 @@ <h3>{{ 'IOTDEVICE.DETAIL' | translate }}</h3>
         <div class="jumbotron jumbotron--m-left jumbotron--full-width">
             <h3>{{ 'IOTDEVICE.LOCATION' | translate }}</h3>
             <div *ngIf="device.location; else locationElseBlock">
+              <div class="thirty-height">
                 <app-map [coordinates]="getCoordinates()"></app-map>
+              </div>
                 <div class="row">
                     <div class="col-6">
                         <p><strong>{{ 'IOTDEVICE.LONGITUDE' | translate }}</strong>{{longitude | number:'2.1-6'}}</p>

src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.html

@@ -64,7 +64,7 @@
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('comment'), 'is-valid' : formFailedSubmit && !errorFields.includes('comment')}">
     </div>
 
-    <div class="form-group mt-3 col-12" *ngIf="iotDevice">
+    <div class="form-group mt-3 col-12 thirty-height" *ngIf="iotDevice">
       <app-map [coordinates]="getCoordinates()" (updateCoordinates)="updateCoordinates($event)"></app-map>
     </div>
 

src/app/gateway/gateway-detail/gateway-detail.component.html

@@ -20,7 +20,9 @@ <h3>{{ 'GATEWAY.DETAILS' | translate }}</h3>
         <div class="jumbotron jumbotron--m-left jumbotron--full-width">
           <div *ngIf="gateway.location; else locationElseBlock">
             <h3>{{ 'GATEWAY.LOCATION' | translate }}</h3>
-            <app-map [coordinates]="getCoordinates()"></app-map>
+            <div class="thirty-height">
+              <app-map [coordinates]="getCoordinates()"></app-map>
+            </div>
             <div class="row">
               <div class="col-4">
                 <p><strong>{{ 'GATEWAY.LONGITUDE' | translate }}</strong>

src/app/gateway/gateway-edit/gateway-edit.component.html

@@ -33,7 +33,7 @@
         [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('id'), 'is-valid' : formFailedSubmit && !errorFields.includes('id')}">
     </div>
 
-    <div class="row" *ngIf="gateway.location">
+    <div class="row thirty-height" *ngIf="gateway.location">
       <app-map [coordinates]="getCoordinates()" (updateCoordinates)="updateCoordinates($event)"></app-map>
     </div>
 
@@ -77,4 +77,4 @@
     <button class="btn btn-primary ml-2" type="submit">{{ submitButton }}</button>
   </div>
 </form>
-<!-- test app-form-iot--gateway -->
+<!-- test app-form-iot--gateway -->

src/app/gateway/gateway-list/gateway-list.component.html

@@ -16,7 +16,7 @@
         </div>
       </mat-tab>
       <mat-tab label="{{'GATEWAY.MAP-TAB' | translate}}">
-        <div class="jumbotron--table" *ngIf="showmap && gateways">
+        <div class="jumbotron--table sixty-height" *ngIf="showmap && gateways">
           <app-map [coordinateList]="coordinateList">
           </app-map>
         </div>

src/app/gateway/gateway-list/gateway-list.component.scss

@@ -3,4 +3,4 @@
   font-size: inherit;
   line-height: 3em;
   height: 3em;
-}
+}

src/assets/scss/components/_boxes.scss

@@ -35,11 +35,19 @@
 .box{
   width: 100%;
   @extend .p-3;
-  
+
   &--info{
     background-color: $color-bg-info;
     border: $info-border;
     border-radius: $border-radius-primary;
     @extend .mb-5;
   }
-}
+}
+
+.sixty-height{
+  height: 60vh;
+}
+
+.thirty-height{
+  height: 30vh
+}

src/assets/scss/components/_map.scss

@@ -1,13 +1,13 @@
 
 
 .map-container {
-    height: 30vh;
+    height: 100%;
   }
-  
+
   .map-frame {
     height: 100%;
   }
-  
+
   .map {
     height: 100%;
-  }
+  }