Skip to content

Commit

Permalink
animated search bar (it's alive)
Browse files Browse the repository at this point in the history
  • Loading branch information
@naclonts
naclonts committed Jul 20, 2017
1 parent 14b3a0a commit 8bacaad
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 28 deletions.
18 changes: 16 additions & 2 deletions assets/bundles/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,15 +208,30 @@ function init() {
}
};

// Show button on searchbox click
$('#search-value').click(e => {
$('#submit-search').addClass('active-input');
$('#search').addClass('selected');
$(document).click(e => {
if (!$(e.target).is('input')) {
$('#search').removeClass('selected');
$('#submit-search').removeClass('active-input');
}
});
});

// Listen for zip code search
$('#submit-search').click(e => {
// prevent form submission
e.preventDefault();

// clear old results
$('.market-summary-wrapper').empty();
markets.data = {};
markets.lastDisplayed = 0;

// generate new results
__WEBPACK_IMPORTED_MODULE_0__market_data_js__["a" /* local */]($('#zipcode').val()).then(data => {
__WEBPACK_IMPORTED_MODULE_0__market_data_js__["a" /* local */]($('#search-value').val()).then(data => {
markets.update(data);

// Display market data
Expand All @@ -226,7 +241,6 @@ function init() {
$('#more-results').click(e => {
makeSummaries(markets, $('#summary-wrapper'), 9);
});

// Show tags to toggle/filter with
makeTags(markets, $('#tag-toggle-wrapper'));
}).catch(err => addError(err, $('#summary-wrapper'), "Looks like we weren't able to find anything in zip " + '"' + ($('#zipcode').val() || 'Zip code') + '".'));
Expand Down
18 changes: 16 additions & 2 deletions assets/js/markets/farmer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,15 +138,30 @@ function init() {
}
};

// Show button on searchbox click
$('#search-value').click((e) => {
$('#submit-search').addClass('active-input');
$('#search').addClass('selected');
$(document).click((e) => {
if (!$(e.target).is('input')) {
$('#search').removeClass('selected');
$('#submit-search').removeClass('active-input');
}
});
});

// Listen for zip code search
$('#submit-search').click((e) => {
// prevent form submission
e.preventDefault();

// clear old results
$('.market-summary-wrapper').empty();
markets.data = {};
markets.lastDisplayed = 0;

// generate new results
api.local($('#zipcode').val())
api.local($('#search-value').val())
.then((data) => {
markets.update(data);

Expand All @@ -157,7 +172,6 @@ function init() {
$('#more-results').click((e) => {
makeSummaries(markets, $('#summary-wrapper'), 9);
});

// Show tags to toggle/filter with
makeTags(markets, $('#tag-toggle-wrapper'));
})
Expand Down
117 changes: 104 additions & 13 deletions markets/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
padding: 0 15px;
position: relative;
display: flex;
justify-content: space-between;
flex-flow: row nowrap;
align-items: center;
}
Expand Down Expand Up @@ -81,31 +80,124 @@
padding-top: 60px;
}


/* Search form */
.market-header .searchbar {
padding-left: 12px;
flex: 1;
max-width: 30%;
position: relative;
margin-left: auto;
transition: all 600ms cubic-bezier(.165, .84, .44, 1);
}
.market-header .searchbar.selected {
max-width: 100%;
}

.market-header .searchbar>.svg-icon {
position: absolute;
left: 25px;
top: 50%;
transform: translateY(-50%);
color: hsl(208, 7%, 55%);
fill: hsl(208, 7%, 55%);
pointer-events: none;
transition: opacity .25s cubic-bezier(.165, .84, .44, 1);
}

.market-header .searchbar input[type="text"].f-input {
margin: 0;
padding-left: 38px;
width: 100%;
height: 36px;
border-radius: 2px;
color: hsl(210, 7%, 45%);
}

.market-header .searchbar .btn {
height: 36px;
opacity: 0;
margin: 0;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: -1;
transition: all .35s cubic-bezier(.165, .84, .44, 1);
}
.market-header .searchbar .btn.active-input {
opacity: 1;
z-index: 0;
}

.f-input {
box-sizing: border-box;
flex: 1 auto;
padding: 8px 16px;
min-height: auto;
vertical-align: middle;
border: 1px solid hsl(202, 7%, 80%);
box-shadow: inset 0 0 1px hsla(210, 7%, 60%, 0.2),
0 0 0 hsla(0, 0%, 100%, 0);
line-height: 1.4;
color: hsl(210, 7%, 25%);
background: #FFF;
transition: all 600ms cubic-bezier(.165, .84, .44, 1);
}

.svg-icon {
vertical-align: bottom;
}
svg[Attribute Style] {
width: 18;
height: 18
}
svg:not(:root) {
overflow: hidden;
}

button, .btn {
display: inline-block;
color: #FFF;
fill: #FFF;
background-color: hsl(204, 100%, 50%);
border-color: hsl(205, 100%, 40%);
box-shadow: inset 0 1px 0 hsl(205, 100%, 70%);
padding: .61538em 1em;
min-height: 2.4615em;
font-weight: 400;
font-family: inherit;
line-height: 1;
text-align: center;
text-decoration: none;
border-radius: 2px;
border: 1px solid transparent;
cursor: pointer;
outline: none;
touch-action: manipulation;
}

button {
align-items: flex-start;
}


/* Body & content */

body {
color: #222;
font-family: sans-serif;
}

.search-wrapper {
.__search-wrapper {
height: 2.5em;
margin: auto;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
input[type="text"], .big-button {
height: 100%;
font-size: 1.5em;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: inherit;
}
input[type="text"] {
max-width: 70%;
}

.big-button {
width: 25%;
background-color: hsl(250, 90%, 95%);
Expand Down Expand Up @@ -135,7 +227,6 @@ input[type="text"] {
color: #fafafa;
border: 0;
border-radius: 10px;
font-size: 1.5em;
transition: 0.2s all;
}
.tag-toggle:hover, #clear-filters:hover {
Expand Down
16 changes: 6 additions & 10 deletions markets/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,13 @@
</ol>
</nav>

<form id="search" action="/search" method="get" class="searchbar"
autocomplete="off" role="search">
<svg role="icon" class="svg-icon iconSearch" width="18" height="18"
viewBox="0 0 18 18">
<path d="M12.864 11.321L18 16.5 16.5 18l-5.178-5.136v-.357a7 7 0 1 1 1.186-1.186h.356zM7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10z">
</path>
<form id="search" method="get" class="searchbar" autocomplete="off" role="search">
<svg role="icon" class="svg-icon iconSearch" width="18" height="18" viewBox="0 0 18 18">
<path d="M12.864 11.321L18 16.5 16.5 18l-5.178-5.136v-.357a7 7 0 1 1 1.186-1.186h.356zM7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10z"></path>
</svg>
<input name="q" type="text" placeholder="Search..." value
tabindex="1" autocomplete="off" maxlength="240"
class="f-input js-search-field">
<button type="submit" class="btn js-search-submit">
<input id="search-value" type="text" placeholder="Search..." value tabindex="1" autocomplete="off" maxlength="240"
class="f-input js-search-field"></input>
<button type="submit" id="submit-search" class="btn js-search-submit">
<svg role="icon" class="svg-icon iconSearch" width="18"
height="18" viewBox="0 0 18 18">
<path d="M12.864 11.321L18 16.5 16.5 18l-5.178-5.136v-.357a7 7 0 1 1 1.186-1.186h.356zM7 12A5 5 0 1 0 7 2a5 5 0 0 0 0 10z">
Expand Down
2 changes: 1 addition & 1 deletion webpack-stats.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"status":"done","error":"ModuleBuildError","message":"Module build failed: SyntaxError: Unexpected token (51:8)\n\n 49 | export function marketSummary(market) {\n 50 | let url = BASE_SITE_URL + 'market/' + market['FMID'];\n> 51 | let return http.get(url, 'html');\n | ^\n 52 | }\n 53 | \n","chunks":{"main":[{"name":"main.js","path":"/home/nathan/code/mylocalmarket/assets/bundles/main.js"}]}}
{"status":"done","chunks":{"main":[{"name":"main.js","path":"/home/nathan/code/mylocalmarket/assets/bundles/main.js"}]}}

0 comments on commit 8bacaad

Please sign in to comment.