added responsive on toolbar (search)

open-learning-exchange · Oct 22, 2024 · 2ccaaac · 2ccaaac
1 parent 3b1f11c
commit 2ccaaac
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/app/manager-dashboard/reports/reports-myplanet.component.html b/src/app/manager-dashboard/reports/reports-myplanet.component.html
@@ -1,12 +1,12 @@
 <!-- Request template -->
-<mat-toolbar>
+<mat-toolbar class="responsive-toolbar">
   <button class="btnBack" mat-icon-button routerLink="/manager">
     <mat-icon>arrow_back</mat-icon>
   </button>
   <span i18n>myPlanet Report</span>
   <span class="toolbar-fill"></span>
   <mat-icon>search</mat-icon>
-  <mat-form-field class="font-size-1">
+  <mat-form-field class="font-size-1 search-bar">
     <input matInput (keyup)="filterData($event.target.value)" [value]="searchValue" i18n-placeholder placeholder="Search">
   </mat-form-field>
 </mat-toolbar>

diff --git a/src/app/manager-dashboard/reports/reports-myplanet.component.scss b/src/app/manager-dashboard/reports/reports-myplanet.component.scss
@@ -0,0 +1,7 @@
+@import '../../variables';
+
+@media (max-width: $screen-sm) {
+    .search-bar {
+        overflow: hidden;
+    }    
+}
diff --git a/src/app/manager-dashboard/reports/reports-myplanet.component.ts b/src/app/manager-dashboard/reports/reports-myplanet.component.ts
@@ -12,7 +12,8 @@ import { switchMap, map } from 'rxjs/operators';
 import { findDocuments } from '../../shared/mangoQueries';
 
 @Component({
-  templateUrl: './reports-myplanet.component.html'
+  templateUrl: './reports-myplanet.component.html',
+  styleUrls: ['./reports-myplanet.component.scss'],
 })
 export class ReportsMyPlanetComponent implements OnInit {