Search: styling

This commit is contained in:
Pablo Vazquez 2018-09-17 19:04:42 +02:00
parent 008d9b8880
commit fe86f76617
3 changed files with 58 additions and 73 deletions

View File

@ -58,9 +58,10 @@ body.project
z-index: $z-index-base + 5 z-index: $z-index-base + 5
#project_sidebar #project_sidebar
box-shadow: inset -1px 0 0 0 $color-background
flex-shrink: 0
width: $project-sidebar-width width: $project-sidebar-width
z-index: $z-index-base + 6 z-index: $z-index-base + 6
box-shadow: inset -1px 0 0 0 $color-background
+media-xs +media-xs
width: 100% width: 100%

View File

@ -93,6 +93,17 @@ $search-hit-width_grid: 100px
background-color: lighten($color-background, 5%) background-color: lighten($color-background, 5%)
.search-list .search-list
width: 50%
.embed-responsive
width: 100px
min-width: 100px
.card-deck.card-deck-vertical
.card
flex-wrap: initial
.search-settings
width: 30% width: 30%
.card-deck.card-deck-vertical .card-deck.card-deck-vertical
@ -119,8 +130,14 @@ $search-hit-width_grid: 100px
.search-details .search-details
width: 70% width: 70%
.container-fluid .col-md-8
flex: 1
max-width: 100%
width: 100%
#search-details #search-details
position: relative position: relative
#search-hit-container #search-hit-container
position: absolute // for scrollbars position: absolute // for scrollbars
overflow-y: auto overflow-y: auto
@ -289,25 +306,11 @@ $search-hit-width_grid: 100px
button button
width: 100% width: 100%
#project_sidebar+#search-sidebar,
#project_sidebar+#search-sidebar+#search-container
padding-left: $sidebar-width
.search-project .search-project
li.project li.project
display: none display: none
#search-sidebar #search-sidebar
.card
margin-bottom: 10px
border-radius: 3px
border: none
background-color: white
box-shadow: 1px 1px 0 rgba(black, .1)
a
text-decoration: none
.toggleRefine .toggleRefine
display: block display: block
padding-left: 7px padding-left: 7px
@ -346,22 +349,6 @@ $search-hit-width_grid: 100px
position: relative position: relative
left: -7px left: -7px
font-size: .9em font-size: .9em
.facet_count
color: $color-text-dark-secondary
.card-title
position: relative
&:after
content: '\e83b'
font-family: 'pillar-font'
position: absolute
right: 0
color: $color-text-dark-primary
.collapsed
.card-title:after
content: '\e838'
.search-list-stats .search-list-stats
color: $color-text-dark-hint color: $color-text-dark-hint

View File

@ -5,7 +5,7 @@ include ../mixins/components
| {% block page_title %}Search{% if project %} {{ project.name }}{% endif %}{% endblock %} | {% block page_title %}Search{% if project %} {{ project.name }}{% endif %}{% endblock %}
| {% block head %} | {% block head %}
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-6.2.8.min.js') }}") script(src="{{ url_for('static_pillar', filename='assets/js/vendor/video.min.js') }}")
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-ga-0.4.2.min.js') }}") script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-ga-0.4.2.min.js') }}")
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotkeys-0.2.20.min.js') }}") script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotkeys-0.2.20.min.js') }}")
| {% endblock %} | {% endblock %}
@ -31,27 +31,26 @@ script.
document.body.dataset["projectId"] = "{{project._id}}"; document.body.dataset["projectId"] = "{{project._id}}";
| {% endif %} | {% endif %}
| {% if project %}
#project_sidebar.bg-white
ul.project-tabs.p-0
li.tabs-browse(
title="Browse",
data-toggle="tooltip",
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="right")
a(href="{{url_for('projects.search', project_url=project.url, _external=True)}}")
i.pi-search
| {% endif %}
#search-container.d-flex(class="{% if project %}search-project{% endif %}") #search-container.d-flex(class="{% if project %}search-project{% endif %}")
.search-list | {% if project %}
#project_sidebar.bg-white
ul.project-tabs.p-0
li.tabs-browse(
title="Browse",
data-toggle="tooltip",
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="right")
a(href="{{url_for('projects.search', project_url=project.url, _external=True)}}")
i.pi-search
| {% endif %}
.search-settings#search-sidebar.bg-light
input.search-field.p-2.bg-white( input.search-field.p-2.bg-white(
type="text", type="text",
name="q", name="q",
@ -62,13 +61,12 @@ script.
placeholder="Search by Title, Type...") placeholder="Search by Title, Type...")
#pagination.mt-3 #pagination.mt-3
//- #accordion.panel-group.accordion(role="tablist", aria-multiselectable="true")
#facets #facets
#stats.search-list-stats #stats.search-list-stats
+card-deck()(id='hits', class="h-100 m-0 pt-3 pr-2 card-deck-vertical") .border-left.search-list
+card-deck(0)(id='hits', class="m-0 px-2 card-deck-vertical")
#search-details.border-left.search-details #search-details.border-left.search-details
#search-error #search-error
@ -78,22 +76,19 @@ script.
| {% raw %} | {% raw %}
// Facet template // Facet template
script(type="text/template", id="facet-template") script(type="text/template", id="facet-template")
.card .card.border-0.p-0.m-2
a(data-toggle='collapse', data-parent='#accordion', href='#filter_{{ facet }}', aria-expanded='true', aria-controls='filter_{{ facet }}') .card-body.p-3.m-0
.card-header(role='tab') h6.text-muted {{ title }}
.card-title {{ title }} | {{#values}}
.collapse.show(id='filter_{{ facet }}', role='tabpanel', aria-labelledby='headingOne') a.facet_link.toggleRefine(
.card-body class='{{#refined}}refined{{/refined}}',
| {{#values}} data-facet='{{ facet }}',
a.facet_link.toggleRefine( data-value='{{ value }}',
class='{{#refined}}refined{{/refined}}', href='#')
data-facet='{{ facet }}', span
data-value='{{ value }}', | {{ label }}
href='#') small.text-black-50.float-right {{ count }}
span | {{/values}}
| {{ label }}
small.facet_count.pull-right {{ count }}
| {{/values}}
// Hit template // Hit template
@ -177,6 +172,8 @@ script.
$(this).addClass('active'); $(this).addClass('active');
}); });
projectBrowseTypeList();
// Remove focus from search input so that the click event // Remove focus from search input so that the click event
// bound to .search-hit can be fired on the first click. // bound to .search-hit can be fired on the first click.
$('#search-list').hover(function(){ $('#search-list').hover(function(){
@ -210,5 +207,5 @@ script.
| {% endblock %} | {% endblock %}
| {% block footer_navigation %}{% endblock %} | {% block footer_container %}{% endblock %}
| {% block footer %}{% endblock %} | {% block footer %}{% endblock %}