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 @@ ...@@ -25,6 +25,7 @@
-webkit-filter: contrast(100%) brightness(85%); -webkit-filter: contrast(100%) brightness(85%);
filter: contrast(100%) brightness(85%); filter: contrast(100%) brightness(85%);
border-radius: 100%; border-radius: 100%;
cursor: pointer;
} }
.img-logo { .img-logo {
...@@ -59,6 +60,17 @@ ...@@ -59,6 +60,17 @@
} }
/*Fixed Header*/ /*Fixed Header*/
ecm-search{
width: calc( 100% - 300px )
}
.square-button {
height: 60px;
width: 60px;
padding: 0;
min-width: 60px;
vertical-align: middle;
}
.invisible{ .invisible{
display: none; display: none;
...@@ -76,16 +88,9 @@ ...@@ -76,16 +88,9 @@
.fixed-header-logo{ .fixed-header-logo{
float: left; float: left;
cursor: pointer; 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-logo,
.fixed-header-user, .fixed-header-user,
.fixed-header-cart { .fixed-header-cart {
...@@ -95,29 +100,47 @@ ...@@ -95,29 +100,47 @@
padding: 0; 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 { .fixed-header-badge {
float: right; position: absolute;
top: 0;
left: 32px;
z-index: 1;
margin: 0;
padding: 0;
margin-top: 10px;
background: #fff; background: #fff;
color: mediumvioletred; color: mediumvioletred;
border: 3px solid mediumvioletred;
font-weight: bolder; font-weight: bolder;
font-size: xx-small; font-size: xx-small;
border-radius: 100%; border-radius: 100%;
display: inline-block; display: inline-block;
width: 16px; width: 20px;
height: 16px; height: 20px;
line-height: 16px; line-height: 16px;
text-align: center; 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 { .no-badge {
...@@ -136,30 +159,35 @@ ...@@ -136,30 +159,35 @@
border-color: transparent transparent #fff transparent; border-color: transparent transparent #fff transparent;
border-style: solid; border-style: solid;
border-width: 10px; border-width: 10px;
/* top: 24px;
margin-left: 6px;*/
top: 40px; top: 40px;
margin-left: 10px; margin-left: 10px;
} }
.siteHeading { .siteHeading {
position: absolute; /*position: absolute;
width: 25%; width: 25%;
display: inline-block; display: inline-block;
margin-left: 20px !important; margin-left: 20px !important;
margin: 16px; margin: 16px;
color: #fff; 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 Menu*/
.fixed-header-nav{ .fixed-header-nav{
top: 13px; top: 13px;
left: 0; left: 1.5rem;
position: fixed; position: fixed;
z-index: 4; z-index: 4;
/* height: 100%; */ /* height: 100%; */
height: 40px; height: 45px;
} }
...@@ -193,7 +221,7 @@ ...@@ -193,7 +221,7 @@
.rightSlidePanel { .rightSlidePanel {
width: 400px; width: 400px;
height: calc( 100% - 60px ); max-height: calc( 100% - 60px );
position: fixed; position: fixed;
right: 5px; right: 5px;
/* top: 40px; */ /* top: 40px; */
......
ecm/Angular/ProteusECM/trunk/src/app/ecm-header/ecm-header.component.html
View file @ 41df1ea4
...@@ -15,59 +15,59 @@ ...@@ -15,59 +15,59 @@
<!-- SlidePanel Start --> <!-- SlidePanel Start -->
<div #rightSlidePanel class="rightSlidePanel" > <div #rightSlidePanel class="rightSlidePanel" >
<span (click)="hideSidePanel();" class="hide-button"></span> <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;" > <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> <button md-raised-button class="button medium-btn">Checkout</button>
</div> </div>
</div> </div>
<!-- SlidePanel End --> <!-- SlidePanel End -->
<div *ngIf="isFixedHeader; then floatHeader " ></div>
<section *ngIf="isFixedHeader" class="header-section visible"> <section *ngIf="!isFixedHeader" class="fixed-header-section" style="opacity: 1; display: block;">
<div class="input-container-bg" [@fadeState]="headerFadeState"></div> <ng-container *ngTemplateOutlet="fixedHeader"></ng-container>
<div class="input-container"> </section>
<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" /> <ng-template #floatHeader>
<div class="row"> <section class="header-section visible">
<div class="small-12 medium-10 large-10 medium-centered column"> <div class="input-container-bg" [@fadeState]="headerFadeState"></div>
<img class="img-logo logo-adj" [@l2dLogoTrans]="headerFadeState" /> <div class="input-container">
<ecm-search [compFadeState]="headerFadeState"[headerState]="'relative'"></ecm-search> <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> </div>
</div> </section>
</section>
<section *ngIf="isFixedHeader" class="fixed-header-section" [@fixedHeaderShow]="headerFadeState"> <section class="fixed-header-section" [@fixedHeaderShow]="headerFadeState">
<div class="large-11 medium-centered"> <ng-container *ngTemplateOutlet="fixedHeader"></ng-container>
<img class="fixed-header-logo img-logo-32" /> </section>
<span class="siteHeading">{{siteHeading}}</span> </ng-template>
<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'; " /> <ng-template #fixedHeader>
<img *ngIf="!userData" (click)="showOverlayPanel('USER_OPT');" class="fixed-header-user img-user-32" style="top: 16px;"/> <md-toolbar color="primary">
</span> <img class="fixed-header-logo img-logo-32" />
<span [ngClass]="{'cart-span': sideOption=='CART_OPT'}" > <span class="siteHeading">{{siteHeading}}</span>
<span *ngIf="cartItems > 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-badge">{{cartItems}}</span> <ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search>
<img *ngIf="cartItems > 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-cart img-cart-32" /> <span [ngClass]="{'cart-span': sideOption=='CART_OPT'}" (click)="cartAction();" >
<img *ngIf="cartItems == 0" (click)="showSidePanel('CART_OPT');" class="fixed-header-cart img-cart-32 no-badge" /> <button md-button class="square-button">
</span> <span *ngIf="cartItems > 0" class="fixed-header-badge">{{cartItems}}</span>
<ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search> <img class="fixed-header-cart img-cart-32" />
</div> <!-- <img *ngIf="cartItems == 0" class="fixed-header-cart img-cart-32 no-badge" /> -->
</section> <!--<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 { Component, Input, Output, Inject, OnInit, OnDestroy, HostListener, ElementRef, ViewChild, trigger, state, animate, transition, style } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser'; import { DOCUMENT } from '@angular/platform-browser';
import { Location } from '@angular/common';
import { ActivatedRoute, Router,ActivatedRouteSnapshot,RoutesRecognized } from '@angular/router'; import { ActivatedRoute, Router,ActivatedRouteSnapshot,RoutesRecognized } from '@angular/router';
import { ScrollService } from '../scroll.service'; import { ScrollService } from '../scroll.service';
import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/filter';
declare var initSearch: any; //declare var initSearch: any;
declare var disableScroll: any;
declare var enableScroll: any;
@Component({ @Component({
selector: 'ecm-header', selector: 'ecm-header',
...@@ -72,111 +72,143 @@ declare var initSearch: any; ...@@ -72,111 +72,143 @@ declare var initSearch: any;
export class ECMHeaderComponent implements OnInit, OnDestroy { export class ECMHeaderComponent implements OnInit, OnDestroy {
@ViewChild('rightSlidePanel') rightSlidePanel : ElementRef; @ViewChild( 'rightSlidePanel' ) rightSlidePanel: ElementRef;
@ViewChild('overlayPanel') overlayPanel : ElementRef; @ViewChild( 'overlayPanel' ) overlayPanel: ElementRef;
@ViewChild('bgGlass') bgGlass : ElementRef; @ViewChild( 'bgGlass' ) bgGlass: ElementRef;
@Input() siteHeading : any = 'Local2do'; @Input() siteHeading: any = 'Local2do';
@Input() isFixedHeader:boolean=true; @Input() isFixedHeader: boolean = true;
@Input() headerFadeState = 'false'; @Input() headerFadeState = 'false';
@ViewChild( 'userImage' ) userImage: ElementRef;
userData: any;
sideOption: any; userData: any;
cartItems = 3; sideOption: any;
cartItems = 0;
constructor(@Inject(DOCUMENT) private document: Document, private route: ActivatedRoute, private router: Router, private scroll_service: ScrollService, private _location: Location) { } profileImageLink : string;
ngOnInit() { constructor( @Inject( DOCUMENT ) private document: Document, private route: ActivatedRoute, private router: Router, private scroll_service: ScrollService ) { }
console.log('ECMHeaderComponent onInit' );
this.createUserData(); 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);
} }
else
{ ngOnDestroy() {
this.userData = null; 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() {
@HostListener('window:scroll', ['$event.target'])
onWindowScroll() { let scrollTop: number = this.document.body.scrollTop;
let scrollTop: number = this.document.body.scrollTop; if ( this.isFixedHeader ) {
if ( scrollTop > 10 && scrollTop < 50 ) {
if(this.isFixedHeader) this.headerFadeState = 'true';
{ } else if ( scrollTop > 50 && scrollTop < 150 ) {
if (scrollTop > 10 && scrollTop < 50) { this.headerFadeState = 'fade150';
this.headerFadeState = 'true'; } else if ( scrollTop > 150 && scrollTop < 200 ) {
} else if (scrollTop > 50 && scrollTop < 150) { this.headerFadeState = 'fade200';
this.headerFadeState = 'fade150'; } else if ( scrollTop > 200 && scrollTop < 250 ) {
} else if (scrollTop > 150 && scrollTop < 200) { this.headerFadeState = 'fade250';
this.headerFadeState = 'fade200'; } else if ( scrollTop > 250 && scrollTop < 300 ) {
} else if (scrollTop > 200 && scrollTop < 250) { this.headerFadeState = 'fade300';
this.headerFadeState = 'fade250'; } else if ( scrollTop > 300 && scrollTop < 350 ) {
} else if (scrollTop > 250 && scrollTop < 300) { this.headerFadeState = 'fade350';
this.headerFadeState = 'fade300'; } else if ( scrollTop > 350 && scrollTop < 400 ) {
} else if (scrollTop > 300 && scrollTop < 350) { this.headerFadeState = 'fade400';
this.headerFadeState = 'fade350'; } else if ( scrollTop > 400 && scrollTop < 450 ) {
}else if (scrollTop > 350 && scrollTop < 400) { this.headerFadeState = 'fade450';
this.headerFadeState = 'fade400'; } else if ( scrollTop > 450 && scrollTop < 500 ) {
} else if (scrollTop > 400 && scrollTop < 450) { this.headerFadeState = 'fade500';
this.headerFadeState = 'fade450'; } else if ( scrollTop > 500 && scrollTop < 550 ) {
} else if (scrollTop > 450 && scrollTop < 500) { this.headerFadeState = 'fade550';
this.headerFadeState = 'fade500'; } else if ( scrollTop > 550 ) {
} else if (scrollTop > 500 && scrollTop < 550) { this.headerFadeState = 'fade600';
this.headerFadeState = 'fade550'; } else if ( scrollTop < 10 ) {
}else if (scrollTop > 550 ) { this.headerFadeState = 'false';
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 @@ ...@@ -32,12 +32,6 @@
left: 5px; left: 5px;
} }
/*Search Input*/ /*Search Input*/
[type=text].enter-todo:focus {
outline: none;
border: none;
box-shadow: none;
transition: none;
}
.search-form { .search-form {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
...@@ -60,7 +54,8 @@ ...@@ -60,7 +54,8 @@
height: 65px; height: 65px;
background-color: #fff; background-color: #fff;
} }
.search-terms { .search-terms,
.search-terms-fixed {
background-image: url(../../assets/images/search.png); background-image: url(../../assets/images/search.png);
background-position: 15px 15px; background-position: 15px 15px;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -75,6 +70,15 @@ ...@@ -75,6 +70,15 @@
padding: 10px 0 10px 60px; padding: 10px 0 10px 60px;
box-shadow: none; 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 { .search-which {
margin: 0; margin: 0;
padding: 10px 0 10px 35px; padding: 10px 0 10px 35px;
...@@ -107,35 +111,64 @@ ...@@ -107,35 +111,64 @@
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
/*Fixed Header Search Input*/ /*Fixed Header Search Input*/
.sb-search { .location-img-32 {
content: url(../../assets/images/svg/location_32_32.svg);
position: relative; position: relative;
margin-top: 9px; top: 0;
margin-right: 10px; left: 0;
width: 0%; z-index: 2;
min-width: 32px; padding: 5px;
height: 40px; margin: 0 auto;
float: right; height: 24px;
overflow: hidden; width: 24px;
-webkit-transition: width 0.4s;
-moz-transition: width 0.4s;
transition: width 0.4s;
-webkit-backface-visibility: hidden;
} }
.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 { .sb-search-input {
position: absolute; position: relative;
top: 0; top: 0;
right: 0; right: 0;
border: 0; border: 0;
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
background-color: mediumvioletred;
width: 100%; width: 100%;
height: 40px; height: 40px;
margin: 0;
z-index: 16; z-index: 16;
padding: 0px 65px 2px 10px; padding: 0px 10px 2px 45px;
font-size: 12px; margin: 0;
margin-left: 20px;
font-size: 14px;
color: #fff; color: #fff;
box-shadow: none; box-shadow: none;
} }
...@@ -156,18 +189,11 @@ ...@@ -156,18 +189,11 @@
color: #2c3e50; color: #2c3e50;
} }
*/ */
.sb-icon-search, .sb-search-reset {
width: 35px; .sb-search-submit {
height: 30px; width: 0;
display: block; height: 0;
position: absolute; visibility: hidden;
right: 0;
top: 15px;
padding: 0;
margin: -8px;
line-height: 32px;
text-align: center;
cursor: pointer;
} }
.sb-search-reset { .sb-search-reset {
background: white; background: white;
...@@ -182,44 +208,5 @@ ...@@ -182,44 +208,5 @@
line-height: inherit; line-height: inherit;
} }
.sb-icon-search { .sb-icon-search {
color: #fff; content: url(../../assets/images/v_search_38_38.png);
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%;
} }
.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"> <span class="search-page-border">
<input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms" name="search-terms" /> <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 #locateMeButton class="locate-me">Locate Me</div>
<div class="locate-handle" (click)="getAddress();" ></div> <div class="locate-handle" (click)="getAddress();" ></div>
<img class="img-locate" title="Locate Me" /> <img class="img-locate" title="Locate Me" />
<select name="search-which" class="search-which"> <select name="search-which" class="search-which">
<option value="members">Mumbai</option> <option value="members">Mumbai</option>
<option value="groups">Pune</option> <option value="groups">Pune</option>
<option value="forums">Nashik</option> <option value="forums">Nashik</option>
<option value="posts">Nagpur</option> <option value="posts">Nagpur</option>
</select> </select>
</span>
</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> <button md-raised-button class="search-submit" (click)="search(myInput.value)">Search</button>
</form> </form>
<div *ngIf="headerState === 'fixed'" id="sb-search" class="sb-search"> <div *ngIf="headerState === 'fixed'" class="sb-search">
<form> <form>
<input #myInput class="sb-search-input" placeholder="Search ..." type="text"value="" name="search" id="search"> <input #myInput type="text" placeholder="Search Food, Tour, Events and More..." class="search-terms-fixed" value="" name="search" id="search" />
<input class="sb-search-reset" type="reset" value="x" (click)="clearInput()"> <div md-ripple class="location">
<input style="width: 0%" type="submit" (click)="search(myInput.value)"> <img class="location-img-32"/>
<span class="sb-icon-search"></span> <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> </form>
</div> </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