Updated

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174541 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.css

+/*Chitranga*/
+.search-page-border-mobile
+{
+	/* width: 100%;
+    border: none;
+    border-radius: 4px;
+    position: relative;
+    height: 45px;
+    float: left;
+    margin-left: 0px;
+    margin-right: 0px;	 */
+    
+}
+ 
+.search-terms-mobile{
+    background-image: url(../../assets/images/search.png);
+    background-position: 15px 10px;
+    background-size: 25px;
+    background-repeat: no-repeat;
+    border: none;
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px;
+    width: 100%;
+    height: 45px;
+    position: relative;
+    outline: none;
+    font-size: 10pt;
+    padding: 10px 0 10px 60px;
+    box-shadow: none;
+}
+
+.search-which-border-mobile{
+	width: 100%;
+    border: none;
+    border-radius: 4px;
+    position: relative;
+    /* width: 80%; */
+    height: 45px;
+    float: left;
+    margin: 20px 0;
+    text-align: center;
+    padding-top: 9px;
+    background: mediumvioletred;
+}
+.locate-handle-mo{	
+}
+.img-locate-mo {
+    
+/*     margin: 10px 8px 11px 112px;
+ */}
+.search-submit-mobile.mat-raised-button {
+    background-color: transparent;
+    box-shadow: none;
+    color:white;
+}
+
+.locate-me-mo {
+    color: white;
+}
+
+.search-submit-mobile.mat-raised-button:active {
+    box-shadow: none;
+}
+
+
+
+
+
+
+
+
+
+.search-submit-mobile{
+    width: 100%;
+    border: none;
+    border-radius: 4px;
+    position: relative;
+    height: 45px;
+    float: left;
+    box-shadow: 0 0 5px 1px lightgrey;
+    margin-left: 0px;
+    margin-right: 0px;
+}
+
+
 /*Images Source*/
 .img-locate {
 	content: url(../../assets/images/locate_20_20.png);

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.html

 <form *ngIf="headerState === 'relative'" id="search-form" [@searchInputTrans]="compFadeState">
-	<span class="search-page-border">
+	<span  *ngIf="clientWidth >= 640" class="search-page-border">
 		<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms" name="search-terms" [formControl]="stateCtrl" [mdAutocomplete]="auto" /> 
 		<md-autocomplete #auto>
 			<md-option *ngFor="let option of filteredOptions" [innerHTML]="option.term" [value]="option.term" (click)="search(option.term)" (onSelect)="search(option.term)">
@@ -11,8 +11,24 @@
 			<div class="locate-handle" (click)="loacteMe();" ></div> 
 			<img class="img-locate" title="Locate Me" src="locate_20_20.png"/> 
 		</span>
+
 	</span>
 	<button md-raised-button class="search-submit" (click)="search(myInput.value)">Search</button>
+	
+	<span *ngIf="clientWidth < 639" class="search-page-border-mobile" >
+
+		<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms-mobile" name="search-terms" [formControl]="stateCtrl" [mdAutocomplete]="auto" /> 
+	    <md-autocomplete #auto>
+			<md-option *ngFor="let option of filteredOptions" [innerHTML]="option.term" [value]="option.term" (click)="search(option.term)" (onSelect)="search(option.term)">
+			</md-option>
+		</md-autocomplete>
+		<div class="search-which-border-mobile" (click)="loacteMe();">
+		    <img class="img-locate-mo" title="Locate Me" src="locate_20_20.png"/> 
+		    <span class="locate-me-mo">{{ userLocation.city ? userLocation.city : 'Locate Me' }}</span>
+		</div>
+		<button md-raised-button class="search-submit-mobile" (click)="search(myInput.value)"  [routerLink]="['/explore']" >Explore ></button>
+	</span>
+	
 </form>
 <div *ngIf="headerState === 'fixed'" class="sb-search">
 	<form>

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.ts

@@ -8,7 +8,7 @@ import { Observable } from 'rxjs/Observable';
 import { Store } from '@ngrx/store';
 import { AppState } from '../ecm-store/reducers';
 import { FormControl } from '@angular/forms';
-
+import { RESIZE_EVENT } from '../ecm-store/ecm-resize';
 @Component({
   selector: 'ecm-search',
   templateUrl: './ecm-search.component.html',
@@ -41,7 +41,7 @@ export class ECMSearchComponent implements OnInit {
   stateCtrl = new FormControl();
   options = ['Food', 'Handicrafts', 'Crafts'];
   filteredOptions;
-  
+  clientWidth: any; //chitranga
   public storeUserLocation :  Observable<EcmLocation>;
   public userLocation : EcmLocation;
 
@@ -65,12 +65,18 @@ export class ECMSearchComponent implements OnInit {
   ngOnInit() {
       //this.selectedCity = localStorage.getItem('city');
       this.search_key = this.search_service.getSearch(); 
+      this.clientWidth = document.documentElement.clientWidth;
+        console.log("this.clientWidth in Search component",this.clientWidth);
+        RESIZE_EVENT.subscribe(data => {
+            this.clientWidth = data;
+        });
       
       this.storeUserLocation = this.store.select('location');
       this.storeUserLocation.subscribe( userLocation => {
             //console.log( 'ngOnInit >' + userLocation );
             this.userLocation = userLocation;
       });
+      
   }
   
   ngAfterViewInit() {