Files
pillar/src/styles/_search.sass
Tobias Johansson 6ae9a5ddeb Quick-Search: Added Quick-search in the topbar
Changed how and what we store in elastic to unify it with how we store
things in mongodb so we can have more generic javascript code
to render the data.

Elastic changes:
  Added:
  Node.project.url

  Altered to store id instead of url
  Node.picture

  Made Post searchable

./manage.py elastic reset_index
./manage.py elastic reindex

Thanks to Pablo and Sybren
2018-11-22 15:31:53 +01:00

486 lines
8.2 KiB
Sass

$search-hit-width: 160px
$search-hit-width_list: 48px
$search-hit-width_grid: 100px
.search-site-result
width: 100%
&.advanced
width: 350px
z-index: 101
.search-hit
background: white
border-top: thin solid $color-background !important
.search-hit-name
font-weight: 400
padding-top: 8px
color: $primary
.search-hit
padding: 0
margin: 0
display: block
color: $color-text
text:
transform: initial
shadow: none
font:
size: .9em
weight: 400
style: initial
width: 100%
+text-overflow-ellipsis
+clearfix
& em
color: $primary
font-style: normal
&:hover
padding: 0
margin: 0
background: $color-background
&:first-child
border: none
.search-hit-name
top: 6px
margin: 0
padding-top: 0
.search-hit-meta
padding-top: 8px
margin: 0
.search-hit-thumbnail
border-radius: 0
transition: margin-right 100ms ease-in-out
.twitter-typeahead
.tt-hint
color: $color-text-dark-hint
.tt-menu
top: 47px !important
background-color: white
box-shadow: 1px 1px 0 rgba(black, .05), 0 20px 50px rgba(black, .25)
min-width: 350px
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
border-top: 3px solid lighten($primary, 5%)
overflow: hidden
.tt-suggestion
&:hover, &.tt-cursor
.search-hit
text-decoration: none
background-color: lighten($color-background, 3%)
.search-hit-name
color: $color-background-nav
.search-hit-meta
span.project, span.node_type, span.media
color: $color-background-nav
.search-hit-thumbnail
opacity: .9
margin-right: 15px
&.tt-cursor:hover .search-hit
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
.card .embed-responsive
max-width: 80px
input.search-field
border: none
border-bottom: 2px solid rgba($primary, .2)
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%
.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
#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
width: 100%
max-width: 100%
.node-preview
max-height: initial
&.group
background: white
.overlay
display: none
.node-title
font-size: 1.8em
padding-right: 30px
width: 100%
+text-overflow-ellipsis
.backdrop
opacity: .15
.node-preview-thumbnail
max-height: 320px
.node-children
&.group
background-color: white
position: relative
z-index: 1
.list-node-children-item.browse-list
width: 98%
.list-node-children-item-name
+text-overflow-ellipsis
font-size: 1.1em
.list-node-children-item-meta
+text-overflow-ellipsis
padding-right: 20px
span
&.free
font-size: .7em
.node-details-container
&.group
position: initial
.node-details-description
max-width: 100%
p
margin-bottom: 0
padding-bottom: 10px
.node-details-header
clear: both
width: 100%
max-width: 100%
.node-title
font-size: 1.7em
.node-details-meta
&.header
clear: both
width: 100%
max-width: 100%
padding: 10px
.node-details-meta-list
display: inline-block
float: right
font-size: .9em
.node-details-meta-list-item
&.status, &.author
display: none
&.type, &.length
padding-top: 10px
&.access
padding-top: 5px
&.footer
.node-details-meta-list
.node-details-meta-list-item
&.status
display: none
&.preview
bottom: initial
top: 10px
.node-details-meta-list
.node-details-meta-list-item
&.status, &.author, &.date
display: none
&.texture
.texture-title
font-size: 2em
padding: 15px 10px 10px 15px
.node-row
background: white
&.texture-map
width: 100%
section.node-preview.texture
max-height: 180px
max-width: 180px
.node-details-header
padding:
left: 15px
right: 15px
bottom: 0
min-height: initial
.node-title
font-size: 1.5em
.node-details-attributes
font-size: .9em
padding:
left: 15px
right: 15px
bottom: 10px
span.sizes
padding: 0
span.extra
padding: 0
.node-preview.texture
max-width: 128px
img.node-preview-thumbnail
pointer-events: none
.node-details-meta
padding: 15px
.node-details-meta-list
width: 100%
flex-wrap: wrap
margin: 0 auto
.node-details-meta-list-item
text-align: center
margin: 0 auto 0 0
padding: 5px 0
font-size: .9em
&.image.download
width: 100%
padding: 5px 0 0 0
button
width: 100%
.search-project
li.project
display: none
#search-sidebar
.facet-title
text-transform: capitalize
.toggleRefine
display: block
padding-left: 7px
color: $color-text-dark
text-transform: capitalize
&:hover
text-decoration: none
color: $primary
&.refined
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
.search-list-stats
color: $color-text-dark-hint
padding: 10px 15px 0 15px
text-align: center
font-size: .9em
+clearfix
.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
.view-grid
display: flex
justify-content: space-between
padding: 10px !important
.search-hit
width: 30%
clear: none
padding: 0
margin: 5px
overflow: hidden
border-radius: 3px
border-left: none
border: 2px solid $color-background
background-color: $color-background
transition: border-color 150ms ease-in-out
&.active
background-color: $primary
border-color: $primary
.search-hit-name
font-weight: 500
color: white
background-color: $primary
.search-hit-name
font-size: .9em
color: $color-text-dark-primary
width: 100%
position: absolute
bottom: 0
padding: 4px 5px
background-color: $color-background
.search-hit-meta
display: none
.search-hit-thumbnail
display: flex
flex-direction: column
background-color: transparent
width: 100%
max-width: 100%
height: auto
min-height: $search-hit-width_grid
overflow: hidden
margin: 0 auto
+media-xs
display: none
+media-sm
img
+position-center-translate
top: 40%
width: auto
height: auto
.search-hit-thumbnail-icon,
.search-hit-thumbnail-icon .dark
top: 40%
.filter-list
width: 100%
padding: 5px 0
margin-bottom: 10px
display: flex
align-items: center
ul
margin: 0 0 0 auto
align-self: flex-end
width: auto
list-style: none
border-radius: 3px
overflow: hidden
padding: 0
li
display: inline-block
padding: 3px 10px
cursor: pointer
background-color: $color-background-dark
border: thin solid $color-text-dark-hint
&.active
color: white
background-color: $primary
border-color: transparent