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

Search: Cleanup and minor fixes.

Browse Source
This commit is contained in:
Pablo Vazquez
2018-09-10 11:56:31 +02:00
parent 5cc5698477
commit 9b62daec74
2 changed files with 30 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/styles/_search.sass
View File

@@ -16,7 +16,7 @@ $search-hit-width_grid: 100px
.search-hit-name .search-hit-name
font-weight: 400 font-weight: 400
padding-top: 8px padding-top: 8px
color: $color-primary-dark color: $primary
.search-hit .search-hit
padding: 0 padding: 0
@@ -35,7 +35,7 @@ $search-hit-width_grid: 100px
+clearfix +clearfix
& em & em
color: $color-primary-dark color: $primary
font-style: normal font-style: normal
&:hover &:hover
@@ -70,7 +70,7 @@ $search-hit-width_grid: 100px
min-width: 350px min-width: 350px
border-bottom-left-radius: 3px border-bottom-left-radius: 3px
border-bottom-right-radius: 3px border-bottom-right-radius: 3px
border-top: 3px solid lighten($color-primary, 5%) border-top: 3px solid lighten($primary, 5%)
overflow: hidden overflow: hidden
.tt-suggestion .tt-suggestion
@@ -93,9 +93,7 @@ $search-hit-width_grid: 100px
background-color: lighten($color-background, 5%) background-color: lighten($color-background, 5%)
#search-container #search-container
display: flex
min-height: 600px min-height: 600px
background-color: white
+media-lg +media-lg
padding-left: 0 padding-left: 0
@@ -103,8 +101,6 @@ $search-hit-width_grid: 100px
#search-list #search-list
width: 40% width: 40%
height: 100%
padding: 0
position: relative position: relative
overflow-x: hidden overflow-x: hidden
overflow-y: auto overflow-y: auto
@@ -117,48 +113,12 @@ $search-hit-width_grid: 100px
padding: 10px 15px padding: 10px 15px
color: $color-text-dark-secondary color: $color-text-dark-secondary
.search-hit
#search-loading
visibility: hidden
background-color: transparent
font:
size: 1.5em
weight: 600
position: absolute
top: 0
left: 0
right: 0
bottom: 0
z-index: $z-index-base + 5
opacity: 0
cursor: default
transition: opacity 50ms ease-in-out
&.active
visibility: visible
opacity: 1
.spinner
color: $color-background-nav
background-color: white
padding: 0
width: 20px
height: 20px
border-radius: 50%
position: absolute
top: 7px
right: 10px
span
padding: 5px
+pulse
#search-details #search-details
position: relative position: relative
width: 40% width: 40%
border-left: 2px solid darken(white, 3%)
#search-hit-container #search-hit-container
position: absolute // for scrollbars position: absolute // for scrollbars
width: 100%
overflow-y: auto overflow-y: auto
#error_container #error_container
@@ -334,7 +294,7 @@ $search-hit-width_grid: 100px
input.search-field input.search-field
margin-bottom: 10px margin-bottom: 10px
border: none border: none
border-bottom: 2px solid rgba($color-primary, .2) border-bottom: 2px solid rgba($primary, .2)
border-radius: 0 border-radius: 0
width: 100% width: 100%
transition: border 100ms ease-in-out transition: border 100ms ease-in-out
@@ -342,12 +302,12 @@ $search-hit-width_grid: 100px
&::placeholder &::placeholder
color: $color-text-dark-secondary color: $color-text-dark-secondary
&:placeholder-shown &:placeholder-shown
border-bottom-color: $color-primary border-bottom-color: $primary
&:focus &:focus
outline: none outline: none
border: none border: none
border-bottom: 2px solid lighten($color-primary, 5%) border-bottom: 2px solid lighten($primary, 5%)
.search-list-filters .search-list-filters
padding: padding:
@@ -372,10 +332,10 @@ $search-hit-width_grid: 100px
&:hover &:hover
text-decoration: none text-decoration: none
color: $color-primary color: $primary
&.refined &.refined
color: $color-primary color: $primary
&:hover &:hover
color: $color-danger color: $color-danger
@@ -470,19 +430,12 @@ $search-hit-width_grid: 100px
.search-hit .search-hit
+clearfix
float: left float: left
box-shadow: none
border: thin solid transparent
border-top-color: darken(white, 8%)
border-left: 3px solid transparent
color: $color-background-nav
width: 100%
position: relative
margin: 0 margin: 0
padding: 7px 10px 7px 10px padding: 7px 10px 7px 10px
+clearfix position: relative
width: 100%
&:first-child &:first-child
border: thin solid transparent border: thin solid transparent
@@ -492,11 +445,11 @@ $search-hit-width_grid: 100px
opacity: 1 opacity: 1
text-decoration: none text-decoration: none
cursor: default cursor: default
color: darken($color-primary, 20%) color: darken($primary, 20%)
background-color: $color-background-light background-color: $color-background-light
& .search-hit-name i & .search-hit-name i
color: darken($color-primary, 20%) color: darken($primary, 20%)
& .search-hit-thumbnail & .search-hit-thumbnail
& .search-hit-thumbnail-icon & .search-hit-thumbnail-icon
@@ -505,7 +458,7 @@ $search-hit-width_grid: 100px
.search-hit-name .search-hit-name
text-decoration: none text-decoration: none
&:hover &:hover
color: darken($color-primary, 10%) color: darken($primary, 10%)
.search-hit-thumbnail .search-hit-thumbnail
cursor: pointer cursor: pointer
@@ -516,20 +469,20 @@ $search-hit-width_grid: 100px
&:active &:active
background-color: rgba($color-background, .5) background-color: rgba($color-background, .5)
opacity: .8 opacity: .8
color: $color-primary color: $primary
& .search-hit-name i & .search-hit-name i
color: $color-primary color: $primary
&:focus &:focus
border-color: rgba($color-primary, .2) border-color: rgba($primary, .2)
/* Class that gets added when we click on the item */ /* Class that gets added when we click on the item */
&.active &.active
background-color: lighten($color-background, 2%) background-color: lighten($color-background, 2%)
border-left: 3px solid $color-primary box-shadow: inset -3px 0 $primary
.search-hit-name .search-hit-name
color: darken($color-primary, 10%) color: darken($primary, 10%)
.search-hit-meta .search-hit-meta
span.when span.when
@@ -598,7 +551,7 @@ $search-hit-width_grid: 100px
text-decoration: underline text-decoration: underline
em em
color: darken($color-primary, 15%) color: darken($primary, 15%)
font-style: normal font-style: normal
.search-hit-ribbon .search-hit-ribbon
@@ -660,12 +613,12 @@ $search-hit-width_grid: 100px
&:hover &:hover
cursor: pointer cursor: pointer
.search-hit-name-user .search-hit-name-user
color: $color-primary color: $primary
&.users &.users
em em
font-style: normal font-style: normal
color: $color-primary color: $primary
.search-hit-name .search-hit-name
font-size: 1.2em font-size: 1.2em
@@ -699,13 +652,13 @@ $search-hit-width_grid: 100px
transition: border-color 150ms ease-in-out transition: border-color 150ms ease-in-out
&.active &.active
background-color: $color-primary background-color: $primary
border-color: $color-primary border-color: $primary
.search-hit-name .search-hit-name
font-weight: 500 font-weight: 500
color: white color: white
background-color: $color-primary background-color: $primary
.search-hit-name .search-hit-name
font-size: .9em font-size: .9em
@@ -769,5 +722,5 @@ $search-hit-width_grid: 100px
&.active &.active
color: white color: white
background-color: $color-primary background-color: $primary
border-color: transparent border-color: transparent

8
src/templates/nodes/search.pug
View File

@@ -28,7 +28,7 @@ script.
document.body.dataset["projectId"] = "{{project._id}}"; document.body.dataset["projectId"] = "{{project._id}}";
| {% endif %} | {% endif %}
#search-container #search-container.d-flex
| {% if project %} | {% if project %}
#project_sidebar.bg-white #project_sidebar.bg-white
@@ -79,12 +79,12 @@ script.
.search-list-stats .search-list-stats
#stats #stats
#search-list #search-list.h-100
#hits #hits
#search-details #search-details.border-left
#search-error #search-error
#search-hit-container #search-hit-container.w-100
| {% raw %} | {% raw %}