Search: Layout and styling
This commit is contained in:
@@ -92,46 +92,51 @@ $search-hit-width_grid: 100px
|
|||||||
&.tt-cursor:hover .search-hit
|
&.tt-cursor:hover .search-hit
|
||||||
background-color: lighten($color-background, 5%)
|
background-color: lighten($color-background, 5%)
|
||||||
|
|
||||||
#search-container
|
.search-list
|
||||||
min-height: 600px
|
width: 30%
|
||||||
|
|
||||||
+media-lg
|
.card-deck.card-deck-horizontal
|
||||||
padding-left: 0
|
.card .embed-responsive
|
||||||
padding-right: 0
|
max-width: 80px
|
||||||
|
|
||||||
#search-list
|
input.search-field
|
||||||
width: 40%
|
border: none
|
||||||
position: relative
|
border-bottom: 2px solid rgba($primary, .2)
|
||||||
overflow-x: hidden
|
border-radius: 0
|
||||||
|
width: 100%
|
||||||
|
transition: border 100ms ease-in-out
|
||||||
|
|
||||||
|
&::placeholder
|
||||||
|
color: $color-text-dark-secondary
|
||||||
|
&:placeholder-shown
|
||||||
|
border-bottom-color: $primary
|
||||||
|
|
||||||
|
&:focus
|
||||||
|
outline: none
|
||||||
|
border: none
|
||||||
|
border-bottom: 2px solid lighten($primary, 5%)
|
||||||
|
|
||||||
|
.search-details
|
||||||
|
width: 70%
|
||||||
|
|
||||||
|
#search-details
|
||||||
|
position: relative
|
||||||
|
#search-hit-container
|
||||||
|
position: absolute // for scrollbars
|
||||||
overflow-y: auto
|
overflow-y: auto
|
||||||
|
|
||||||
#hits
|
#error_container
|
||||||
position: relative
|
position: relative
|
||||||
width: 100%
|
background: white
|
||||||
|
padding: 20px
|
||||||
|
|
||||||
#no-hits
|
#search-error
|
||||||
padding: 10px 15px
|
display: none
|
||||||
color: $color-text-dark-secondary
|
margin: 20px auto
|
||||||
|
color: $color-danger
|
||||||
#search-details
|
text-align: center
|
||||||
position: relative
|
|
||||||
width: 40%
|
|
||||||
|
|
||||||
#search-hit-container
|
|
||||||
position: absolute // for scrollbars
|
|
||||||
overflow-y: auto
|
|
||||||
|
|
||||||
#error_container
|
|
||||||
position: relative
|
|
||||||
background: white
|
|
||||||
padding: 20px
|
|
||||||
|
|
||||||
#search-error
|
|
||||||
display: none
|
|
||||||
margin: 20px auto
|
|
||||||
color: $color-danger
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
|
#search-container
|
||||||
#node-container
|
#node-container
|
||||||
width: 100%
|
width: 100%
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
@@ -284,109 +289,78 @@ $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
|
||||||
|
li.project
|
||||||
|
display: none
|
||||||
|
|
||||||
#search-sidebar
|
#search-sidebar
|
||||||
width: 20%
|
.card
|
||||||
background-color: $color-background-light
|
|
||||||
|
|
||||||
+media-lg
|
|
||||||
border-top-left-radius: 3px
|
|
||||||
|
|
||||||
input.search-field
|
|
||||||
margin-bottom: 10px
|
margin-bottom: 10px
|
||||||
|
border-radius: 3px
|
||||||
border: none
|
border: none
|
||||||
border-bottom: 2px solid rgba($primary, .2)
|
background-color: white
|
||||||
border-radius: 0
|
box-shadow: 1px 1px 0 rgba(black, .1)
|
||||||
width: 100%
|
|
||||||
transition: border 100ms ease-in-out
|
|
||||||
|
|
||||||
&::placeholder
|
a
|
||||||
color: $color-text-dark-secondary
|
text-decoration: none
|
||||||
&:placeholder-shown
|
|
||||||
border-bottom-color: $primary
|
|
||||||
|
|
||||||
&:focus
|
.toggleRefine
|
||||||
outline: none
|
display: block
|
||||||
border: none
|
padding-left: 7px
|
||||||
border-bottom: 2px solid lighten($primary, 5%)
|
color: $color-text-dark
|
||||||
|
text-transform: capitalize
|
||||||
|
|
||||||
.search-list-filters
|
&:hover
|
||||||
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
|
text-decoration: none
|
||||||
|
color: $primary
|
||||||
|
|
||||||
.toggleRefine
|
&.refined
|
||||||
display: block
|
color: $primary
|
||||||
padding-left: 7px
|
|
||||||
color: $color-text-dark
|
|
||||||
text-transform: capitalize
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
text-decoration: none
|
color: $color-danger
|
||||||
color: $primary
|
|
||||||
|
|
||||||
&.refined
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color: $color-danger
|
|
||||||
|
|
||||||
span
|
|
||||||
&:before
|
|
||||||
/* x icon */
|
|
||||||
content: '\e84b'
|
|
||||||
font-family: 'pillar-font'
|
|
||||||
span
|
span
|
||||||
&:before
|
&:before
|
||||||
/* circle with dot */
|
/* x icon */
|
||||||
content: '\e82f'
|
content: '\e84b'
|
||||||
font-family: 'pillar-font'
|
font-family: 'pillar-font'
|
||||||
position: relative
|
|
||||||
left: -7px
|
|
||||||
font-size: .9em
|
|
||||||
|
|
||||||
span
|
span
|
||||||
&:before
|
&:before
|
||||||
/* empty circle */
|
/* circle with dot */
|
||||||
content: '\e82c'
|
content: '\e82f'
|
||||||
font-family: 'pillar-font'
|
font-family: 'pillar-font'
|
||||||
position: relative
|
position: relative
|
||||||
left: -7px
|
left: -7px
|
||||||
font-size: .9em
|
font-size: .9em
|
||||||
.facet_count
|
|
||||||
color: $color-text-dark-secondary
|
|
||||||
|
|
||||||
|
span
|
||||||
.panel-title, .panel-heading
|
&:before
|
||||||
color: $color-text-dark-secondary
|
/* empty circle */
|
||||||
font:
|
content: '\e82c'
|
||||||
size: 1em
|
|
||||||
weight: 500
|
|
||||||
|
|
||||||
.panel-body
|
|
||||||
padding-top: 0
|
|
||||||
|
|
||||||
.panel-title
|
|
||||||
position: relative
|
|
||||||
&:after
|
|
||||||
content: '\e83b'
|
|
||||||
font-family: 'pillar-font'
|
font-family: 'pillar-font'
|
||||||
position: absolute
|
position: relative
|
||||||
right: 0
|
left: -7px
|
||||||
color: $color-text-dark-primary
|
font-size: .9em
|
||||||
|
.facet_count
|
||||||
|
color: $color-text-dark-secondary
|
||||||
|
|
||||||
.collapsed
|
.card-title
|
||||||
.panel-title:after
|
position: relative
|
||||||
content: '\e838'
|
&: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
|
||||||
@@ -396,241 +370,37 @@ $search-hit-width_grid: 100px
|
|||||||
font-size: .9em
|
font-size: .9em
|
||||||
+clearfix
|
+clearfix
|
||||||
|
|
||||||
#pagination
|
.search-pagination
|
||||||
ul.search-pagination
|
text-align: center
|
||||||
text-align: center
|
list-style-type: none
|
||||||
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
|
|
||||||
+clearfix
|
|
||||||
float: left
|
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 7px 10px 7px 10px
|
padding: 0
|
||||||
position: relative
|
|
||||||
width: 100%
|
width: 100%
|
||||||
|
display: flex
|
||||||
|
+clearfix
|
||||||
|
|
||||||
&:first-child
|
li
|
||||||
border: thin solid transparent
|
display: inline-block
|
||||||
border-left: 3px solid transparent
|
margin: 5px auto
|
||||||
|
|
||||||
&:hover
|
&:last-child
|
||||||
opacity: 1
|
border-color: transparent
|
||||||
text-decoration: none
|
|
||||||
cursor: default
|
|
||||||
color: darken($primary, 20%)
|
|
||||||
background-color: $color-background-light
|
|
||||||
|
|
||||||
& .search-hit-name i
|
a
|
||||||
color: darken($primary, 20%)
|
font-weight: 500
|
||||||
|
padding: 5px 4px
|
||||||
|
color: $color-text-dark-secondary
|
||||||
|
|
||||||
& .search-hit-thumbnail
|
|
||||||
& .search-hit-thumbnail-icon
|
|
||||||
transform: translate(-50%, -50%) scale(1.1)
|
|
||||||
|
|
||||||
.search-hit-name
|
|
||||||
text-decoration: none
|
|
||||||
&:hover
|
&:hover
|
||||||
color: darken($primary, 10%)
|
color: $color-text-dark-primary
|
||||||
|
|
||||||
.search-hit-thumbnail
|
&.disabled
|
||||||
cursor: pointer
|
opacity: .6
|
||||||
|
|
||||||
.search-hit-thumbnail-icon
|
&.active a
|
||||||
transform: translate(-50%, -50%) scale(1)
|
color: $color-text-dark-primary
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
&:active
|
|
||||||
background-color: rgba($color-background, .5)
|
|
||||||
opacity: .8
|
|
||||||
color: $primary
|
|
||||||
& .search-hit-name i
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
border-color: rgba($primary, .2)
|
|
||||||
|
|
||||||
/* Class that gets added when we click on the item */
|
|
||||||
&.active
|
|
||||||
background-color: lighten($color-background, 2%)
|
|
||||||
box-shadow: inset -3px 0 $primary
|
|
||||||
|
|
||||||
.search-hit-name
|
|
||||||
color: darken($primary, 10%)
|
|
||||||
|
|
||||||
.search-hit-meta
|
|
||||||
span.when
|
|
||||||
display: none
|
|
||||||
span.context
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
.search-hit-thumbnail
|
|
||||||
position: relative
|
|
||||||
float: left
|
|
||||||
min-width: $search-hit-width_list * 1.49
|
|
||||||
max-width: $search-hit-width_list * 1.49
|
|
||||||
height: $search-hit-width_list
|
|
||||||
border-radius: 3px
|
|
||||||
background: $color-background
|
|
||||||
margin-right: 12px
|
|
||||||
text-align: center
|
|
||||||
overflow: hidden
|
|
||||||
+media-xs
|
|
||||||
display: none
|
|
||||||
+media-sm
|
|
||||||
min-width: $search-hit-width_list
|
|
||||||
max-width: $search-hit-width_list
|
|
||||||
|
|
||||||
img
|
|
||||||
height: $search-hit-width_list
|
|
||||||
width: auto
|
|
||||||
|
|
||||||
|
|
||||||
.pi-video:before, .pi-file:before,
|
|
||||||
.pi-group:before
|
|
||||||
font-family: 'pillar-font'
|
|
||||||
.pi-video:before
|
|
||||||
content: '\e81d'
|
|
||||||
.pi-file:before
|
|
||||||
content: '\e825'
|
|
||||||
.pi-group:before
|
|
||||||
content: '\e80d'
|
|
||||||
|
|
||||||
.search-hit-thumbnail-icon
|
|
||||||
position: absolute
|
|
||||||
top: 50%
|
|
||||||
left: 50%
|
|
||||||
transform: translate(-50%, -50%)
|
|
||||||
color: white
|
|
||||||
font-size: 1.2em
|
|
||||||
transition: none
|
|
||||||
color: $color-text-dark-secondary
|
|
||||||
|
|
||||||
.dark
|
|
||||||
text-shadow: none
|
|
||||||
font-size: 1.3em
|
|
||||||
|
|
||||||
.search-hit-name
|
|
||||||
position: relative
|
|
||||||
font-size: 1.1em
|
|
||||||
color: $color-text-dark-primary
|
|
||||||
background-color: initial
|
|
||||||
width: initial
|
|
||||||
max-width: initial
|
|
||||||
+text-overflow-ellipsis
|
|
||||||
padding-top: 5px
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
cursor: pointer
|
|
||||||
text-decoration: underline
|
|
||||||
|
|
||||||
em
|
|
||||||
color: darken($primary, 15%)
|
|
||||||
font-style: normal
|
|
||||||
|
|
||||||
.search-hit-ribbon
|
|
||||||
+ribbon
|
|
||||||
right: -30px
|
|
||||||
top: 5px
|
|
||||||
|
|
||||||
span
|
|
||||||
font-size: 60%
|
|
||||||
margin: 1px 0
|
|
||||||
padding: 2px 35px
|
|
||||||
|
|
||||||
.search-hit-meta
|
|
||||||
position: relative
|
|
||||||
font-size: .9em
|
|
||||||
color: $color-text-dark-secondary
|
|
||||||
background-color: initial
|
|
||||||
padding: 3px 0 0 0
|
|
||||||
text-decoration: none
|
|
||||||
+text-overflow-ellipsis
|
|
||||||
|
|
||||||
span
|
|
||||||
&.project
|
|
||||||
color: $color-text-dark-secondary
|
|
||||||
margin-right: 3px
|
|
||||||
&.updated
|
|
||||||
color: $color-text-dark-hint
|
|
||||||
&.status
|
|
||||||
font-size: .8em
|
|
||||||
color: $color-text-dark-secondary
|
|
||||||
border: thin solid $color-text-dark-hint
|
|
||||||
padding: 3px 8px
|
|
||||||
text-transform: uppercase
|
|
||||||
border-radius: 3px
|
|
||||||
margin-right: 5px
|
|
||||||
&.media, &.node_type
|
|
||||||
color: $color-text-dark-secondary
|
|
||||||
text-transform: capitalize
|
|
||||||
margin: 0 3px
|
|
||||||
|
|
||||||
&.when
|
|
||||||
margin: 0 3px
|
|
||||||
float: right
|
|
||||||
display: block
|
|
||||||
+media-lg
|
|
||||||
display: block
|
|
||||||
+media-md
|
|
||||||
display: block
|
|
||||||
+media-sm
|
|
||||||
display: none
|
|
||||||
+media-xs
|
|
||||||
display: none
|
|
||||||
|
|
||||||
&.context
|
|
||||||
margin: 0
|
|
||||||
float: right
|
|
||||||
display: none
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
cursor: pointer
|
|
||||||
.search-hit-name-user
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
&.users
|
|
||||||
em
|
|
||||||
font-style: normal
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
.search-hit-name
|
|
||||||
font-size: 1.2em
|
|
||||||
|
|
||||||
small
|
|
||||||
margin-left: 5px
|
|
||||||
color: $color-text-dark-secondary
|
|
||||||
|
|
||||||
.search-hit-roles
|
|
||||||
font-size: .9em
|
|
||||||
color: $color-text-dark-secondary
|
|
||||||
margin-left: 15px
|
|
||||||
|
|
||||||
.view-grid
|
.view-grid
|
||||||
display: flex
|
display: flex
|
||||||
|
|||||||
@@ -21,6 +21,25 @@
|
|||||||
flex: 1 0 20%
|
flex: 1 0 20%
|
||||||
max-width: 20%
|
max-width: 20%
|
||||||
|
|
||||||
|
&.card-deck-horizontal
|
||||||
|
@extend .flex-column
|
||||||
|
flex-wrap: initial
|
||||||
|
|
||||||
|
.card
|
||||||
|
@extend .w-100
|
||||||
|
@extend .flex-row
|
||||||
|
flex: initial
|
||||||
|
max-width: 100%
|
||||||
|
|
||||||
|
.card-img-top
|
||||||
|
@extend .rounded-0
|
||||||
|
|
||||||
|
.embed-responsive
|
||||||
|
@extend .mr-2
|
||||||
|
max-width: 120px
|
||||||
|
|
||||||
|
.card-body
|
||||||
|
@extend .overflow-hidden
|
||||||
|
|
||||||
.card-padless
|
.card-padless
|
||||||
.card
|
.card
|
||||||
@@ -90,3 +109,8 @@
|
|||||||
position: absolute
|
position: absolute
|
||||||
padding: 1px 5px
|
padding: 1px 5px
|
||||||
z-index: 1
|
z-index: 1
|
||||||
|
|
||||||
|
.card
|
||||||
|
&.active
|
||||||
|
.card-title
|
||||||
|
color: $primary
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ nav.sidebar
|
|||||||
border: none
|
border: none
|
||||||
color: $color-text-dark-secondary
|
color: $color-text-dark-secondary
|
||||||
padding: 0
|
padding: 0
|
||||||
z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */
|
z-index: $z-index-base + 5
|
||||||
|
|
||||||
nav
|
nav
|
||||||
margin-left: auto
|
margin-left: auto
|
||||||
|
|||||||
@@ -25,7 +25,6 @@ a.card.asset.card-image-fade.pr-0.mx-0.mb-2(
|
|||||||
li.pr-2 {{ node_type | undertitle }}
|
li.pr-2 {{ node_type | undertitle }}
|
||||||
li {{ asset._created | pretty_date }}
|
li {{ asset._created | pretty_date }}
|
||||||
|
|
||||||
|
|
||||||
| {% if asset.properties.content_type == 'video' %}
|
| {% if asset.properties.content_type == 'video' %}
|
||||||
|
|
||||||
| {% set view_progress = current_user.nodes.view_progress %}
|
| {% set view_progress = current_user.nodes.view_progress %}
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ mixin card-deck()
|
|||||||
if block
|
if block
|
||||||
block
|
block
|
||||||
else
|
else
|
||||||
p No cards defined.
|
.p-3 No items.
|
||||||
|
|
||||||
// {#
|
// {#
|
||||||
// Passes all attributes to the card.
|
// Passes all attributes to the card.
|
||||||
|
|||||||
@@ -1,4 +1,7 @@
|
|||||||
| {% extends 'layout.html' %}
|
| {% extends 'layout.html' %}
|
||||||
|
| {% from '_macros/_asset_list_item.html' import asset_list_item %}
|
||||||
|
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 %}
|
||||||
@@ -28,61 +31,46 @@ script.
|
|||||||
document.body.dataset["projectId"] = "{{project._id}}";
|
document.body.dataset["projectId"] = "{{project._id}}";
|
||||||
| {% endif %}
|
| {% endif %}
|
||||||
|
|
||||||
#search-container.d-flex
|
| {% 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
|
||||||
|
|
||||||
| {% if project %}
|
li.tabs-search.active(
|
||||||
#project_sidebar.bg-white
|
title="Search",
|
||||||
ul.project-tabs.p-0
|
data-toggle="tooltip",
|
||||||
li.tabs-browse(
|
data-placement="right")
|
||||||
title="Browse",
|
a(href="{{url_for('projects.search', project_url=project.url, _external=True)}}")
|
||||||
data-toggle="tooltip",
|
i.pi-search
|
||||||
data-placement="right")
|
| {% endif %}
|
||||||
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-sidebar
|
#search-container.d-flex(class="{% if project %}search-project{% endif %}")
|
||||||
|
.search-list
|
||||||
input.search-field.p-2.bg-white(
|
input.search-field.p-2.bg-white(
|
||||||
type="text",
|
type="text",
|
||||||
name="q",
|
name="q",
|
||||||
id="q",
|
id="q",
|
||||||
autocomplete="off",
|
autocomplete="off",
|
||||||
spellcheck="false",
|
spellcheck="false",
|
||||||
autocorrect="false",
|
autocorrect="false",
|
||||||
placeholder="Search by Title, Type...")
|
placeholder="Search by Title, Type...")
|
||||||
|
|
||||||
.search-list-filters
|
#pagination.mt-3
|
||||||
.filter-list
|
|
||||||
| View as:
|
|
||||||
ul.filter-list
|
|
||||||
li.filter-list-type.grid(
|
|
||||||
title="Browse as grid",
|
|
||||||
data-list-type="grid")
|
|
||||||
i.pi-layout
|
|
||||||
li.filter-list-type.list(
|
|
||||||
title="Browse as list",
|
|
||||||
data-list-type="list")
|
|
||||||
i.pi-list
|
|
||||||
|
|
||||||
#accordion.panel-group.accordion(role="tablist", aria-multiselectable="true")
|
//- #accordion.panel-group.accordion(role="tablist", aria-multiselectable="true")
|
||||||
#facets
|
#facets
|
||||||
|
|
||||||
#pagination
|
#stats.search-list-stats
|
||||||
|
|
||||||
.search-list-stats
|
+card-deck()(id='hits', class="h-100 m-0 pt-3 pr-2 card-deck-horizontal")
|
||||||
#stats
|
|
||||||
|
|
||||||
#search-list.h-100
|
#search-details.border-left.search-details
|
||||||
#hits
|
|
||||||
|
|
||||||
#search-details.border-left
|
|
||||||
#search-error
|
#search-error
|
||||||
#search-hit-container.w-100
|
#search-hit-container.w-100
|
||||||
|
|
||||||
@@ -90,12 +78,12 @@ script.
|
|||||||
| {% raw %}
|
| {% raw %}
|
||||||
// Facet template
|
// Facet template
|
||||||
script(type="text/template", id="facet-template")
|
script(type="text/template", id="facet-template")
|
||||||
.panel.panel-default
|
.card
|
||||||
a(data-toggle='collapse', data-parent='#accordion', href='#filter_{{ facet }}', aria-expanded='true', aria-controls='filter_{{ facet }}')
|
a(data-toggle='collapse', data-parent='#accordion', href='#filter_{{ facet }}', aria-expanded='true', aria-controls='filter_{{ facet }}')
|
||||||
.panel-heading(role='tab')
|
.card-header(role='tab')
|
||||||
.panel-title {{ title }}
|
.card-title {{ title }}
|
||||||
.panel-collapse.collapse.in(id='filter_{{ facet }}', role='tabpanel', aria-labelledby='headingOne')
|
.collapse.show(id='filter_{{ facet }}', role='tabpanel', aria-labelledby='headingOne')
|
||||||
.panel-body
|
.card-body
|
||||||
| {{#values}}
|
| {{#values}}
|
||||||
a.facet_link.toggleRefine(
|
a.facet_link.toggleRefine(
|
||||||
class='{{#refined}}refined{{/refined}}',
|
class='{{#refined}}refined{{/refined}}',
|
||||||
@@ -110,35 +98,33 @@ script(type="text/template", id="facet-template")
|
|||||||
|
|
||||||
// Hit template
|
// Hit template
|
||||||
script(type="text/template", id="hit-template")
|
script(type="text/template", id="hit-template")
|
||||||
.search-hit(data-hit-id='{{ objectID }}')
|
a.card.asset.card-image-fade.pl-0.mx-0.mb-1(
|
||||||
.search-hit-thumbnail
|
data-hit-id='{{ objectID }}',
|
||||||
|
href="/nodes/{{ objectID }}/redir",
|
||||||
|
class="js-search-hit {{#is_free}}free{{/is_free}}")
|
||||||
|
.embed-responsive.embed-responsive-16by9
|
||||||
| {{#picture}}
|
| {{#picture}}
|
||||||
img(src="{{{ picture }}}")
|
.card-img-top.embed-responsive-item(style="background-image: url({{{ picture }}})")
|
||||||
| {{/picture}}
|
| {{/picture}}
|
||||||
| {{^picture}}
|
| {{^picture}}
|
||||||
.search-hit-thumbnail-icon
|
.card-img-top.card-icon.embed-responsive-item
|
||||||
| {{#media}}
|
| {{#media}}
|
||||||
i(class="pi-{{{ media }}}")
|
i(class="pi-{{{ media }}}")
|
||||||
| {{/media}}
|
| {{/media}}
|
||||||
| {{^media}}
|
| {{^media}}
|
||||||
i.dark(class="pi-{{{ node_type }}}")
|
i(class="pi-{{{ node_type }}}")
|
||||||
| {{/media}}
|
| {{/media}}
|
||||||
| {{/picture}}
|
| {{/picture}}
|
||||||
| {{#is_free}}
|
.card-body.py-2.d-flex.flex-column
|
||||||
.search-hit-ribbon
|
.card-title.mb-1.font-weight-bold
|
||||||
span free
|
| {{ name }}
|
||||||
| {{/is_free}}
|
|
||||||
.search-hit-name
|
ul.card-text.list-unstyled.d-flex.text-black-50.mt-auto
|
||||||
| {{ name }}
|
li.pr-2.project {{ project.name }}
|
||||||
.search-hit-meta
|
| {{#media}}
|
||||||
span.project {{ project.name }}
|
li.pr-2.text-capitalize {{{ media }}}
|
||||||
span.node_type {{{ node_type }}}
|
| {{/media}}
|
||||||
| {{#media}}
|
li.pr-2 {{{ created_at }}}
|
||||||
span.media · {{{ media }}}
|
|
||||||
| {{/media}}
|
|
||||||
span.when {{{ created_at }}}
|
|
||||||
span.context
|
|
||||||
a(href="/nodes/{{ objectID }}/redir") view in context
|
|
||||||
|
|
||||||
|
|
||||||
// Pagination template
|
// Pagination template
|
||||||
@@ -159,7 +145,6 @@ script(type="text/template", id="stats-template")
|
|||||||
| {% endblock %}
|
| {% endblock %}
|
||||||
|
|
||||||
| {% block footer_scripts %}
|
| {% block footer_scripts %}
|
||||||
script(src="//releases.flowplayer.org/6.0.5/flowplayer.min.js", async)
|
|
||||||
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/hogan.common-3.0.0.js') }}")
|
script(src="{{ url_for('static_pillar', filename='assets/js/vendor/hogan.common-3.0.0.js') }}")
|
||||||
script(src="{{ url_for('static_pillar', filename='assets/js/elasticsearch.min.js') }}")
|
script(src="{{ url_for('static_pillar', filename='assets/js/elasticsearch.min.js') }}")
|
||||||
|
|
||||||
@@ -182,17 +167,19 @@ script.
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$('body').on('click', '.search-hit', function(){
|
$('body').on('click', '.js-search-hit', function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
$('.loader-bar').removeClass('active').addClass('active');
|
$('.loader-bar').removeClass('active').addClass('active');
|
||||||
|
|
||||||
displayNode($(this).data('hit-id'));
|
displayNode($(this).data('hit-id'));
|
||||||
$('.search-hit').removeClass('active');
|
$('.js-search-hit').removeClass('active');
|
||||||
$(this).addClass('active');
|
$(this).addClass('active');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Remove focus from search input so that the click event bound to .search-hit
|
// Remove focus from search input so that the click event
|
||||||
// can be fired on the first click.
|
// bound to .search-hit can be fired on the first click.
|
||||||
$(searchList).hover(function(){
|
$('#search-list').hover(function(){
|
||||||
$('#q').blur();
|
$('#q').blur();
|
||||||
});
|
});
|
||||||
$('#search-sidebar').hover(function(){
|
$('#search-sidebar').hover(function(){
|
||||||
@@ -200,42 +187,6 @@ script.
|
|||||||
});
|
});
|
||||||
|
|
||||||
/* UI Stuff */
|
/* UI Stuff */
|
||||||
|
|
||||||
/* List types, grid or list (default)*/
|
|
||||||
var uiListType = Cookies.getJSON('bcloud_ui');
|
|
||||||
var searchList = document.getElementById('search-list');
|
|
||||||
|
|
||||||
function uiSetListType(type){
|
|
||||||
$('.filter-list-type').removeClass('active');
|
|
||||||
|
|
||||||
if (type == 'grid'){
|
|
||||||
$(searchList).addClass('view-grid');
|
|
||||||
$('.filter-list-type.grid').addClass('active');
|
|
||||||
} else {
|
|
||||||
$(searchList).removeClass('view-grid');
|
|
||||||
$('.filter-list-type.list').addClass('active');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (uiListType && uiListType.search_browse_type == 'grid'){
|
|
||||||
uiSetListType('grid');
|
|
||||||
} else {
|
|
||||||
uiSetListType('list');
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.filter-list-type').on('click', function(){
|
|
||||||
if ($(this).attr('data-list-type') == 'grid'){
|
|
||||||
uiSetListType('grid');
|
|
||||||
setJSONCookie('bcloud_ui', 'search_browse_type', 'grid');
|
|
||||||
} else {
|
|
||||||
uiSetListType('list');
|
|
||||||
setJSONCookie('bcloud_ui', 'search_browse_type', 'list');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Hide site-wide search, kinda confusing */
|
|
||||||
$('.search-input').hide();
|
|
||||||
|
|
||||||
/* Resize container so we can have custom scrollbars */
|
/* Resize container so we can have custom scrollbars */
|
||||||
container_offset = $('#search-container').offset();
|
container_offset = $('#search-container').offset();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user