search gutting and filters overlay
This commit is contained in:
Davor Spasovski
Matt Claypotch
Родитель
6f8a6dcbf9
Коммит
1d9cd00b2e
|
|
@ -0,0 +1,77 @@
|
|||
@import 'lib';
|
||||
|
||||
@media (max-width: @4col) {
|
||||
#filters {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @bg;
|
||||
.grain();
|
||||
top: 0;
|
||||
display: none;
|
||||
> div {
|
||||
padding: 0 15px;
|
||||
> h2 {
|
||||
font-size: 16px;
|
||||
margin: 35px 0 10px;
|
||||
}
|
||||
}
|
||||
.classic-header {
|
||||
padding: 0 10px;
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
float: left;
|
||||
width: 175px;
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
.back-button {
|
||||
float: left;
|
||||
line-height: 30px;
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.toggles {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
.border-box();
|
||||
font-size: 14px;
|
||||
.border-radius(5px);
|
||||
li {
|
||||
float: left;
|
||||
width: 33%;
|
||||
.box-shadow(0 1px 0 0 #f2f4f5);
|
||||
height: 35px;
|
||||
a {
|
||||
line-height: 33px;
|
||||
border: 1px solid #cdcbcb;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.gradient-two-color(#f7f7f7, @faint-gray);
|
||||
font-weight: 600;
|
||||
color: @text;
|
||||
.ellipsis();
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&.sel, &:active {
|
||||
background: rgba(68,82,91,.08);
|
||||
border-top: 1px solid #a5b0b6;
|
||||
}
|
||||
}
|
||||
&:first-child, &:first-child a, &:nth-child(3n+1), &:nth-child(3n+1) a {
|
||||
.border-radius(5px 0 0 5px);
|
||||
}
|
||||
&:last-child, &:last-child a, &:nth-child(3n), &:nth-child(3n) a {
|
||||
.border-radius(0 5px 5px 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -61,6 +61,14 @@
|
|||
position: relative;
|
||||
}
|
||||
.home-button, .filter-button {
|
||||
display: none;
|
||||
}
|
||||
nav {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
#site-header, #filters {
|
||||
.home-button, .filter-button, .back-button {
|
||||
float: left;
|
||||
width: 42px;
|
||||
height: 30px;
|
||||
|
|
@ -69,138 +77,9 @@
|
|||
margin: 10px 15px 0 5px;
|
||||
.box-shadow(0 1px 0 1px rgba(0,0,0,0.5));
|
||||
}
|
||||
.menu-button {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
float: right;
|
||||
height: 30px;
|
||||
margin: 25px 0 0 44px;
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
// CSS Menu icon.
|
||||
b, b:before, b:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-indent: -9999px;
|
||||
.border-radius(2px);
|
||||
.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(#21292f, #2a353c);
|
||||
display: block;
|
||||
content: '';
|
||||
background: rgba(0,0,0,.5);
|
||||
margin-bottom: 3px;
|
||||
width: 28px;
|
||||
height: 7px;
|
||||
}
|
||||
b:before {
|
||||
top: 10px;
|
||||
}
|
||||
b:after {
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
.home-button, .filter-button {
|
||||
display: none;
|
||||
}
|
||||
.filter-button {
|
||||
float: right;
|
||||
}
|
||||
nav {
|
||||
position: relative;
|
||||
}
|
||||
#flyout {
|
||||
.border-radius(5px);
|
||||
.box-shadow(0 1px 4px fadeOut(@black, 50%));
|
||||
background: @white;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
top: 32px;
|
||||
right: -15px;
|
||||
.min-width(3);
|
||||
z-index: 9001;
|
||||
&.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
top: 70px;
|
||||
}
|
||||
li {
|
||||
+ li {
|
||||
border-top: 1px solid @light-gray;
|
||||
}
|
||||
&:first-child a {
|
||||
&:hover:before,
|
||||
&:active:before {
|
||||
background: @btn-b;
|
||||
}
|
||||
.border-radius(5px 5px 0 0);
|
||||
&:before {
|
||||
.box-shadow(1px 1px 0 rgba(255,255,255,.1) inset,
|
||||
-1px -1px 0 fadeOut(@black, 75%));
|
||||
.transform(~'rotate(45deg)');
|
||||
background: @white;
|
||||
content: "";
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: 22px;
|
||||
z-index: 0;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
&:last-child a {
|
||||
.border-radius(0 0 5px 5px);
|
||||
}
|
||||
&:hover, &:hover + li {
|
||||
border-top-color: @dark-gray;
|
||||
}
|
||||
}
|
||||
a, a:after {
|
||||
height: 35px;
|
||||
}
|
||||
a {
|
||||
color: @link;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
line-height: 35px;
|
||||
padding: 0 35px 0 15px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
&:after {
|
||||
.arrow;
|
||||
background-position: 100% 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
opacity: .7;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 15px;
|
||||
width: 18px;
|
||||
}
|
||||
&:hover, &:active {
|
||||
.gradient-two-color(@btn-b, @btn-b-dark);
|
||||
color: @white;
|
||||
text-decoration: none;
|
||||
&:after {
|
||||
right: 10px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
a:active,
|
||||
li:first-child a:active:before {
|
||||
.box-shadow(inset 0 2px 0 0 rgba(0,0,0,.2),
|
||||
inset 0 12px 24px 6px rgba(0,0,0,.2),
|
||||
inset 0 0 2px 2px rgba(0,0,0,.2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-overlay.show {
|
||||
|
|
@ -336,6 +215,15 @@
|
|||
.region {
|
||||
display: none;
|
||||
}
|
||||
.classic-header {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 18px;
|
||||
color: @white;
|
||||
.border-box;
|
||||
background: @grain-src @navy-gray;
|
||||
text-align: center;
|
||||
}
|
||||
#site-header {
|
||||
height: 50px;
|
||||
.logo {
|
||||
|
|
@ -345,9 +233,6 @@
|
|||
width: 50px;
|
||||
}
|
||||
}
|
||||
.menu-button {
|
||||
display: none;
|
||||
}
|
||||
.filter-button {
|
||||
display: block;
|
||||
margin: 10px 5px 0 7px;
|
||||
|
|
@ -364,70 +249,10 @@
|
|||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 18px;
|
||||
background: url(../../img/mkt/glyphs/rocket_btn.png) no-repeat 0 0;
|
||||
background: url(../../img/mkt/glyphs/rocket_btn.png) no-repeat;
|
||||
margin: 6px 0 0 15px;
|
||||
}
|
||||
}
|
||||
#flyout,
|
||||
#flyout a,
|
||||
#flyout li:first-child a:before {
|
||||
background: @dark-gray;
|
||||
}
|
||||
#flyout,
|
||||
#flyout li:first-child a,
|
||||
#flyout li:last-child a {
|
||||
.border-radius(0);
|
||||
}
|
||||
#flyout {
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
&.active {
|
||||
// Let the nav be dismissed when you click anywhere below the links.
|
||||
pointer-events: none;
|
||||
top: 55px;
|
||||
}
|
||||
li {
|
||||
&:hover + li,
|
||||
+ li {
|
||||
border-top: 1px solid lighten(@dark-gray, 4%);
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: 1px solid lighten(@dark-gray, 4%);
|
||||
}
|
||||
&:first-child a:before {
|
||||
.box-shadow(1px 1px 0 rgba(51,51,51,.1) inset,
|
||||
-1px -1px 0 fadeOut(@black, 75%));
|
||||
top: -5px;
|
||||
right: 18px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
.dark-text-shadow;
|
||||
border-bottom: 1px solid darken(#222, 2%);
|
||||
color: @faint-gray;
|
||||
font-size: 21px;
|
||||
line-height: 140%;
|
||||
padding: 15px;
|
||||
pointer-events: auto;
|
||||
&:hover {
|
||||
color: @white;
|
||||
}
|
||||
&:after {
|
||||
background: @arrow-big-src 100% 100%;
|
||||
height: 19px;
|
||||
top: 22px;
|
||||
}
|
||||
&:hover, &:active {
|
||||
background: @btn-b;
|
||||
&:after {
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-overlay.show {
|
||||
background: rgba(0,0,0,.2);
|
||||
|
|
|
|||
|
|
@ -329,7 +329,7 @@
|
|||
@subtext: #74828d;
|
||||
|
||||
@media (max-width: @4col) {
|
||||
h1, #breadcrumbs, #sorter, #search-facets {
|
||||
#breadcrumbs {
|
||||
display: none;
|
||||
}
|
||||
#search-results, #search-facets {
|
||||
|
|
@ -346,9 +346,6 @@
|
|||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
h3 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -20,15 +20,12 @@
|
|||
$this.closest('ul').removeClass('active');
|
||||
$this.addClass('active');
|
||||
}
|
||||
}).on('click', '#search-listing .items', function(e) {
|
||||
// Let's treat each li as a click area for its data-href.
|
||||
var $target = $(e.target),
|
||||
url = $target.closest('.item').data().href;
|
||||
|
||||
if (!$target.hasClass('button')) {
|
||||
window.location.href = url;
|
||||
}
|
||||
});
|
||||
}).on('click', '#filters .back-button', _pd(function(e) {
|
||||
$('#filters').hide();
|
||||
}));
|
||||
$('nav .filter-button').click(_pd(function(e) {
|
||||
$('#filters').show();
|
||||
}));
|
||||
function turnPages(e) {
|
||||
if (fieldFocused(e)) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -102,6 +102,7 @@ CSS = {
|
|||
'css/impala/lightbox.less',
|
||||
'css/mkt/lightbox.less',
|
||||
'css/mkt/browse.less',
|
||||
'css/mkt/filters.less',
|
||||
),
|
||||
'mkt/ecosystem': (
|
||||
'css/ecosystem/landing.less',
|
||||
|
|
|
|||
|
|
@ -3,102 +3,61 @@
|
|||
{% set query_term = query.q %}
|
||||
{% set search_url = request.get_full_path() %}
|
||||
|
||||
{% if query_term %}
|
||||
{# L10n: {0} is a search term, such as Firebug. #}
|
||||
{% set title = _('{0} | Search')|f(query_term) %}
|
||||
{# L10n: {0} is a search term, such as Firebug. #}
|
||||
{% set heading = _('Search Results for "{0}"')|f(query_term) %}
|
||||
{% set crumbs = [(url('search.search'), _('Search')),
|
||||
(None, query_term)] %}
|
||||
{% elif category %}
|
||||
{% set search_url = url('search.search')|urlparams(cat=category.id) %}
|
||||
{% set title = category.name %}
|
||||
{% set heading = title %}
|
||||
{% elif browse %}
|
||||
{# Yeah, you're right this is ridiculous. #}
|
||||
{% if sort == 'downloads' %}
|
||||
{% if price == 'free' %}
|
||||
{% set title = _('Top Free') %}
|
||||
{% elif price == 'paid' %}
|
||||
{% set title = _('Top Paid') %}
|
||||
{% else %}
|
||||
{% set title = _('By Popularity') %}
|
||||
{% endif %}
|
||||
{% elif sort == 'rating' %}
|
||||
{% set title = _('By Rating') %}
|
||||
{% elif sort == 'price' %}
|
||||
{% set title = _('By Price') %}
|
||||
{% elif sort == 'created' %}
|
||||
{% set title = _('Newest Apps') %}
|
||||
{% endif %}
|
||||
{% if title %}
|
||||
{% set heading = title %}
|
||||
{% set title = '%s | %s' % (title, _('Apps')) %}
|
||||
{% set crumbs = [(url('browse.apps'), _('Apps')),
|
||||
(None, heading)] %}
|
||||
{% else %}
|
||||
{% set title = 'Apps' %}
|
||||
{% set heading = title %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% set title = _('Search') %}
|
||||
{% set heading = title %}
|
||||
{% endif %}
|
||||
|
||||
{% if not crumbs %}
|
||||
{% set crumbs = [(None, title)] %}
|
||||
{% endif %}
|
||||
|
||||
{% block title %}{{ mkt_page_title(title) }}{% endblock %}
|
||||
{% block title %}{{ mkt_page_title(_('Search Results')) }}{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
<meta name="WT.oss" content="{{ query_term }}">
|
||||
<meta name="WT.oss_r" content="{{ pager.paginator.count }}">
|
||||
{% endblock %}
|
||||
|
||||
{% macro facet(title, id, links, active=False) %}
|
||||
<li id="{{ id }}" class="facet{{ ' active' if active }}">
|
||||
<h3>{{ title }}</h3>
|
||||
{{ facet_links(links) }}
|
||||
</li>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro facet_links(links) %}
|
||||
<ul class="facet-group">
|
||||
{% for link in links recursive %}
|
||||
<li{% if link.selected %} class="selected"{% endif %}>
|
||||
<a href="{{ search_url|urlparams(page=None, **link.urlparams) }}"
|
||||
data-params="{{ dict(page=None, **link.urlparams)|json }}">
|
||||
{{ link.text }}</a>
|
||||
{% if link.children %}
|
||||
<ul>{{ loop(link.children) }}</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro num_results() %}
|
||||
{% set cnt = pager.paginator.count %}
|
||||
<p class="cnt">
|
||||
{{ ngettext('<b>{0}</b> matching result',
|
||||
'<b>{0}</b> matching results',
|
||||
cnt)|f(cnt|numberfmt)|safe }}
|
||||
</p>
|
||||
{% endmacro %}
|
||||
{# if applied_filters might be useful later #}
|
||||
|
||||
{% block content %}
|
||||
{{ mkt_breadcrumbs(product, crumbs) }}
|
||||
<section id="search-facets" class="col">
|
||||
<h2>{{ _('Filter Results') }}</h2>
|
||||
<ul class="facets island pjax-trigger">
|
||||
{{ facet(_('Category'), 'category-facets', categories, active=active.categories) }}
|
||||
{{ facet(_('Price'), 'price-facets', prices, active=active.prices) }}
|
||||
{% if not request.MOBILE %}
|
||||
{{ facet(_('Optimized for'), 'device-facets', devices, active=active.devices) }}
|
||||
{% endif %}
|
||||
</ul>
|
||||
{{ num_results() }}
|
||||
<section id="filters">
|
||||
<header class="classic-header">
|
||||
<a href="#" class="back-button"><</a>
|
||||
<h1>{{ _('Filter') }}</h1>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
{% if prices %}
|
||||
<h2>{{ _('Filter by price') }}</h2>
|
||||
<ul class="toggles c">
|
||||
{% 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 %}
|
||||
|
||||
{% if categories %}
|
||||
<h2>{{ _('Filter by category') }}</h2>
|
||||
<ul class="toggles c">
|
||||
{% 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 %}
|
||||
|
||||
{# TODO: This needs to be implemented. #}
|
||||
<h2>{{ _('Sort by') }}</h2>
|
||||
<ul class="toggles c">
|
||||
<li><a href="#">Relevancy</a></li>
|
||||
<li><a href="#" class="sel">Rating</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section id="search-results" class="full c">
|
||||
{% with search_url=search_url %}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,3 @@
|
|||
{{ impala_addon_listing_header(search_url|urlparams(page=None),
|
||||
sort_opts, query.sort or None, extra_sort_opts) }}
|
||||
{% if applied_filters %}
|
||||
<section class="applied-filters">
|
||||
<h2>{{ _('Applied Filters:') }}</h2>
|
||||
<ol>
|
||||
{% for f in applied_filters %}
|
||||
<li><a href="{{ search_url|urlparams(**f.null_urlparams) }}">
|
||||
{{ f.text }}</a></li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% if pager.object_list %}
|
||||
<ol class="listing" start="{{ pager.start_index() }}">
|
||||
{{ search_results(pager.object_list, field=query.sort, src='mkt-search') }}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,9 @@
|
|||
{% set urls = [
|
||||
(_('Home'), url('home')),
|
||||
(_('Popular'), url('browse.apps')|urlparams(sort='downloads')),
|
||||
(_('Top Free'), url('browse.apps')|urlparams(sort='downloads', price='free')),
|
||||
(_('Top Paid'), url('browse.apps')|urlparams(sort='downloads', price='paid')),
|
||||
(_('Categories'), url('browse.apps')|urlparams('categories')),
|
||||
] %}
|
||||
<header id="site-header" class="c">
|
||||
<section>
|
||||
<h1 class="logo"><a href="{{ url('home') }}">{{ _('Mozilla Marketplace') }}</a></h1>
|
||||
{% if settings.REGION_STORES %}
|
||||
<h1 class="region{% if request.REGION != mkt.regions.WORLDWIDE %} flag {{ request.REGION.slug }}{% endif %}">
|
||||
{{ request.REGION.name }}</h1>
|
||||
{% endif %}
|
||||
{% if request.can_view_consumer %}
|
||||
<nav role="navigation">
|
||||
<a href="#" class="home-button"><b></b></a>
|
||||
<a href="#" class="menu-button"><b></b></a>
|
||||
<a href="#" class="filter-button">{{ _('Filter') }}</a>
|
||||
{% block search %}
|
||||
{% set data = {'cat': category.id} if category else request.GET %}
|
||||
|
|
@ -33,11 +21,6 @@
|
|||
<button id="search-go">{{ _('Search') }}</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
<ul id="flyout">
|
||||
{% for text, link in urls %}
|
||||
<li><a href="{{ link }}">{{ text }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче