style(geo): solve mobile issue with measure unit (#1495)

infra-geo-ouverte · Nov 14, 2023 · ce3e4cb · ce3e4cb
1 parent 29e3265
commit ce3e4cb
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 64 deletions.
diff --git a/packages/geo/src/lib/draw/draw/draw.component.html b/packages/geo/src/lib/draw/draw/draw.component.html
@@ -50,18 +50,16 @@
     </mat-slide-toggle>
 
     <div class="radius-unit" *ngIf="isCircle()">
-      <form class="radius-form">
-        <mat-form-field class="radius">
-          <input
-            matInput
-            type="number"
-            min="0"
-            placeholder="{{ 'igo.geo.spatialFilter.radius' | translate }}"
-            [formControl]="radiusFormControl"
-            [readonly]="this.freehandMode"
-          />
-        </mat-form-field>
-      </form>
+      <mat-form-field class="radius">
+        <input
+          matInput
+          type="number"
+          min="0"
+          placeholder="{{ 'igo.geo.spatialFilter.radius' | translate }}"
+          [formControl]="radiusFormControl"
+          [readonly]="this.freehandMode"
+        />
+      </mat-form-field>
 
       <mat-form-field class="unit-field">
         <mat-select

diff --git a/packages/geo/src/lib/draw/draw/draw.component.scss b/packages/geo/src/lib/draw/draw/draw.component.scss
@@ -75,14 +75,12 @@ $slide-toggle-width: 60px;
   }
 
   .radius {
-    display: flex;
-    flex-flow: column nowrap;
-    width: 110%;
+    flex: 2;
   }
 
   .unit-field {
-    width: 110px;
-    margin-left: 30px;
+    flex: 1;
+    margin-left: 8px;
   }
 
   .radius-unit {

diff --git a/.../geo/src/lib/filter/spatial-filter/spatial-filter-item/spatial-filter-item.component.html b/.../geo/src/lib/filter/spatial-filter/spatial-filter-item/spatial-filter-item.component.html
@@ -33,18 +33,16 @@
 </div>
 
 <div class="buffer-unit" *ngIf="isPolygon()">
-  <form class="buffer-form">
-    <mat-form-field class="buffer">
-      <input
-        type="number"
-        matInput
-        placeholder="{{ 'igo.geo.spatialFilter.buffer' | translate }}"
-        [formControl]="bufferFormControl"
-        [value]="0"
-        [readonly]="this.formControl.value === null"
-      />
-    </mat-form-field>
-  </form>
+  <mat-form-field class="buffer">
+    <input
+      type="number"
+      matInput
+      placeholder="{{ 'igo.geo.spatialFilter.buffer' | translate }}"
+      [formControl]="bufferFormControl"
+      [value]="0"
+      [readonly]="this.formControl.value === null"
+    />
+  </mat-form-field>
 
   <mat-form-field class="unit-field">
     <mat-select
@@ -62,21 +60,17 @@
 </div>
 
 <div class="radius-unit" *ngIf="isPoint()">
-  <form class="radius-form">
-    <mat-form-field class="radius">
-      <input
-        type="number"
-        matInput
-        placeholder="{{ 'igo.geo.spatialFilter.radius' | translate }}"
-        [formControl]="radiusFormControl"
-        [value]="1000"
-        (input)="getRadius()"
-        [readonly]="
-          this.freehandDrawIsActive && this.formControl.value === null
-        "
-      />
-    </mat-form-field>
-  </form>
+  <mat-form-field class="radius">
+    <input
+      type="number"
+      matInput
+      placeholder="{{ 'igo.geo.spatialFilter.radius' | translate }}"
+      [formControl]="radiusFormControl"
+      [value]="1000"
+      (input)="getRadius()"
+      [readonly]="this.freehandDrawIsActive && this.formControl.value === null"
+    />
+  </mat-form-field>
 
   <mat-form-field class="unit-field">
     <mat-select

diff --git a/.../geo/src/lib/filter/spatial-filter/spatial-filter-item/spatial-filter-item.component.scss b/.../geo/src/lib/filter/spatial-filter/spatial-filter-item/spatial-filter-item.component.scss
@@ -80,14 +80,13 @@ $slide-toggle-width: 60px;
 
   .radius,
   .buffer {
-    display: flex;
     flex-flow: column nowrap;
-    width: 110%;
+    flex: 2;
   }
 
   .unit-field {
-    width: 110px;
-    margin-left: 30px;
+    flex: 1;
+    margin-left: 8px;
   }
 
   .example-tree-invisible {

diff --git a/.../geo/src/lib/filter/spatial-filter/spatial-filter-list/spatial-filter-list.component.scss b/.../geo/src/lib/filter/spatial-filter/spatial-filter-list/spatial-filter-list.component.scss
@@ -11,13 +11,11 @@
   }
 
   .buffer {
-    display: flex;
-    flex-flow: column nowrap;
-    width: 110%;
+    flex: 2;
   }
 
   .unit-field {
-    width: 110px;
-    margin-left: 16px;
+    flex: 1;
+    margin-left: 8px;
   }
 }
diff --git a/packages/geo/src/lib/measure/measurer/measurer-item.component.scss b/packages/geo/src/lib/measure/measurer/measurer-item.component.scss
@@ -5,20 +5,12 @@
 
   .measure-field {
     pointer-events: none;
+    flex: 2;
   }
 
   .unit-field {
-    margin-left: 12px;
-
-    ::ng-deep {
-      .mat-mdc-form-field-infix {
-        width: fit-content;
-      }
-
-      .mat-mdc-select-min-line {
-        padding-right: 8px;
-      }
-    }
+    margin-left: 8px;
+    flex: 1;
   }
 
   ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper {