multiple search filters (bug 783443)
This commit is contained in:
Davor Spasovski
Родитель
395a5814dd
Коммит
6d433f37fa
|
|
@ -9,7 +9,7 @@
|
|||
.grain();
|
||||
top: 0;
|
||||
display: none;
|
||||
> div {
|
||||
form > div {
|
||||
padding: 0 15px;
|
||||
margin-top: 84px;
|
||||
> h2 {
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
}
|
||||
}
|
||||
.classic-header {
|
||||
.home {
|
||||
position: absolute;
|
||||
.apply, .back {
|
||||
display: block;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
|
|
|
|||
|
|
@ -1,91 +1,39 @@
|
|||
@import 'lib';
|
||||
|
||||
.no-results {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
opacity: .5;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
#search {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
max-width: 200px;
|
||||
top: 10px;
|
||||
margin-left: 15px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.vitals {
|
||||
font-size: 11px;
|
||||
span {
|
||||
display: inline-block;
|
||||
+ .vital, + .rating {
|
||||
&:before {
|
||||
color: @note-gray;
|
||||
content: "\00B7";
|
||||
}
|
||||
}
|
||||
}
|
||||
.downloads,
|
||||
.price {
|
||||
color: @green;
|
||||
}
|
||||
.price {
|
||||
background: fadeOut(@green, 40%);
|
||||
color: fadeOut(@white, 5%);
|
||||
height: 16px;
|
||||
font-weight: bold;
|
||||
margin: 0 2px 0 8px;
|
||||
padding: 0 4px 0 3px;
|
||||
position: relative;
|
||||
&:after {
|
||||
border: 8px solid transparent;
|
||||
border-right-color: fadeOut(@green, 40%);
|
||||
content: "\00b0"; /* degree sign */
|
||||
color: fadeOut(@white, 60%);
|
||||
font-size: 8px;
|
||||
line-height: 3px;
|
||||
margin: 0 4px 0 -16px;
|
||||
position: absolute;
|
||||
text-indent: 5px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
#search-q {
|
||||
.border-radius(5px);
|
||||
.box-shadow(0 1px 0 fadeOut(#fff, 80%),
|
||||
0 1px 0 rgba(0,0,0,.5) inset,
|
||||
0 1px 1px rgba(0,0,0,.5) inset);
|
||||
.gradient-two-color-with-image(#21292f, #2a353c, url(../../img/mkt/icons/magnifier.png), ~'8px 8px', no-repeat);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border: 0;
|
||||
color: lighten(#99abb9, 2%);
|
||||
display: block;
|
||||
font: 17px/30px @open-stack;
|
||||
height: 30px;
|
||||
outline: none;
|
||||
padding: 0 5px 0 30px;
|
||||
z-index: 2;
|
||||
width: 185px;
|
||||
&:focus {
|
||||
.box-shadow(0 1px 1px rgba(0, 0, 0, 0.06) inset,
|
||||
0 0 8px rgba(80, 160, 220, 0.6));
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
#search-results {
|
||||
.width(10);
|
||||
}
|
||||
|
||||
.selected > a {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
@media (max-width: @7col) {
|
||||
#search-results {
|
||||
float: none;
|
||||
.width(7);
|
||||
}
|
||||
}
|
||||
|
||||
// Move this to lib.less if it's needed elsewhere.
|
||||
@subtext: #74828d;
|
||||
|
||||
@media (max-width: @4col) {
|
||||
#breadcrumbs {
|
||||
display: none;
|
||||
}
|
||||
#search-results {
|
||||
.width(4);
|
||||
}
|
||||
#page {
|
||||
#search-results {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#page #search-facets {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @3col) {
|
||||
#search-results, #search-facets {
|
||||
.width(3);
|
||||
}
|
||||
.html-rtl #site-header #search-q {
|
||||
background-position: 0 50%;
|
||||
padding: 5px 15px 5px 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,5 @@
|
|||
@import 'lib';
|
||||
|
||||
#search {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
max-width: 200px;
|
||||
top: 10px;
|
||||
margin-left: 15px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#search-q {
|
||||
.border-radius(5px);
|
||||
.box-shadow(0 1px 0 fadeOut(#fff, 80%),
|
||||
0 1px 0 rgba(0,0,0,.5) inset,
|
||||
0 1px 1px rgba(0,0,0,.5) inset);
|
||||
.gradient-two-color-with-image(#21292f, #2a353c, url(../../img/mkt/icons/magnifier.png), ~'8px 8px', no-repeat);
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
border: 0;
|
||||
color: lighten(#99abb9, 2%);
|
||||
display: block;
|
||||
font: 17px/30px @open-stack;
|
||||
height: 30px;
|
||||
outline: none;
|
||||
padding: 0 5px 0 30px;
|
||||
z-index: 2;
|
||||
width: 185px;
|
||||
&:focus {
|
||||
.box-shadow(0 1px 1px rgba(0, 0, 0, 0.06) inset,
|
||||
0 0 8px rgba(80, 160, 220, 0.6));
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
.html-rtl #site-header #search-q {
|
||||
background-position: 0 50%;
|
||||
padding: 5px 15px 5px 50px;
|
||||
}
|
||||
|
||||
#site-search-suggestions {
|
||||
.transition-property(~'bottom, opacity, visibility');
|
||||
.transition-duration(.3s);
|
||||
|
|
|
|||
|
|
@ -9,19 +9,38 @@
|
|||
$this.attr('placeholder', $this.data('placeholder'));
|
||||
});
|
||||
|
||||
z.page.on('click', '#search-facets li.facet', function(e) {
|
||||
var $this = $(this);
|
||||
if ($this.hasClass('active')) {
|
||||
if ($(e.target).is('a')) {
|
||||
return;
|
||||
}
|
||||
$this.removeClass('active');
|
||||
} else {
|
||||
$this.closest('ul').removeClass('active');
|
||||
$this.addClass('active');
|
||||
}
|
||||
// Add 'sel' class to active filter and set hidden input value.
|
||||
z.page.on('click', '#filters .toggles a', function() {
|
||||
selectMe($(this));
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
function selectMe($elm) {
|
||||
var $myUL = $elm.closest('.toggles'),
|
||||
val = '',
|
||||
vars = z.getVars($elm[0].search);
|
||||
|
||||
$myUL.find('a').removeClass('sel');
|
||||
|
||||
// This isn't ideal as it relies on specific GET param names.
|
||||
// This will break if we rename &sort= to &snort= etc.
|
||||
if ($myUL[0].id == 'filter-prices') {
|
||||
val = vars.price || '';
|
||||
} else if ($myUL[0].id == 'filter-categories') {
|
||||
val = vars.cat || '';
|
||||
} else if ($myUL[0].id == 'filter-sort') {
|
||||
val = vars.sort || '';
|
||||
}
|
||||
$myUL.find('input[type=hidden]').val(val);
|
||||
$elm.addClass('sel');
|
||||
}
|
||||
|
||||
// Apply filters button.
|
||||
$('#filters .header-button.apply').click(_pd(function() {
|
||||
$('#filters form').submit();
|
||||
}));
|
||||
|
||||
var expandListings = false;
|
||||
var $expandToggle = $('#site-header .expand');
|
||||
|
||||
|
|
|
|||
|
|
@ -20,48 +20,55 @@
|
|||
{{ mkt_breadcrumbs(product, crumbs) }}
|
||||
<section id="filters">
|
||||
<header class="classic-header">
|
||||
<a href="#" class="header-button icon home left dismiss"><b></b></a>
|
||||
<a href="#" class="header-button icon back left dismiss"><b></b></a>
|
||||
<a href="#" class="header-button apply right">{{ _('Apply') }}</a>
|
||||
<h1>{{ _('Filter') }}</h1>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
{% if prices %}
|
||||
<h2>{{ _('Filter by price') }}</h2>
|
||||
<ul class="toggles c" id="filter-prices">
|
||||
{% for price in prices %}
|
||||
<li>
|
||||
<a{% if price.selected %} class="sel"{% endif %}
|
||||
href="{{ search_url|urlparams(page=None,
|
||||
**price.urlparams) }}">
|
||||
{{ price.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
<form action="{{ url('search.search') }}" method="get">
|
||||
<div>
|
||||
{% if prices %}
|
||||
<h2>{{ _('Filter by price') }}</h2>
|
||||
<ul class="toggles c" id="filter-prices">
|
||||
{% for price in prices %}
|
||||
<li>
|
||||
<a{% if price.selected %} class="sel"{% endif %}
|
||||
href="{{ search_url|urlparams(page=None,
|
||||
**price.urlparams) }}">
|
||||
{{ price.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<input type="hidden" name="price" value="">
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{% if categories %}
|
||||
<h2>{{ _('Filter by category') }}</h2>
|
||||
<ul class="toggles c" id="filter-categories">
|
||||
{% for category in categories %}
|
||||
<li>
|
||||
<a {% if category.selected %} class="sel"{% endif %}
|
||||
href="{{ search_url|urlparams(page=None,
|
||||
**category.urlparams) }}">
|
||||
{{ category.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% if categories %}
|
||||
<h2>{{ _('Filter by category') }}</h2>
|
||||
<ul class="toggles c" id="filter-categories">
|
||||
{% for category in categories %}
|
||||
<li>
|
||||
<a {% if category.selected %} class="sel"{% endif %}
|
||||
href="{{ search_url|urlparams(page=None,
|
||||
**category.urlparams) }}">
|
||||
{{ category.text }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<input type="hidden" name="cat" value="">
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{# TODO: This needs to be implemented. #}
|
||||
<h2>{{ _('Sort by') }}</h2>
|
||||
<ul class="toggles c" id="filter-sort">
|
||||
<li><a href="#">Relevancy</a></li>
|
||||
<li><a href="#" class="sel">Rating</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{# We're not iterating over all the sort options on purpose. #}
|
||||
<h2>{{ _('Sort by') }}</h2>
|
||||
<ul class="toggles c" id="filter-sort">
|
||||
<li><a href="#">{{ _('Relevancy') }}</a></li>
|
||||
<li><a href="/search/?sort=rating" class="sel">
|
||||
{{ _('Rating') }}</a></li>
|
||||
<input type="hidden" name="sort" value="">
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section id="search-results" class="full c">
|
||||
{% with search_url=search_url %}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче