archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Search: replace spinning loader with page-bar loader

Browse Source
This commit is contained in:
Pablo Vazquez 2018-09-10 11:10:25 +02:00
parent e818c92d4e
commit 00ba98d279
2 changed files with 154 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

294
src/styles/_search.sass
View File

@ -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

34
src/templates/nodes/search.pug
View File

@ -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');