archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Quick-Search: Added Quick-search in the topbar

Browse Source 
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
This commit is contained in:
Tobias Johansson
2018-11-22 15:31:53 +01:00
parent a897e201ba
commit 6ae9a5ddeb
53 changed files with 1954 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/styles/_config.sass
View File

@@ -42,6 +42,9 @@ $color-info: #68B3C8 !default
$color-success: #27AE60 !default
$color-danger: #EB5E28 !default
$short-transition: 150ms
$long-transition: 650ms
/* Borrowed from dillo.space :) */
$color_upvote: #ff8b60 !default
$color_downvote: #74a4ff !default

1
src/styles/_project.sass
View File

@@ -6,6 +6,7 @@ body.edit, body.sharing, body.attract, body.flamenco,
body.svnman, body.edit_node_types, body.search-project
nav.navbar
@extend .navbar-dark
padding-right: 5px
#project-container
display: flex

5
src/styles/_search.sass
View File

@@ -311,6 +311,9 @@ $search-hit-width_grid: 100px
display: none
#search-sidebar
.facet-title
text-transform: capitalize
.toggleRefine
display: block
padding-left: 7px
@@ -480,4 +483,4 @@ $search-hit-width_grid: 100px
&.active
color: white
background-color: $primary
border-color: transparent
border-color: transparent

1
src/styles/_utils.sass
View File

@@ -143,6 +143,7 @@
border-color: $primary
box-shadow: none
color: $color-text
outline: 0
=label-generic
color: $color-text-dark-primary

1
src/styles/blog.sass
View File

@@ -46,6 +46,7 @@
@import "components/buttons"
@import "components/tooltip"
@import "components/overlay"
@import "components/search"
@import _comments
@import _notifications

11
src/styles/components/_base.sass
View File

@@ -11,6 +11,17 @@ body
max-width: 100%
min-width: auto
body.has-overlay
overflow: hidden
padding-right: 5px
.page-body
filter: blur(15px)
transition: filter $short-transition
.card
box-shadow: 1px 1px rgba(black, .1), 1px 10px 25px rgba(black, .05)
.page-content
background-color: $white

85
src/styles/components/_card.sass
View File

@@ -1,38 +1,45 @@
.card-deck
// Custom, as of bootstrap 4.1.3 there is no way to do this.
&.card-deck-responsive
@extend .row
.card
@extend .col-md-4
margin: 0 0 20px 0
$card-width-percentage: 30%
flex: 1 0 $card-width-percentage
max-width: $card-width-percentage
+media-xs
$card-width-percentage: 100%
flex: 1 0 $card-width-percentage
max-width: $card-width-percentage
+media-sm
flex: 1 0 50%
max-width: 50%
$card-width-percentage: 46%
flex: 1 0 $card-width-percentage
max-width: $card-width-percentage
margin-right: 100% / ($card-width-percentage / 1%)
+media-md
flex: 1 0 33%
max-width: 33%
$card-width-percentage: 30%
flex: 1 0 $card-width-percentage
max-width: $card-width-percentage
margin-right: 100% / ($card-width-percentage / 1%)
+media-lg
flex: 1 0 33%
max-width: 33%
$card-width-percentage: 30%
flex: 1 0 $card-width-percentage
max-width: $card-width-percentage
margin-right: 100% / ($card-width-percentage / 1%)
+media-xl
flex: 1 0 25%
max-width: 25%
$card-width-percentage: 22%
flex: 1 0 $card-width-percentage
max-width: $card-width-percentage
margin-right: ($card-width-percentage * 2) / ($card-width-percentage / 1%)
+media-xxl
flex: 1 0 20%
max-width: 20%
&.card-3-columns .card
+media-xl
flex: 1 0 33%
max-width: 33%
+media-xxl
flex: 1 0 33%
max-width: 33%
$card-width-percentage: 22%
flex: 1 0 $card-width-percentage
max-width: $card-width-percentage
margin-right: ($card-width-percentage * 2) / ($card-width-percentage / 1%)
&.card-deck-vertical
@extend .flex-column
@@ -43,6 +50,7 @@
@extend .w-100
@extend .flex-row
@extend .p-0
@extend .mb-2
flex: initial
flex-wrap: wrap
@@ -109,12 +117,10 @@ $card-progress-height: 5px
font-size: $font-size-xs
.card-img-top
background-color: $color-background
background-position: center
background-size: cover
object-fit: cover
.progress
height: $card-progress-height
position: absolute
@@ -122,15 +128,30 @@ $card-progress-height: 5px
width: 100%
z-index: 1
.card-img-top
&.card-icon
display: flex
align-items: center
justify-content: center
font-size: 2em
.card-thumbnail
@extend .embed-responsive
background-color: rgba($dark, .2)
border-top-left-radius: $card-inner-border-radius
border-top-right-radius: $card-inner-border-radius
color: $dark
i
opacity: .2
&:before
padding-top: 56.25%
.card-img-top
@extend .align-items-center
@extend .d-flex
@extend .h-100
@extend .position-absolute
bottom: 0
left: 50% !important
top: 0
transform: translateX(-50%)
width: auto !important
i
font-size: 3em
opacity: .2
/* Tiny label for cards. e.g. 'WATCHED' on videos. */
.card-label

2
src/styles/components/_dropdown.sass
View File

@@ -21,7 +21,7 @@ ul.dropdown-menu
// When not in mobile, open menus on mouse hover .dropdown in the navbar.
body:not(.is-mobile)
nav .dropdown:hover
nav .dropdown:not(.quick-search):hover
ul.dropdown-menu
display: block

15
src/styles/components/_navbar.sass
View File

@@ -291,3 +291,18 @@ body.is-mobile
.navbar+.page-content
padding-top: $nav-link-height
body.has-overlay
nav.navbar
background-color: $white !important
box-shadow: none !important
padding: 5px
transition: padding-top $short-transition ease-in-out, padding-bottom $short-transition ease-in-out
.nav-secondary
&:not(.keep-when-overlay)
opacity: 0
transition: opacity $short-transition, visibility $short-transition
visibility: hidden
display: none !important

112
src/styles/components/_search.sass
View File

@@ -1,87 +1,67 @@
#search-overlay
position: absolute
position: fixed
top: 0
left: 0
right: 0
bottom: 0
width: 100%
height: 100%
pointer-events: none
visibility: hidden
opacity: 0
z-index: $z-index-base + 4
transition: opacity 150ms ease-in-out
overflow-y: scroll
z-index: $zindex-sticky + 1
transition: visibility $long-transition, opacity $long-transition
&.active
&.show
opacity: 1
visibility: visible
background-color: rgba($color-background-nav, .7)
background-color: rgba($body-bg, .7)
.search-input
+media-lg
max-width: 350px
+media-md
max-width: 350px
+media-sm
max-width: 120px
+media-xs
display: block
margin: 0 10px
position: absolute
z-index: $z-index-base
right: 5px
position: relative
float: left
padding: 0
margin: 0
.qs-result
max-width: 80vw
.search-icon
position: absolute
top: 4px
left: 10px
cursor: pointer
#qs-toggle
opacity: 1
visibility: visible
&:after
@extend .tooltip-inner
.quick-search
opacity: 0
transition: opacity $short-transition
visibility: hidden
content: 'Use advanced search...'
font-size: .85em
font-style: normal
left: -10px
opacity: 0
pointer-events: none
position: absolute
top: 30px
transition: top 150ms ease-in-out, opacity 150ms ease-in-out
width: 150px
.quick-search.show
opacity: 1
visibility: visible
&:hover
&:after
opacity: 1
top: 35px
#cloud-search, .tt-hint
+text-overflow-ellipsis
border: thin solid $color-background
border-radius: 3px
font:
size: 1em
weight: 400
margin: 0
min-height: 32px
outline: none
padding: 0 20px 0 40px
transition: border 100ms ease-in-out
.qs-input
input
border-style: solid
border-radius: $border-radius
height: $input-height-inner
padding: $input-padding-y 25px $input-padding-y $input-padding-x
width: 30vw
&:focus
box-shadow: none
border: none
&+i+select
border-color: $color-primary
&::placeholder
color: rgba($color-text, .5)
transition: color 150ms ease-in-out
&.multi-scope // has a select next to it
border-right: none
border-bottom-right-radius: 0
border-top-right-radius: 0
&:hover
&::placeholder
color: rgba($color-text, .6)
select
border-width: 2px
border-left: none
border-bottom-right-radius: $border-radius
border-top-right-radius: $border-radius
height: $input-height-inner
margin-left: 5px
padding: $input-padding-y $input-padding-x
&:focus, option
// background-color: $dark
// color: $light
.qs-busy-symbol
margin-left: -2em

1
src/styles/theatre.sass
View File

@@ -40,6 +40,7 @@
@import "components/checkbox"
@import "components/overlay"
@import "components/card"
@import "components/search"
@import "comments"
@import "notifications"