From 00ba98d2799bbf555c2a54ab83c00a38bf02f8d2 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 10 Sep 2018 11:10:25 +0200 Subject: [PATCH] Search: replace spinning loader with page-bar loader --- src/styles/_search.sass | 294 ++++++++++++++++----------------- src/templates/nodes/search.pug | 34 +--- 2 files changed, 154 insertions(+), 174 deletions(-) diff --git a/src/styles/_search.sass b/src/styles/_search.sass index 28431e93..5082f20b 100644 --- a/src/styles/_search.sass +++ b/src/styles/_search.sass @@ -101,155 +101,6 @@ $search-hit-width_grid: 100px padding-left: 0 padding-right: 0 - #search-sidebar - width: 20% - background-color: $color-background-light - - +media-lg - border-top-left-radius: 3px - - input.search-field - background-color: $color-background-nav-dark - font-size: 1.1em - color: white - margin-bottom: 10px - border: none - border-bottom: 2px solid rgba($color-primary, .2) - border-radius: 0 - width: 100% - padding: 5px 15px - height: 50px - transition: border 100ms ease-in-out - - &::placeholder - color: $color-text-dark-secondary - &:placeholder-shown - border-bottom-color: $color-primary - - &:focus - outline: none - border: none - border-bottom: 2px solid lighten($color-primary, 5%) - - .search-list-filters - padding: - left: 10px - right: 10px - - .panel.panel-default - margin-bottom: 10px - border-radius: 3px - border: none - background-color: white - box-shadow: 1px 1px 0 rgba(black, .1) - - a - text-decoration: none - - .toggleRefine - display: block - padding-left: 7px - color: $color-text-dark - text-transform: capitalize - - &:hover - text-decoration: none - color: $color-primary - - &.refined - color: $color-primary - - &:hover - color: $color-danger - - span - &:before - /* x icon */ - content: '\e84b' - font-family: 'pillar-font' - span - &:before - /* circle with dot */ - content: '\e82f' - font-family: 'pillar-font' - position: relative - left: -7px - font-size: .9em - - span - &:before - /* empty circle */ - content: '\e82c' - font-family: 'pillar-font' - position: relative - left: -7px - font-size: .9em - .facet_count - color: $color-text-dark-secondary - - - .panel-title, .panel-heading - color: $color-text-dark-secondary - font: - size: 1em - weight: 500 - - .panel-body - padding-top: 0 - - .panel-title - position: relative - &:after - content: '\e83b' - font-family: 'pillar-font' - position: absolute - right: 0 - color: $color-text-dark-primary - - .collapsed - .panel-title:after - content: '\e838' - - - .search-list-stats - color: $color-text-dark-hint - padding: 10px 15px 0 15px - text-align: center - font-size: .9em - +clearfix - - #pagination - ul.search-pagination - text-align: center - list-style-type: none - margin: 0 - padding: 0 - width: 100% - display: flex - +clearfix - - li - display: inline-block - margin: 5px auto - - &:last-child - border-color: transparent - - a - font-weight: 500 - padding: 5px 4px - color: $color-text-dark-secondary - - &:hover - color: $color-text-dark-primary - - &.disabled - opacity: .6 - - &.active a - color: $color-text-dark-primary - font-weight: bold - #search-list width: 40% height: 100% @@ -473,6 +324,151 @@ $search-hit-width_grid: 100px button width: 100% +#search-sidebar + width: 20% + background-color: $color-background-light + + +media-lg + border-top-left-radius: 3px + + input.search-field + margin-bottom: 10px + border: none + border-bottom: 2px solid rgba($color-primary, .2) + border-radius: 0 + width: 100% + transition: border 100ms ease-in-out + + &::placeholder + color: $color-text-dark-secondary + &:placeholder-shown + border-bottom-color: $color-primary + + &:focus + outline: none + border: none + border-bottom: 2px solid lighten($color-primary, 5%) + + .search-list-filters + padding: + left: 10px + right: 10px + + .panel.panel-default + margin-bottom: 10px + border-radius: 3px + border: none + background-color: white + box-shadow: 1px 1px 0 rgba(black, .1) + + a + text-decoration: none + + .toggleRefine + display: block + padding-left: 7px + color: $color-text-dark + text-transform: capitalize + + &:hover + text-decoration: none + color: $color-primary + + &.refined + color: $color-primary + + &:hover + color: $color-danger + + span + &:before + /* x icon */ + content: '\e84b' + font-family: 'pillar-font' + span + &:before + /* circle with dot */ + content: '\e82f' + font-family: 'pillar-font' + position: relative + left: -7px + font-size: .9em + + span + &:before + /* empty circle */ + content: '\e82c' + font-family: 'pillar-font' + position: relative + left: -7px + font-size: .9em + .facet_count + color: $color-text-dark-secondary + + + .panel-title, .panel-heading + color: $color-text-dark-secondary + font: + size: 1em + weight: 500 + + .panel-body + padding-top: 0 + + .panel-title + position: relative + &:after + content: '\e83b' + font-family: 'pillar-font' + position: absolute + right: 0 + color: $color-text-dark-primary + + .collapsed + .panel-title:after + content: '\e838' + + + .search-list-stats + color: $color-text-dark-hint + padding: 10px 15px 0 15px + text-align: center + font-size: .9em + +clearfix + + #pagination + ul.search-pagination + text-align: center + list-style-type: none + margin: 0 + padding: 0 + width: 100% + display: flex + +clearfix + + li + display: inline-block + margin: 5px auto + + &:last-child + border-color: transparent + + a + font-weight: 500 + padding: 5px 4px + color: $color-text-dark-secondary + + &:hover + color: $color-text-dark-primary + + &.disabled + opacity: .6 + + &.active a + color: $color-text-dark-primary + font-weight: bold + + .search-hit float: left box-shadow: none diff --git a/src/templates/nodes/search.pug b/src/templates/nodes/search.pug index bb177f09..11a6f4e4 100644 --- a/src/templates/nodes/search.pug +++ b/src/templates/nodes/search.pug @@ -31,35 +31,25 @@ script. #search-container | {% if project %} - #project_sidebar - ul.project-tabs - li.tabs-thumbnail( - title="About", - data-toggle="tooltip", - data-placement="left", - class="{% if title == 'about' %}active {% endif %}{% if project.picture_square %}image{% endif %}") - a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}") - | {% if project.picture_square %} - img(src="{{ project.picture_square.thumbnail('b', api=api) }}") - | {% else %} - i.pi-home - | {% endif %} + #project_sidebar.bg-white + ul.project-tabs.p-0 li.tabs-browse( title="Browse", data-toggle="tooltip", - data-placement="left") + data-placement="right") a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}") i.pi-folder + li.tabs-search.active( title="Search", data-toggle="tooltip", - data-placement="left") + data-placement="right") a(href="{{url_for('projects.search', project_url=project.url, _external=True)}}") i.pi-search | {% endif %} #search-sidebar - input.search-field( + input.search-field.p-2.bg-white( type="text", name="q", id="q", @@ -121,9 +111,6 @@ script(type="text/template", id="facet-template") // Hit template script(type="text/template", id="hit-template") .search-hit(data-hit-id='{{ objectID }}') - #search-loading.search-loading - .spinner - span.spin ยท .search-hit-thumbnail | {{#picture}} img(src="{{{ picture }}}") @@ -184,22 +171,19 @@ script. $('#search-hit-container').html(dataHtml); }) .done(function(){ - $('.search-loading').removeClass('active'); + $('.loader-bar').removeClass('active'); $('#search-error').hide(); $('#search-hit-container').show(); }) .fail(function(data){ - $('.search-loading').removeClass('active'); + $('.loader-bar').removeClass('active'); $('#search-hit-container').hide(); $('#search-error').show().html('Houston!\n\n' + data.status + ' ' + data.statusText); }); } $('body').on('click', '.search-hit', function(){ - if ($('.search-loading').hasClass('active')){ - $(this).removeClass('active'); - } - $(this).find('#search-loading').addClass('active'); + $('.loader-bar').removeClass('active').addClass('active'); displayNode($(this).data('hit-id')); $('.search-hit').removeClass('active');