Skip to content

Commit 7721734

Browse files
tikicodertikicoder
committed
Update trutek-header-panel-drawer.html
1 parent 142d276 commit 7721734

1 file changed

Lines changed: 108 additions & 35 deletions

File tree

‎trutek-header-panel-drawer.html‎

Lines changed: 108 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@
2020
:host {
2121
display: block;
2222
}
23-
23+
[userlogin] {
24+
display:none;
25+
}
26+
2427
[drawer] {
2528
background-color: #fff;
2629
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
@@ -57,10 +60,10 @@
5760
background-color:#ffffff;
5861
color:#000000;
5962
border-radius: 30px;
60-
margin-left:-8px;
6163
display:none;
64+
transition: -webkit-transform ease-in-out 0.3s, margin-left ease-in-out 0.3s;
65+
transition: transform ease-in-out 0.3s, margin-left ease-in-out 0.3s;
6266
}
63-
6467
#siteSearchNarrow::shadow core-icon{
6568
height:15px;
6669
width:15px;
@@ -87,14 +90,23 @@
8790
}
8891

8992
#divContainerNarrowSearch {
90-
height:0px;
91-
overflow:hidden;
92-
position:absolute;top:0px;left:0px;background-color:#304ffe;width:100%;font-size:1.3em;padding-left:30px;
93+
position:absolute;top:0px;left:0px;
94+
background-color:#304ffe;
95+
width:100%;
96+
font-size:1.3em;
97+
padding-left:10px;
9398
padding-top:0px;
9499
transition: -webkit-transform ease-in-out 0.3s, height ease-in-out 0.3s;
95100
transition: transform ease-in-out 0.3s, height ease-in-out 0.3s;
96101
}
97-
102+
.divContainerNarrowSearchClosed{
103+
height:0px;
104+
overflow:hidden;
105+
}
106+
.divContainerNarrowSearchOpen{
107+
height:40px;
108+
}
109+
98110
#searchInput{
99111
background-color:#FFFFFF;
100112
font-size:.6em;
@@ -106,6 +118,18 @@
106118
width:200px;
107119
float:left;
108120
}
121+
122+
#searchInputNarrow{
123+
background-color:#FFFFFF;
124+
font-size:.6em;
125+
padding-top:5px;
126+
padding-bottom:5px;
127+
padding-left:5px;
128+
border-top-left-radius: 30px;
129+
border-bottom-left-radius: 30px;
130+
width:200px;
131+
float:left;
132+
}
109133

110134
#searchInputCategory {
111135
background-color: #FFFFFF;
@@ -119,6 +143,20 @@
119143
#searchInputCategory::shadow div core-item {
120144
min-height: 5px !important;
121145
}
146+
#searchInputCategoryNarrow {
147+
background-color: #FFFFFF;
148+
color:#cccccc;
149+
font-size:.6em;
150+
min-height: 6px;
151+
margin-left: -6px;
152+
border-left: solid 1px #Cccccc;
153+
float:left;
154+
border-top-right-radius: 30px;
155+
border-bottom-right-radius: 30px;
156+
}
157+
#searchInputCategoryNarrow::shadow div core-item {
158+
min-height: 5px !important;
159+
}
122160

123161
.searchInputCategoryItem.core-selected{
124162
min-height: 5px;
@@ -152,6 +190,10 @@
152190
width:335px;
153191
}
154192

193+
div.divFullSearchOpening{
194+
width:335px;
195+
overflow:hidden;
196+
}
155197
div.divFullSearchOpen{
156198
width:335px;
157199
}
@@ -297,7 +339,10 @@
297339

298340
}
299341
}
300-
342+
343+
#headerUserInfo{
344+
margin-left:auto;margin-right:10px;
345+
}
301346
</style>
302347

303348
<core-media-query query="max-width: {{responsiveWidthStep2 }}" queryMatches="{{queryMatchesStep2}}"></core-media-query>
@@ -321,12 +366,13 @@
321366
</div>
322367
</div>
323368
</template>
324-
<paper-icon-button id="siteSearchNarrow" data-toggle="off" icon="search" on-tap="" ></paper-icon-button>
369+
<paper-icon-button id="siteSearchNarrow" data-toggle="off" icon="search" on-tap="{{siteSearchNarrowToggle}}" ></paper-icon-button>
325370
<template if="{{showHeaderFilter}}">
326371
<paper-icon-button id="menuFilterSearch" icon="filter" on-tap="" label="Filter"></paper-icon-button>
327372
</template>
328-
373+
<div id="headerUserInfo">
329374
<content select="[userlogin]"></content>
375+
</div>
330376
</core-toolbar>
331377

332378
<trutek-tri-drawer-panel id="drawerPanel" narrow="{{narrow}}" responsiveWidth="{{responsiveWidth}}" responsiveWidthStep1="{{responsiveWidthStep1}}" responsiveWidthStep2="{{responsiveWidthStep2}}">
@@ -337,7 +383,14 @@
337383

338384
</div>
339385
<div main>
340-
<div id="divContainerNarrowSearch">
386+
<div id="divContainerNarrowSearch" class="divContainerNarrowSearchClosed">
387+
<div style="float:left;padding-top:5px;"><core-input id="searchInputNarrow" placeholder="{{headerSearchPlaceHolder}}" type="search"></core-input>
388+
<core-dropdown id="searchInputCategoryNarrow" selected="Clothing" valueattr="label">
389+
<core-item label="Clothing" class="searchInputCategoryItem"></core-item>
390+
<core-item label="Outdoors" class="searchInputCategoryItem"></core-item>
391+
<core-item label="Sports" class="searchInputCategoryItem"></core-item>
392+
</core-dropdown>
393+
</div>
341394
</div>
342395
<content select="*"></content>
343396
</div>
@@ -366,6 +419,7 @@
366419
showHeaderSearch:true,
367420
showHeaderFilter:true,
368421
headerSearchPlaceHolder:"Search...",
422+
headerPanelNarrow: {value: false, reflect: true},
369423

370424
/**
371425
* Used to control the header and scrolling behaviour of `core-header-panel`
@@ -410,47 +464,66 @@
410464
},
411465

412466
toggleSearchPanel: function() {
413-
414-
if(this.$.siteSearchHeader.dataset.state!="open"){
415-
this.$.divFullSearch.className="divFullSearchOpen";
416-
this.$.siteSearchHeader.dataset.state="open";
417-
this.$.siteSearchHeader.className="siteSearchHeaderSearch";
467+
468+
if(!this.headerPanelNarrow){
469+
if(this.$.siteSearchHeader.dataset.state!="open"){
470+
this.$.divFullSearch.className="divFullSearchOpening";
471+
this.$.siteSearchHeader.dataset.state="open";
472+
this.$.siteSearchHeader.className="siteSearchHeaderSearch";
473+
}
474+
else{
475+
this.$.divFullSearch.className="divFullSearchClosed";
476+
this.$.siteSearchHeader.dataset.state="closed";
477+
this.$.siteSearchHeader.className="siteSearchHeaderSearchArrow";
478+
}
418479
}
419480
else{
420-
this.$.divFullSearch.className="divFullSearchClosed";
421-
this.$.siteSearchHeader.dataset.state="closed";
422-
this.$.siteSearchHeader.className="siteSearchHeaderSearchArrow";
481+
if(this.$.siteSearchHeader.dataset.state!="open"){
482+
this.$.siteSearchHeader.dataset.state="open";
483+
this.$.siteSearchHeader.className="siteSearchHeaderSearch";
484+
this.$.divContainerNarrowSearch.className="divContainerNarrowSearchOpen";
485+
this.$.siteSearchNarrow.style.display="block";
486+
this.$.siteSearchNarrow.style.marginLeft="0px";
487+
}
488+
else{
489+
this.$.siteSearchHeader.dataset.state="closed";
490+
this.$.siteSearchHeader.className="siteSearchHeaderSearchArrow";
491+
this.$.divContainerNarrowSearch.className="divContainerNarrowSearchClosed";
492+
this.$.siteSearchNarrow.style.marginLeft="-45px";
493+
494+
}
423495
}
424496

425497
this.fire('change');
426498

427499
},
428-
500+
429501
queryMatchesStep2Changed: function() {
430-
if (this.queryMatchesStep2) {
431-
this.$.divFullSearch.style.display="none";
432-
this.$.siteSearchHeader.style.display="none";
433-
this.$.siteSearchNarrow.style.display="block";
434-
this.$.divContainerNarrowSearch.innerHTML=this.$.divFullSearch.innerHTML;
502+
503+
if(this.$.siteSearchHeader.dataset.state!="closed"){
504+
this.toggleSearchPanel();
505+
}
435506

436-
}
437-
else{
438-
this.$.siteSearchNarrow.dataset.toggle="off";
439-
this.$.divFullSearch.style.display="block";
440-
this.$.siteSearchHeader.style.display="block";
441-
this.$.divContainerNarrowSearch.style.height="0px";
442-
this.$.siteSearchNarrow.style.display="none";
443-
this.$.divContainerNarrowSearch.innerHTML="";
444-
this.$.divContainerNarrowSearch.paddingTop="0px";
445-
}
507+
this.headerPanelNarrow=this.queryMatchesStep2;
508+
509+
if(this.headerPanelNarrow)
510+
this.$.headerUserInfo.style.display="none";
511+
else
512+
this.$.headerUserInfo.style.display="block";
513+
514+
446515
},
447516
siteSearchHeaderAnimationEnd:function(){
448517
this.$.siteSearchHeader.className="";
449518
if(this.$.siteSearchHeader.dataset.state=="open"){
450519
this.$.siteSearchHeader.icon="arrow-back";
520+
if(!this.headerPanelNarrow){
521+
this.$.divFullSearch.className="divFullSearchOpen";
522+
}
451523
}
452524
else{
453525
this.$.siteSearchHeader.icon="search";
526+
this.$.siteSearchNarrow.style.display="none";
454527
}
455528

456529
}

0 commit comments

Comments
 (0)