Skip to content

Commit 7320d46

Browse files
mas-iotamas-iota
authored
Merge pull request #196 from BuildFire/fix/widget-search
fix(widget): search bar - PLUG-5116
2 parents c58761b + c65c0ba commit 7320d46

4 files changed

Lines changed: 79 additions & 69 deletions

File tree

‎peoplePlugin.zip‎

-753 KB
Binary file not shown.

‎widget/controllers/widget.home.controller.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -117,11 +117,6 @@
117117
executeSearch();
118118
};
119119

120-
$scope.onSearchSubmit = function(e) {
121-
//e.preventDefault();
122-
console.log(e);
123-
};
124-
125120
var MANUALLY = 'Manually',
126121
OLDEST_TO_NEWEST = 'Oldest to Newest',
127122
NEWEST_TO_OLDEST = 'Newest to Oldest',

‎widget/css/widget.app.css‎

Lines changed: 60 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -132,51 +132,63 @@ p:empty{
132132
/* End List Layout 1 ////////////////////////////////////////////////////////////////////////////// */
133133

134134
/* Start Search Bar ////////////////////////////////////////////////////////////////////////////// */
135-
.search-holder {
136-
z-index: 99;
137-
background-color: rgba(255, 255, 255, 0.1);
138-
border-radius: .25rem;
139-
align-items: center;
140-
position: fixed;
141-
top: 0;
142-
left: 0;
143-
width: 100%;
144-
padding: 3.5vw 4vw;
145-
box-shadow: 0 0.05rem 0.25rem rgba(135, 135, 135, 0.2);
146-
}
147-
.search-container{
148-
border-radius: .25rem;
135+
.sticky-top-section{
136+
position: sticky;
137+
top: 0;
138+
z-index: 100;
139+
padding: 15px 0;
140+
background-color: var(--bf-theme-background);
149141
}
150-
.search-holder input[type="text"]{
151-
background-color: rgba(150,150,150,.02);
152-
color: inherit !important;
153-
border: 1px solid transparent;
154-
padding-left: 2rem;
155-
padding-right: 2rem;
142+
143+
.searchItem {
144+
-webkit-box-shadow: 0 .063rem .375rem rgba(0, 0, 0, .2) !important;
145+
box-shadow: 0 .063rem .375rem rgba(0, 0, 0, .2) !important;
146+
background-color: rgba(150, 150, 150, .1);
147+
margin: 0px 15px 0 15px;
156148
}
157-
.search-holder input[type="text"]::placeholder{
158-
color: inherit !important;
159-
opacity: .5;
149+
150+
.search-container {
151+
background-color: hsla(0, 0%, 100%, .05) !important;
152+
box-shadow: 0 2px 4px 2px hsla(0, 0%, 58.8%, .2);
153+
border-radius: 4px;
154+
display: flex;
155+
flex-direction: row;
156+
justify-content: space-between;
157+
padding: 0 16px;
158+
gap: 5px;
159+
align-items: center;
160160
}
161-
.search-icon {
162-
position: absolute;
163-
width: 1rem;
164-
top: 50%;
165-
left: .75rem;
166-
transform: translateY(-50%);
167-
pointer-events: none;
161+
162+
.search-container .search-label {
163+
display: flex;
164+
align-items: center;
165+
justify-content: center;
166+
padding: 12px 0;
167+
font-size: 16px;
168+
margin: 0;
169+
cursor: pointer;
170+
color: var(--bf-theme-icons);
168171
}
169-
.search-clear{
170-
position: absolute;
171-
top: 50%;
172-
right: .25rem;
173-
transform: translateY(-50%);
174-
width: 2rem;
175-
height: 2rem;
176-
font-size: 1rem;
172+
173+
.search-container .search-label svg{
174+
color: var(--bf-theme-icons);
175+
fill: var(--bf-theme-icons);
177176
}
178-
.search-list{
179-
padding-top: 3.75rem;
177+
178+
.disabled-clear-search {
179+
opacity: 0.5;
180+
pointer-events: none;
181+
}
182+
183+
.search-container input.search-text-input {
184+
background-color: unset;
185+
flex: 1;
186+
border: none !important;
187+
outline: none;
188+
color: var(--bf-theme-body-text) !important;
189+
height: 24px;
190+
font-size: 0.875rem;
191+
line-height: 20px;
180192
}
181193
/* End Search Bar ////////////////////////////////////////////////////////////////////////////// */
182194

@@ -429,7 +441,6 @@ ol li{
429441
color: white !important;
430442
}
431443
.infinite-scroll-parent {
432-
padding-top: 3.5rem;
433444
padding-bottom: 2.5rem;
434445
}
435446
.search-box {
@@ -458,26 +469,27 @@ ol li{
458469
font-size: .75em;
459470
}
460471
.no-matches {
461-
position: absolute;
462-
top: 0;
463-
left: 0;
464-
height: 100vh;
465-
width: 100%;
466472
text-align: center;
467-
padding-top: 7rem;
468-
z-index: 10;
473+
height: calc(100% - 110px);
474+
display: flex;
475+
flex-direction: column;
476+
justify-content: center;
477+
align-items: center;
478+
gap: 1rem;
469479
}
470480

471481
.no-matches h1 {
472482
font-size: 16px;
473483
font-weight: 600;
474484
opacity: 0.7;
485+
margin: 0;
475486
}
476487

477488
.no-matches h2 {
478489
font-size: 14px;
479490
font-weight: 400;
480491
opacity: 0.5;
492+
margin: 0;
481493
}
482494

483495
.btnlayout1 {

‎widget/index.html‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -36,23 +36,26 @@
3636
</head>
3737
<body class="body-scroll" style="overflow-y: hidden !important">
3838
<div class="main_view" ng-controller="WidgetHomeCtrl as WidgetHome">
39-
<div class="no-matches load-in backgroundColorTheme" ng-if="searchInput && WidgetHome.items.length <= 0">
40-
<h1>NO RESULTS</h1>
41-
<h2>Please try a different search query.</h2>
42-
</div>
43-
<form class="search-form form search-holder backgroundColorTheme" ng-submit="onSearchSubmit(this)" ng-show="showHome">
44-
<div class="search-container backgroundColorTheme">
45-
<img class="search-icon" src="search.png" alt="Search"/>
46-
<input
47-
class="form-control bodyTextTheme"
48-
ng-change="onSearchChange()"
49-
ng-model="searchInput"
50-
type="text"
51-
placeholder="Search" />
52-
<button ng-click="clear()" type="button" class="btn-icon icon icon-cross2 search-clear" alt="Clear"/></button>
53-
</div>
54-
</form>
5539
<div class="slide infinite-scroll-parent" id="scrollable" data-back-img="{{ backgroundImage}}" ng-show="showHome">
40+
<div class="sticky-top-section">
41+
<div class="searchItem">
42+
<div class="search-container">
43+
<label for="searchTxt" class="search-label">
44+
<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" width="16">
45+
<path
46+
d="m15.504 13.616-3.79-3.223c-.392-.353-.811-.514-1.149-.499.895-1.048 1.435-2.407 1.435-3.893 0-3.314-2.686-6-6-6s-6 2.686-6 6 2.686 6 6 6c1.486 0 2.845-.54 3.893-1.435-.016.338.146.757.499 1.149l3.223 3.79c.552.613 1.453.665 2.003.115s.498-1.452-.115-2.003zm-9.504-3.616c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z" />
47+
</svg>
48+
</label>
49+
<input class="search-text-input" type="text" name="search" id="searchTxt" placeholder="Search" ng-change="onSearchChange()" ng-model="searchInput">
50+
<label ng-click="clear()" ng-class="!searchInput && 'disabled-clear-search'" class="icon-cross2 search-label"></label>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="no-matches load-in backgroundColorTheme" ng-if="searchInput && !WidgetHome.items.length">
55+
<img src="../../../styles/media/empty.svg" alt="Empty State">
56+
<h1>NO RESULTS</h1>
57+
<h2>Please try a different search query.</h2>
58+
</div>
5659
<div>
5760
<div ng-if="WidgetHome.data.design.listLayout"
5861
ng-include="'templates/layouts/' + WidgetHome.data.design.listLayout + '.html'">

0 commit comments

Comments
 (0)