Skip to content

B
business-java
Commit 41df1ea4 authored by prumde's avatar prumde
Browse files
Options

Header Changes as per New Layout 


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174380 ce508802-f39f-4f6c-b175-0d175dae99d5
parent 45579b42
Hide whitespace changes
Inline Side-by-side
Showing with 321 additions and 271 deletions
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.css
View file @ 41df1ea4
......@@ -25,6 +25,7 @@
-webkit-filter: contrast(100%) brightness(85%);
filter: contrast(100%) brightness(85%);
border-radius: 100%;
cursor: pointer;
}
.img-logo {
......@@ -59,6 +60,17 @@
}
/*Fixed Header*/
ecm-search{
width: calc( 100% - 300px )
}
.square-button {
height: 60px;
width: 60px;
padding: 0;
min-width: 60px;
vertical-align: middle;
}
.invisible{
display: none;
......@@ -76,16 +88,9 @@
.fixed-header-logo{
float: left;
cursor: pointer;
margin-top: 10px;
margin-left: 60px;
}
.fixed-header-user{
float: right;
border-radius: 100%;
cursor: pointer;
top: 10px !important
}
.fixed-header-logo,
.fixed-header-user,
.fixed-header-cart {
......@@ -95,29 +100,47 @@
padding: 0;
}
.fixed-header-user,
.fixed-header-no-user{
border-radius: 100%;
cursor: pointer;
height: 32px;
width: 32px;
}
.fixed-header-no-user{
background: rgba(0,0,0,0.1);
box-shadow: 0 0 0px 5px rgba(0,0,0,0.1);
height: 28px;
width: 28px;
}
.fixed-header-cart{
cursor: pointer;
height: 28px;
width: 28px;
position: relative;
}
.fixed-header-badge {
float: right;
position: absolute;
top: 0;
left: 32px;
z-index: 1;
margin: 0;
padding: 0;
margin-top: 10px;
background: #fff;
color: mediumvioletred;
border: 3px solid mediumvioletred;
font-weight: bolder;
font-size: xx-small;
border-radius: 100%;
display: inline-block;
width: 16px;
height: 16px;
width: 20px;
height: 20px;
line-height: 16px;
text-align: center;
margin: 12px 5px 5px 2px;
}
.fixed-header-cart{
float: right;
cursor: pointer;
margin-right: -10px;
margin-top: 12px;
height: 38px;
width: 38px;
}
.no-badge {
......@@ -136,30 +159,35 @@
border-color: transparent transparent #fff transparent;
border-style: solid;
border-width: 10px;
/* top: 24px;
margin-left: 6px;*/
top: 40px;
margin-left: 10px;
}
.siteHeading {
position: absolute;
/*position: absolute;
width: 25%;
display: inline-block;
margin-left: 20px !important;
margin: 16px;
color: #fff;
font-size: large;
font-size: large;*/
position: relative;
display: inline-block;
margin: 15px 30px 15px 15px;
color: #fff;
font-size: 14pt;
font-weight: bold;
}
/*Fixed Header Menu*/
.fixed-header-nav{
top: 13px;
left: 0;
left: 1.5rem;
position: fixed;
z-index: 4;
/* height: 100%; */
height: 40px;
height: 45px;
}
......@@ -193,7 +221,7 @@
.rightSlidePanel {
width: 400px;
height: calc( 100% - 60px );
max-height: calc( 100% - 60px );
position: fixed;
right: 5px;
/* top: 40px; */
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.html
View file @ 41df1ea4
......@@ -15,59 +15,59 @@
<!-- SlidePanel Start -->
<div #rightSlidePanel class="rightSlidePanel" >
<span (click)="hideSidePanel();" class="hide-button"></span>
<ecm-user-option *ngIf="sideOption=='USER_OPT'" (closePanel)="hideSidePanel(); createUserData();" ></ecm-user-option>
<ecm-user-option *ngIf="sideOption=='USER_OPT'" (closePanel)="hideSidePanel(); createUserData();" (updateProfileImages) = "updateProfileImages();" ></ecm-user-option>
<div *ngIf="sideOption=='CART_OPT'" style="margin: 3rem;" >
<ecm-cart></ecm-cart>
<ecm-cart></ecm-cart>
<button md-raised-button class="button medium-btn">Checkout</button>
</div>
</div>
<!-- SlidePanel End -->
<div *ngIf="isFixedHeader; then floatHeader " ></div>
<section *ngIf="isFixedHeader" class="header-section visible">
<div class="input-container-bg" [@fadeState]="headerFadeState"></div>
<div class="input-container">
<img *ngIf="userData" (click)="showSidePanel('USER_OPT');" class="user-adj user-image-128" title="{{userData.name}}" src="/ibase/resource/images/users/{{userData.jti}}.png" onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_128_128.png'; " [@userState]="headerFadeState" />
<img *ngIf="!userData" (click)="showOverlayPanel('USER_OPT');" class="img-user user-adj" [@userState]="headerFadeState" />
<div class="row">
<div class="small-12 medium-10 large-10 medium-centered column">
<img class="img-logo logo-adj" [@l2dLogoTrans]="headerFadeState" />
<ecm-search [compFadeState]="headerFadeState"[headerState]="'relative'"></ecm-search>
<section *ngIf="!isFixedHeader" class="fixed-header-section" style="opacity: 1; display: block;">
<ng-container *ngTemplateOutlet="fixedHeader"></ng-container>
</section>
<ng-template #floatHeader>
<section class="header-section visible">
<div class="input-container-bg" [@fadeState]="headerFadeState"></div>
<div class="input-container">
<img *ngIf="userData" [src]="profileImageLink" onerror="this.src = '/ecm/assets/images/w_user_128_128.png'; " class="user-adj user-image-128" title= "{{userData.name}}" (click)="showSidePanel('USER_OPT');" [@userState]="headerFadeState" />
<img *ngIf="!userData" (click)="showOverlayPanel('USER_OPT');" class="img-user user-adj" [@userState]="headerFadeState" />
<div class="row">
<div class="small-12 medium-10 large-10 medium-centered column">
<img class="img-logo logo-adj" [@l2dLogoTrans]="headerFadeState" />
<ecm-search [compFadeState]="headerFadeState" [headerState]="'relative'"></ecm-search>
</div>
</div>
</div>
</div>
</section>
</section>
<section *ngIf="isFixedHeader" class="fixed-header-section" [@fixedHeaderShow]="headerFadeState">
<div class="large-11 medium-centered">
<img class="fixed-header-logo img-logo-32" />
<span class="siteHeading">{{siteHeading}}</span>
<span [ngClass]="{'user-span': sideOption=='USER_OPT'}">
<img *ngIf="userData" (click)="showSidePanel('USER_OPT');" class="fixed-header-user" title="{{userData.name}}" src="/ibase/resource/images/users/{{userData.jti}}.png" onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_32_32.png'; " />
<img *ngIf="!userData" (click)="showOverlayPanel('USER_OPT');" class="fixed-header-user img-user-32" style="top: 16px;"/>
</span>
<span [ngClass]="{'cart-span': sideOption=='CART_OPT'}" >
<span *ngIf="cartItems > 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-badge">{{cartItems}}</span>
<img *ngIf="cartItems > 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-cart img-cart-32" />
<img *ngIf="cartItems == 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-cart img-cart-32 no-badge" />
</span>
<ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search>
</div>
</section>
<section class="fixed-header-section" [@fixedHeaderShow]="headerFadeState">
<ng-container *ngTemplateOutlet="fixedHeader"></ng-container>
</section>
</ng-template>
<ng-template #fixedHeader>
<md-toolbar color="primary">
<img class="fixed-header-logo img-logo-32" />
<span class="siteHeading">{{siteHeading}}</span>
<ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search>
<span [ngClass]="{'cart-span': sideOption=='CART_OPT'}" (click)="cartAction();" >
<button md-button class="square-button">
<span *ngIf="cartItems > 0" class="fixed-header-badge">{{cartItems}}</span>
<img class="fixed-header-cart img-cart-32" />
<!-- <img *ngIf="cartItems == 0" class="fixed-header-cart img-cart-32 no-badge" /> -->
<!--<md-icon class="example-icon">shopping_cart</md-icon>-->
</button>
</span>
<span [ngClass]="{'user-span': userData && sideOption=='USER_OPT'}" (click)="userAction();" >
<button md-button class="square-button">
<img *ngIf="userData" [src]="profileImageLink" onerror="this.src = '/ecm/assets/images/svg/user_32_32.svg'; this.className = 'fixed-header-no-user'" title="{{userData.name}}" [ngClass]="( userImage.src.indexOf('/ibase/') > 0 ) ? 'fixed-header-user' : 'fixed-header-no-user' " #userImage/>
<img *ngIf="!userData" class="fixed-header-no-user img-user-32"/>
<!--<md-icon class="example-icon">account_circle</md-icon>-->
</button>
</span>
</md-toolbar>
</ng-template>
<section *ngIf="!isFixedHeader" class="fixed-header-section" style="opacity: 1; display: block;">
<div class="large-11 medium-centered">
<img class="fixed-header-logo img-logo-32" />
<!-- <img class="fixed-header-back img-back-32" (click) = "backClicked();" /> -->
<span class="siteHeading">{{siteHeading}}</span>
<span [ngClass]="{'user-span': sideOption=='USER_OPT'}">
<img *ngIf="userData" (click)="showSidePanel('USER_OPT');" class="fixed-header-user" title="{{userData.name}}" src="/ibase/resource/images/users/{{userData.jti}}.png" onerror=" this.onerror=null; this.src = '/ibase/resource/images/users/default_32_32.png'; " />
<img *ngIf="!userData" (click)="showOverlayPanel('USER_OPT');" class="fixed-header-user img-user-32" style="top: 16px;" />
</span>
<span [ngClass]="{'cart-span': sideOption=='CART_OPT'}" >
<span *ngIf="cartItems > 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-badge">{{cartItems}}</span>
<img *ngIf="cartItems > 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-cart img-cart-32" />
<img *ngIf="cartItems == 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-cart img-cart-32 no-badge" />
</span>
<ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search>
</div>
</section>
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.ts
View file @ 41df1ea4
import { Component, Input, Output, Inject, OnInit, OnDestroy, HostListener, ElementRef, ViewChild, trigger, state, animate, transition, style } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { Location } from '@angular/common';
import { ActivatedRoute, Router,ActivatedRouteSnapshot,RoutesRecognized } from '@angular/router';
import { ScrollService } from '../scroll.service';
import 'rxjs/add/operator/filter';
declare var initSearch: any;
//declare var initSearch: any;
declare var disableScroll: any;
declare var enableScroll: any;
@Component({
selector: 'ecm-header',
......@@ -72,111 +72,143 @@ declare var initSearch: any;
export class ECMHeaderComponent implements OnInit, OnDestroy {
@ViewChild('rightSlidePanel') rightSlidePanel : ElementRef;
@ViewChild('overlayPanel') overlayPanel : ElementRef;
@ViewChild('bgGlass') bgGlass : ElementRef;
@Input() siteHeading : any = 'Local2do';
@Input() isFixedHeader:boolean=true;
@Input() headerFadeState = 'false';
userData: any;
sideOption: any;
cartItems = 3;
constructor(@Inject(DOCUMENT) private document: Document, private route: ActivatedRoute, private router: Router, private scroll_service: ScrollService, private _location: Location) { }
ngOnInit() {
console.log('ECMHeaderComponent onInit' );
this.createUserData();
}
ngOnDestroy(){
console.log('ECMHeaderComponent onDestroyed');
//localStorage.setItem('currentScrollTop', this.scrollTop + '');
}
createUserData(){
var userInfo = localStorage.getItem('userInfo');
if( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' ) {
this.userData = JSON.parse(userInfo);
@ViewChild( 'rightSlidePanel' ) rightSlidePanel: ElementRef;
@ViewChild( 'overlayPanel' ) overlayPanel: ElementRef;
@ViewChild( 'bgGlass' ) bgGlass: ElementRef;
@Input() siteHeading: any = 'Local2do';
@Input() isFixedHeader: boolean = true;
@Input() headerFadeState = 'false';
@ViewChild( 'userImage' ) userImage: ElementRef;
userData: any;
sideOption: any;
cartItems = 0;
profileImageLink : string;
constructor( @Inject( DOCUMENT ) private document: Document, private route: ActivatedRoute, private router: Router, private scroll_service: ScrollService ) { }
ngOnInit() {
console.log( 'ECMHeaderComponent onInit' );
this.createUserData();
}
else
{
this.userData = null;
ngOnDestroy() {
console.log( 'ECMHeaderComponent onDestroyed' );
}
createUserData() {
var userInfo = localStorage.getItem( 'userInfo' );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{
this.userData = JSON.parse( userInfo );
this.profileImageLink = this.userData.profileImageLink;
}
else
{
this.userData = null;
this.profileImageLink = "";
}
console.log( 'ECMHeaderComponent getUserInfo ::' + userInfo + ' \n this.userData :: ' + this.userData );
}
console.log('ECMHeaderComponent getUserInfo ::' + userInfo + ' \n this.userData :: ' + this.userData);
}
@HostListener('window:scroll', ['$event.target'])
onWindowScroll() {
let scrollTop: number = this.document.body.scrollTop;
if(this.isFixedHeader)
{
if (scrollTop > 10 && scrollTop < 50) {
this.headerFadeState = 'true';
} else if (scrollTop > 50 && scrollTop < 150) {
this.headerFadeState = 'fade150';
} else if (scrollTop > 150 && scrollTop < 200) {
this.headerFadeState = 'fade200';
} else if (scrollTop > 200 && scrollTop < 250) {
this.headerFadeState = 'fade250';
} else if (scrollTop > 250 && scrollTop < 300) {
this.headerFadeState = 'fade300';
} else if (scrollTop > 300 && scrollTop < 350) {
this.headerFadeState = 'fade350';
}else if (scrollTop > 350 && scrollTop < 400) {
this.headerFadeState = 'fade400';
} else if (scrollTop > 400 && scrollTop < 450) {
this.headerFadeState = 'fade450';
} else if (scrollTop > 450 && scrollTop < 500) {
this.headerFadeState = 'fade500';
} else if (scrollTop > 500 && scrollTop < 550) {
this.headerFadeState = 'fade550';
}else if (scrollTop > 550 ) {
this.headerFadeState = 'fade600';
}else if (scrollTop < 10) {
this.headerFadeState = 'false';
@HostListener( 'window:scroll', ['$event.target'] )
onWindowScroll() {
let scrollTop: number = this.document.body.scrollTop;
if ( this.isFixedHeader ) {
if ( scrollTop > 10 && scrollTop < 50 ) {
this.headerFadeState = 'true';
} else if ( scrollTop > 50 && scrollTop < 150 ) {
this.headerFadeState = 'fade150';
} else if ( scrollTop > 150 && scrollTop < 200 ) {
this.headerFadeState = 'fade200';
} else if ( scrollTop > 200 && scrollTop < 250 ) {
this.headerFadeState = 'fade250';
} else if ( scrollTop > 250 && scrollTop < 300 ) {
this.headerFadeState = 'fade300';
} else if ( scrollTop > 300 && scrollTop < 350 ) {
this.headerFadeState = 'fade350';
} else if ( scrollTop > 350 && scrollTop < 400 ) {
this.headerFadeState = 'fade400';
} else if ( scrollTop > 400 && scrollTop < 450 ) {
this.headerFadeState = 'fade450';
} else if ( scrollTop > 450 && scrollTop < 500 ) {
this.headerFadeState = 'fade500';
} else if ( scrollTop > 500 && scrollTop < 550 ) {
this.headerFadeState = 'fade550';
} else if ( scrollTop > 550 ) {
this.headerFadeState = 'fade600';
} else if ( scrollTop < 10 ) {
this.headerFadeState = 'false';
}
}
//console.log('headerFadeState[' + this.headerFadeState + ']' + scrollTop );
localStorage.setItem( 'scrollTop', scrollTop + '' );
//this.scrollTop = scrollTop;
//localStorage.setItem('scrollHeight', document.body.scrollHeight + '');
}
ngAfterViewInit() {
//Removed Collapsible Search
//initSearch();
}
userAction() {
if( this.userData ){
this.showSidePanel('USER_OPT');
}
else{
this.showOverlayPanel('USER_OPT');
}
}
cartAction() {
this.showSidePanel('CART_OPT');
}
showSidePanel( opt: any ) {
console.log( 'ShowSidePanel : ' + opt );
this.rightSlidePanel.nativeElement.style.display = "block";
this.sideOption = opt;
}
hideSidePanel() {
this.rightSlidePanel.nativeElement.style.display = "none";
this.sideOption = null;
}
showOverlayPanel( opt: any ) {
this.overlayPanel.nativeElement.style.display = "block";
this.bgGlass.nativeElement.style.display = "block";
//document.body.style.overflow = "hidden";
disableScroll();
this.sideOption = opt;
}
hideOverlayPanel() {
this.overlayPanel.nativeElement.style.display = "none";
this.bgGlass.nativeElement.style.display = "none";
//document.body.style.overflow = "visible";
enableScroll();
this.sideOption = null;
}
updateProfileImages() {
var userInfo = localStorage.getItem( 'userInfo' );
if ( userInfo !== 'undefined' && userInfo !== null && userInfo !== 'null' )
{
this.userData = JSON.parse( userInfo );
console.log( 'HEADER CHANGES B4: profileImageLink' + this.profileImageLink);
this.profileImageLink = this.userData.profileImageLink;
console.log( 'HEADER CHANGES AFTER: profileImageLink' + this.profileImageLink);
}
console.log(this.userImage);
console.log(this.userImage.nativeElement.src);
console.log(this.userImage.nativeElement.src.indexOf('/ibase/'));
console.log(this.userImage.nativeElement.src.indexOf('/ecm/'));
}
}
//console.log('headerFadeState[' + this.headerFadeState + ']' + scrollTop );
localStorage.setItem('scrollTop', scrollTop + '');
//this.scrollTop = scrollTop;
//localStorage.setItem('scrollHeight', document.body.scrollHeight + '');
}
ngAfterViewInit(){
initSearch();
}
showSidePanel(opt : any) {
console.log('ShowSidePanel : ' + opt);
this.rightSlidePanel.nativeElement.style.display = "block";
this.sideOption = opt;
}
hideSidePanel() {
this.rightSlidePanel.nativeElement.style.display = "none";
this.sideOption = null;
}
showOverlayPanel( opt: any ) {
this.overlayPanel.nativeElement.style.display = "block";
this.bgGlass.nativeElement.style.display = "block";
document.body.style.overflow = "hidden";
this.sideOption = opt;
}
hideOverlayPanel() {
this.overlayPanel.nativeElement.style.display = "none";
this.bgGlass.nativeElement.style.display = "none";
document.body.style.overflow = "visible";
this.sideOption = null;
}
backClicked() {
this._location.back();
}
}
ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.css
View file @ 41df1ea4
......@@ -32,12 +32,6 @@
left: 5px;
}
/*Search Input*/
[type=text].enter-todo:focus {
outline: none;
border: none;
box-shadow: none;
transition: none;
}
.search-form {
width: 100%;
overflow: hidden;
......@@ -60,7 +54,8 @@
height: 65px;
background-color: #fff;
}
.search-terms {
.search-terms,
.search-terms-fixed {
background-image: url(../../assets/images/search.png);
background-position: 15px 15px;
background-repeat: no-repeat;
......@@ -75,6 +70,15 @@
padding: 10px 0 10px 60px;
box-shadow: none;
}
.search-terms-fixed {
width: 75%;
height: 45px;
border-radius: 2px;
background-position: 15px 10px;
background-size: 24px 24px;
font-size: 10pt;
}
.search-which {
margin: 0;
padding: 10px 0 10px 35px;
......@@ -107,35 +111,64 @@
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
/*Fixed Header Search Input*/
.sb-search {
.location-img-32 {
content: url(../../assets/images/svg/location_32_32.svg);
position: relative;
margin-top: 9px;
margin-right: 10px;
width: 0%;
min-width: 32px;
height: 40px;
float: right;
overflow: hidden;
-webkit-transition: width 0.4s;
-moz-transition: width 0.4s;
transition: width 0.4s;
-webkit-backface-visibility: hidden;
top: 0;
left: 0;
z-index: 2;
padding: 5px;
margin: 0 auto;
height: 24px;
width: 24px;
}
.location{
width: calc( 25% - 20px );
position: relative;
display: inline-block;
padding: 0;
margin: 0 10px;
vertical-align: middle;
cursor: pointer;
}
.location-text{
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: calc( 100% - 50px );
vertical-align: middle;
font-size: 12px;
color: #fff;
padding: 0;
margin: 0;
margin-left: -5px;
}
.location-arrow{
vertical-align: middle;
color: #fff;
font-size: 14pt;
}
.sb-search-input {
position: absolute;
position: relative;
top: 0;
right: 0;
border: 0;
border-radius: 2px;
outline: none;
background-color: mediumvioletred;
width: 100%;
height: 40px;
margin: 0;
z-index: 16;
padding: 0px 65px 2px 10px;
font-size: 12px;
padding: 0px 10px 2px 45px;
margin: 0;
margin-left: 20px;
font-size: 14px;
color: #fff;
box-shadow: none;
}
......@@ -156,18 +189,11 @@
color: #2c3e50;
}
*/
.sb-icon-search, .sb-search-reset {
width: 35px;
height: 30px;
display: block;
position: absolute;
right: 0;
top: 15px;
padding: 0;
margin: -8px;
line-height: 32px;
text-align: center;
cursor: pointer;
.sb-search-submit {
width: 0;
height: 0;
visibility: hidden;
}
.sb-search-reset {
background: white;
......@@ -182,44 +208,5 @@
line-height: inherit;
}
.sb-icon-search {
color: #fff;
z-index: 90;
/*background-image: url(../../assets/images/w_search_38_38.png);*/
background-image: url(../../assets/images/svg/w_search_38_38.svg);
background-position: 3px 3px;
background-repeat: no-repeat;
background-size: 25px 25px;
border: none;
outline: none;
}
.sb-icon-search:before {
content: "";
}
/* Open state */
.sb-search.sb-search-open {
width: 50%;
content: url(../../assets/images/v_search_38_38.png);
}
.sb-search.sb-search-open .sb-search-input {
border: none;
border-radius: 2px;
background-color: #fff;
color: black;
padding-left: 50px;
z-index: 16;
}
.sb-search.sb-search-open .sb-icon-search {
border: none;
border-radius: 5px;
background-image: url(../../assets/images/v_search_38_38.png);
left: 16px;
padding-left: 40px;
z-index: 16;
top: 12px;
}
.sb-search.sb-search-open .sb-search-reset {
z-index: 90;
}
.hide {
display: none;
}
\ No newline at end of file
ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search.component.html
View file @ 41df1ea4
<form *ngIf="headerState === 'relative'" action="#" method="post" id="search-form" [@searchInputTrans]="compFadeState">
<form *ngIf="headerState === 'relative'" id="search-form" [@searchInputTrans]="compFadeState">
<span class="search-page-border">
<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms" name="search-terms" />
<span class="search-which-border">
<span class="search-which-border">
<div #locateMeButton class="locate-me">Locate Me</div>
<div class="locate-handle" (click)="getAddress();" ></div>
<img class="img-locate" title="Locate Me" />
<select name="search-which" class="search-which">
<option value="members">Mumbai</option>
<option value="groups">Pune</option>
<option value="forums">Nashik</option>
<option value="posts">Nagpur</option>
<option value="members">Mumbai</option>
<option value="groups">Pune</option>
<option value="forums">Nashik</option>
<option value="posts">Nagpur</option>
</select>
</span>
</span>
<!-- <input type="submit" name="search-submit" class="search-submit" value="Search" (click)="search(myInput.value)"/> -->
</span>
<button md-raised-button class="search-submit" (click)="search(myInput.value)">Search</button>
</form>
<div *ngIf="headerState === 'fixed'" id="sb-search" class="sb-search">
<div *ngIf="headerState === 'fixed'" class="sb-search">
<form>
<input #myInput class="sb-search-input" placeholder="Search ..." type="text"value="" name="search" id="search">
<input class="sb-search-reset" type="reset" value="x" (click)="clearInput()">
<input style="width: 0%" type="submit" (click)="search(myInput.value)">
<span class="sb-icon-search"></span>
<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms-fixed" value="" name="search" id="search" />
<div md-ripple class="location">
<img class="location-img-32"/>
<span class="location-text">Neelkanth Business Park, Vidyavihar (W)</span>
<i class="material-icons location-arrow">keyboard_arrow_down</i>
</div>
<input class="sb-search-submit" type="submit" (click)="search(myInput.value)">
</form>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment