From fe86f76617c80b54ccffebb2bb1d4ece7f63ac5f Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 17 Sep 2018 19:04:42 +0200 Subject: [PATCH] Search: styling --- src/styles/_project.sass | 3 +- src/styles/_search.sass | 47 +++++++------------- src/templates/nodes/search.pug | 81 ++++++++++++++++------------------ 3 files changed, 58 insertions(+), 73 deletions(-) diff --git a/src/styles/_project.sass b/src/styles/_project.sass index a7638703..f85d9e16 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -58,9 +58,10 @@ body.project z-index: $z-index-base + 5 #project_sidebar + box-shadow: inset -1px 0 0 0 $color-background + flex-shrink: 0 width: $project-sidebar-width z-index: $z-index-base + 6 - box-shadow: inset -1px 0 0 0 $color-background +media-xs width: 100% diff --git a/src/styles/_search.sass b/src/styles/_search.sass index bc40c738..1332b731 100644 --- a/src/styles/_search.sass +++ b/src/styles/_search.sass @@ -93,6 +93,17 @@ $search-hit-width_grid: 100px background-color: lighten($color-background, 5%) .search-list + width: 50% + + .embed-responsive + width: 100px + min-width: 100px + + .card-deck.card-deck-vertical + .card + flex-wrap: initial + +.search-settings width: 30% .card-deck.card-deck-vertical @@ -119,8 +130,14 @@ $search-hit-width_grid: 100px .search-details width: 70% + .container-fluid .col-md-8 + flex: 1 + max-width: 100% + width: 100% + #search-details position: relative + #search-hit-container position: absolute // for scrollbars overflow-y: auto @@ -289,25 +306,11 @@ $search-hit-width_grid: 100px button width: 100% -#project_sidebar+#search-sidebar, -#project_sidebar+#search-sidebar+#search-container - padding-left: $sidebar-width - .search-project li.project display: none #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 display: block padding-left: 7px @@ -346,22 +349,6 @@ $search-hit-width_grid: 100px position: relative left: -7px 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 color: $color-text-dark-hint diff --git a/src/templates/nodes/search.pug b/src/templates/nodes/search.pug index e9fbeae9..bf112ae7 100644 --- a/src/templates/nodes/search.pug +++ b/src/templates/nodes/search.pug @@ -5,7 +5,7 @@ include ../mixins/components | {% block page_title %}Search{% if project %} {{ project.name }}{% endif %}{% endblock %} | {% 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-hotkeys-0.2.20.min.js') }}") | {% endblock %} @@ -31,27 +31,26 @@ script. document.body.dataset["projectId"] = "{{project._id}}"; | {% 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-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( type="text", name="q", @@ -62,13 +61,12 @@ script. placeholder="Search by Title, Type...") #pagination.mt-3 - - //- #accordion.panel-group.accordion(role="tablist", aria-multiselectable="true") #facets - #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-error @@ -78,22 +76,19 @@ script. | {% raw %} // Facet template script(type="text/template", id="facet-template") - .card - a(data-toggle='collapse', data-parent='#accordion', href='#filter_{{ facet }}', aria-expanded='true', aria-controls='filter_{{ facet }}') - .card-header(role='tab') - .card-title {{ title }} - .collapse.show(id='filter_{{ facet }}', role='tabpanel', aria-labelledby='headingOne') - .card-body - | {{#values}} - a.facet_link.toggleRefine( - class='{{#refined}}refined{{/refined}}', - data-facet='{{ facet }}', - data-value='{{ value }}', - href='#') - span - | {{ label }} - small.facet_count.pull-right {{ count }} - | {{/values}} + .card.border-0.p-0.m-2 + .card-body.p-3.m-0 + h6.text-muted {{ title }} + | {{#values}} + a.facet_link.toggleRefine( + class='{{#refined}}refined{{/refined}}', + data-facet='{{ facet }}', + data-value='{{ value }}', + href='#') + span + | {{ label }} + small.text-black-50.float-right {{ count }} + | {{/values}} // Hit template @@ -177,6 +172,8 @@ script. $(this).addClass('active'); }); + projectBrowseTypeList(); + // Remove focus from search input so that the click event // bound to .search-hit can be fired on the first click. $('#search-list').hover(function(){ @@ -210,5 +207,5 @@ script. | {% endblock %} -| {% block footer_navigation %}{% endblock %} +| {% block footer_container %}{% endblock %} | {% block footer %}{% endblock %}