Search: styling
This commit is contained in:
parent
008d9b8880
commit
fe86f76617
@ -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%
|
||||||
|
@ -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
|
||||||
|
@ -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 %}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user