fix(layer-list): fix css of the sorting button and filter on mobile

infra-geo-ouverte · Oct 17, 2018 · 497f15e · 497f15e
1 parent 45c626e
commit 497f15e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/projects/geo/src/lib/layer/layer-list/layer-list.component.html b/projects/geo/src/lib/layer/layer-list/layer-list.component.html
@@ -1,41 +1,41 @@
-<igo-list [navigation]="false" [selection]="false">    
+<igo-list [navigation]="false" [selection]="false">
   <mat-list-item *ngIf="layers.length>=thresholdToFilterAndSort || keyword || onlyInRange || onlyVisible ">
     <ng-container>
-    <mat-form-field [floatLabel]="floatLabel">
-          <input 
-          matInput 
+    <mat-form-field class="inputFilter" [floatLabel]="floatLabel">
+          <input
+          matInput
           [placeholder]="placeholder"
           [matTooltip]="'igo.geo.layer.subsetLayersListKeyword' | translate"
            matTooltipShowDelay="500"
           type="text" [(ngModel)]="keyword">
-          <button 
-          mat-button 
-          *ngIf="keyword" 
+          <button
+          mat-button
+          *ngIf="keyword"
           matSuffix
-          mat-icon-button 
-          aria-label="Clear" 
+          mat-icon-button
+          aria-label="Clear"
           color="warn"
           (click)="keyword = undefined">
           <mat-icon>close</mat-icon>
           </button>
     </mat-form-field>
-    <button 
+    <button
       *ngIf="!sortedAlpha"
-      mat-icon-button  
+      mat-icon-button
       [matTooltip]="'igo.geo.layer.sortAlphabetically' | translate"
       matTooltipShowDelay="500"
       (click)="sortedAlpha = true">
       <mat-icon color="primary">sort_by_alpha</mat-icon>
     </button>
-    <button 
+    <button
       *ngIf="sortedAlpha"
       mat-icon-button
       [matTooltip]="'igo.geo.layer.sortMapOrder' | translate"
       matTooltipShowDelay="500"
       (click)="sortedAlpha = false">
       <mat-icon color="warn">warning</mat-icon>
     </button>
-    <button 
+    <button
       mat-icon-button
       [disabled]="!hasLayerNotVisible"
       [matTooltip]="onlyVisible ?
@@ -53,7 +53,7 @@
         </ng-container>
       </mat-icon>
     </button>
-    <button 
+    <button
       mat-icon-button
       [disabled]="!hasLayerOutOfRange"
       [matTooltip]="onlyInRange ?

diff --git a/projects/geo/src/lib/layer/layer-list/layer-list.component.scss b/projects/geo/src/lib/layer/layer-list/layer-list.component.scss
@@ -0,0 +1,4 @@
+mat-form-field.inputFilter {
+  width: calc(100% - 100px);
+  max-width: 200px;
+}
diff --git a/projects/geo/src/lib/layer/layer-list/layer-list.component.ts b/projects/geo/src/lib/layer/layer-list/layer-list.component.ts
@@ -13,6 +13,7 @@ import { Layer } from '../shared';
 @Component({
   selector: 'igo-layer-list',
   templateUrl: './layer-list.component.html',
+  styleUrls: ['./layer-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LayerListComponent {