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

Search: Layout and styling

Browse Source
This commit is contained in:
Pablo Vazquez
2018-09-12 19:00:16 +02:00
parent c5fa6b9535
commit a97c8ffc93
6 changed files with 198 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

446
src/styles/_search.sass
View File

@@ -92,46 +92,51 @@ $search-hit-width_grid: 100px
&.tt-cursor:hover .search-hit
background-color: lighten($color-background, 5%)
#search-container
min-height: 600px
.search-list
width: 30%
+media-lg
padding-left: 0
padding-right: 0
.card-deck.card-deck-horizontal
.card .embed-responsive
max-width: 80px
#search-list
width: 40%
position: relative
overflow-x: hidden
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%
#search-details
position: relative
#search-hit-container
position: absolute // for scrollbars
overflow-y: auto
#hits
#error_container
position: relative
width: 100%
background: white
padding: 20px
#no-hits
padding: 10px 15px
color: $color-text-dark-secondary
#search-details
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-error
display: none
margin: 20px auto
color: $color-danger
text-align: center
#search-container
#node-container
width: 100%
max-width: 100%
@@ -284,109 +289,78 @@ $search-hit-width_grid: 100px
button
width: 100%
#project_sidebar+#search-sidebar,
#project_sidebar+#search-sidebar+#search-container
padding-left: $sidebar-width
.search-project
li.project
display: none
#search-sidebar
width: 20%
background-color: $color-background-light
+media-lg
border-top-left-radius: 3px
input.search-field
.card
margin-bottom: 10px
border-radius: 3px
border: none
border-bottom: 2px solid rgba($primary, .2)
border-radius: 0
width: 100%
transition: border 100ms ease-in-out
background-color: white
box-shadow: 1px 1px 0 rgba(black, .1)
&::placeholder
color: $color-text-dark-secondary
&:placeholder-shown
border-bottom-color: $primary
a
text-decoration: none
&:focus
outline: none
border: none
border-bottom: 2px solid lighten($primary, 5%)
.toggleRefine
display: block
padding-left: 7px
color: $color-text-dark
text-transform: capitalize
.search-list-filters
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
&:hover
text-decoration: none
color: $primary
.toggleRefine
display: block
padding-left: 7px
color: $color-text-dark
text-transform: capitalize
&.refined
color: $primary
&:hover
text-decoration: none
color: $primary
color: $color-danger
&.refined
color: $primary
&:hover
color: $color-danger
span
&:before
/* x icon */
content: '\e84b'
font-family: 'pillar-font'
span
&:before
/* circle with dot */
content: '\e82f'
/* x icon */
content: '\e84b'
font-family: 'pillar-font'
position: relative
left: -7px
font-size: .9em
span
&:before
/* empty circle */
content: '\e82c'
/* circle with dot */
content: '\e82f'
font-family: 'pillar-font'
position: relative
left: -7px
font-size: .9em
.facet_count
color: $color-text-dark-secondary
.panel-title, .panel-heading
color: $color-text-dark-secondary
font:
size: 1em
weight: 500
.panel-body
padding-top: 0
.panel-title
position: relative
&:after
content: '\e83b'
span
&:before
/* empty circle */
content: '\e82c'
font-family: 'pillar-font'
position: absolute
right: 0
color: $color-text-dark-primary
position: relative
left: -7px
font-size: .9em
.facet_count
color: $color-text-dark-secondary
.collapsed
.panel-title:after
content: '\e838'
.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
@@ -396,241 +370,37 @@ $search-hit-width_grid: 100px
font-size: .9em
+clearfix
#pagination
ul.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
.search-hit
+clearfix
float: left
.search-pagination
text-align: center
list-style-type: none
margin: 0
padding: 7px 10px 7px 10px
position: relative
padding: 0
width: 100%
display: flex
+clearfix
&:first-child
border: thin solid transparent
border-left: 3px solid transparent
li
display: inline-block
margin: 5px auto
&:hover
opacity: 1
text-decoration: none
cursor: default
color: darken($primary, 20%)
background-color: $color-background-light
&:last-child
border-color: transparent
& .search-hit-name i
color: darken($primary, 20%)
a
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
color: darken($primary, 10%)
color: $color-text-dark-primary
.search-hit-thumbnail
cursor: pointer
&.disabled
opacity: .6
.search-hit-thumbnail-icon
transform: translate(-50%, -50%) scale(1)
&.active a
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
display: flex

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

@@ -21,6 +21,25 @@
flex: 1 0 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
@@ -90,3 +109,8 @@
position: absolute
padding: 1px 5px
z-index: 1
.card
&.active
.card-title
color: $primary

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

@@ -7,7 +7,7 @@ nav.sidebar
border: none
color: $color-text-dark-secondary
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
margin-left: auto