@ -8,11 +8,7 @@
. refinements-panel h2 ,
. refinements-panel h2 ,
. refinements-panel p {
. refinements-panel p {
padding : 0px ;
padding : 0px ;
margin : 0px ;
margin : 12px 0px ;
}
. refinements-panel p {
color : silver ;
font-size : 12px ;
}
}
# clear-refinements {
# clear-refinements {
@ -25,42 +21,30 @@
width : 100 % ;
width : 100 % ;
margin : 0px ;
margin : 0px ;
font-family : 'main' , sans-serif ;
font-family : 'main' , sans-serif ;
color : white ;
color : black ;
background-color : # 0094ff ;
background-color : white ;
box-shadow : 2px 2px 1px black ;
border-radius : 4px ;
padding : 10px ;
cursor : pointer ;
cursor : pointer ;
text-transform : uppercase ;
border : none ;
border : none ;
text-align : left ;
}
}
. ais-ClearRefinements-button : hover {
. ais-ClearRefinements-button : hover {
background : lightblue ;
text-decoration : underline ;
color : # 0094ff ;
text-decoration : none ;
box-shadow : none ;
}
}
. ais-ClearRefinements-button--disabled {
. ais-ClearRefinements-button--disabled {
text-align : center ;
color : slategrey ;
padding : 10px ;
border : 2px solid silver ;
border-radius : 4px ;
text-transform : uppercase ;
color : silver ;
background : transparent ;
box-shadow : none ;
}
}
. ais-ClearRefinements-button--disabled : hover {
. ais-ClearRefinements-button--disabled : hover {
background : transparent ;
color : slategrey ;
color : silver ;
text-decoration : none ;
cursor : initial ;
}
}
. search-refinement-list {
. search-refinement-list {
margin : 20px 0px ;
/* margin: 20px 0px; */
border-bottom : 2px solid black ;
/* border-bottom: 2px solid black; */
}
}
# searchbox {
# searchbox {
@ -89,22 +73,21 @@
}
}
. ais-SearchBox-input {
. ais-SearchBox-input {
box-sizing : border-box ;
width : 100 % ;
width : 100 % ;
height : 40 px;
margin-bottom : 15 px;
padding : 10px ;
padding : 10px ;
border : 2px solid # 0094ff ;
border-radius : 8px ;
border-radius : 4px ;
border : 1px solid black ;
font-family : 'main' , sans-serif ;
font-size : 16px ;
}
}
. ais-SearchBox-input :: placeholder {
. ais-SearchBox-input :: placeholder {
font-family : 'main' , sans-serif ;
/* font-family: 'main', sans-serif; */
font-size : 16px ;
/* font-size: 16px; */
}
}
. ais-SearchBox-form input : focus-visible {
. ais-SearchBox-form input : focus-visible {
outline : none ;
/* outline: none; */
}
}
. ais-SearchBox-submitIcon ,
. ais-SearchBox-submitIcon ,
@ -148,7 +131,7 @@
width : 100 % ;
width : 100 % ;
min-width : 350px ;
min-width : 350px ;
display : flex ;
display : flex ;
flex-direction : column ;
flex-direction : row ;
}
}
. ais-Hits-list {
. ais-Hits-list {
@ -160,19 +143,42 @@
}
}
. ais-Hits-item {
. ais-Hits-item {
margin : 12px 0px 12px 0 px;
margin : 8 px;
max-height : 400px ;
max-height : 400px ;
border : 2px # 0094ff solid ;
border-radius : 4px ;
border-radius : 4px ;
overflow : hidden ;
overflow : hidden ;
display : flex ;
display : flex ;
flex-direction : column ;
flex-direction : column ;
box-shadow : 3px 3px 3px black ;
}
}
. ais-Hits-item : hover {
. ais-Hits-item : hover {
border-color : lightblue ;
/* border-color: lightblue; */
box-shadow : none ;
/* box-shadow: none; */
}
. fe-search-hit {
max-width : 375px ;
}
. fe-search-hit-title {
font-weight : bold ;
}
. fe-search-hit-secondary {
display : block ;
}
. fe-search-hit-keywords {
display : block ;
color : slategrey ;
font-size : 11px ;
}
. fe-search-hit img {
width : 375px ;
height : 200px ;
object-fit : cover ;
overflow : hidden ;
}
}
# pagination {
# pagination {
@ -185,184 +191,35 @@
. ais-Pagination-list {
. ais-Pagination-list {
list-style : none ;
list-style : none ;
padding : 0px ;
padding : 0px ;
margin : 0px ;
margin : 0px 12px ;
display : flex ;
display : flex ;
justify-content : center ;
justify-content : center ;
align-items : center ;
align-items : center ;
}
}
. ais-Pagination-item {
. ais-Pagination-item {
margin : 0px ;
font-size : 22px ;
display : flex ;
margin : 6px ;
justify-content : center ;
align-items : center ;
max-width : 64px ;
height : 50px ;
}
/ * Hack to change content of pagination links
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
https : / / stackoverflow . com / questions / 48907242 / how-can-i-remove-and-replace-content-in-a-html-tag-using-css
Because Meilsearch adds the pagination stuff via JavaScript , I can ' t set the
contents of the various HTML elements via the djula templates . This means I have
to update the content after it 's loaded. I didn' t want to do this via JavaScript
because I want to keep the JavaScript to a minimum . So , to fix the problem , I
came across a hack ( see Stack Overflow URL above ) . You need to change the
visibility ( to hidden ) of the element ( s ) you want to change and then use the
'content' property to set the new text value . When that is done , you adjust the
element 's visibility back to ' visible ' .
I ACKNOWLEDGE THIS IS JACKY BUT IT WORKS .
* /
. ais-Pagination-item--firstPage a ,
. ais-Pagination-item--previousPage a ,
. ais-Pagination-item--nextPage a {
visibility : hidden ;
}
/ * Meilisearch not designed for extended pagination use ( disabled 'Last' link )
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
https : / / github . com / meilisearch / documentation / issues / 561
Meilisearch adds a 'Last Page' link with its built-in pagination features . With
that said , the people developing the project acknowledge Meilisearch ' s
pagination features are limited . They recommend on not using or relying on it
too much . See the URL above for more information .
Whilst developing this part of the site , I found the 'Last Page' link was
behaving inconsistently . You would click the link and it would jump ahead
( I . E . more than one page ) but it took several clicks to get to the ' final / last
page '. Because of that, I' ve just turned it off by hiding it with the
style-rule below . Again , see URL above for more info . on this behaviour .
* /
. ais-Pagination-item . ais-Pagination-item--lastPage {
display : none ;
}
. ais-Pagination-item--firstPage . ais-Pagination-item--disabled span ,
. ais-Pagination-item--previousPage . ais-Pagination-item--disabled span ,
. ais-Pagination-item--nextPage . ais-Pagination-item--disabled span {
visibility : hidden ;
}
/ * The new text is set here : See 'Hack to change content of pagination links'
note above for more information . * /
. ais-Pagination-item--firstPage . ais-Pagination-item--disabled span : before {
content : "First" ;
visibility : visible ;
}
. ais-Pagination-item--previousPage . ais-Pagination-item--disabled span : before {
content : "Prev." ;
visibility : visible ;
}
. ais-Pagination-item--nextPage . ais-Pagination-item--disabled span : before {
content : "Next" ;
visibility : visible ;
margin-left : 8px ;
}
. ais-Pagination-item--firstPage . ais-Pagination-item--disabled span : before ,
. ais-Pagination-item--previousPage . ais-Pagination-item--disabled span : before ,
. ais-Pagination-item--nextPage . ais-Pagination-item--disabled span : before {
width : 70px ;
height : 39px ;
text-transform : uppercase ;
border : 2px solid silver ;
border-radius : 4px ;
text-align : center ;
padding : 8px ;
color : silver ;
}
}
. ais-Pagination-item--firstPage a : before {
. ais-Pagination-item--disabled {
content : "First" ;
color : slategrey ;
visibility : visible ;
}
}
. ais-Pagination-item--previousPage a : before {
/ * @ media ( min-width : 600px ) {
content : "Prev." ;
. ais-ClearRefinements-button {
visibility : visible ;
max-width : 200px ;
}
}
} * /
. ais-Pagination-item--nextPage a : before {
/* @media (min-width:961px) { */
content : "Next" ;
@ media ( min-width : 600px ) {
visibility : visible ;
margin-left : 8px ;
}
. ais-Pagination-item--firstPage a : link :: before ,
. ais-Pagination-item--previousPage a : link :: before ,
. ais-Pagination-item--nextPage a : link :: before {
width : 100 % ;
height : 39px ;
text-transform : uppercase ;
background : # 0094ff ;
color : white ;
border : 2px solid # 0094ff ;
border-radius : 4px ;
text-align : center ;
padding : 8px ;
text-decoration : none ;
box-shadow : 2px 2px 3px black ;
}
. ais-Pagination-item--page a : link {
background : # 0094ff ;
color : white ;
padding : 10px ;
border-radius : 4px ;
text-transform : uppercase ;
text-decoration : none ;
margin : 0px 2px ;
box-shadow : 2px 2px 3px black ;
}
. ais-Pagination-item--selected a : link ,
. ais-Pagination-item--selected a : hover {
background : silver ! important ;
color : white ;
box-shadow : none ;
}
. ais-Pagination-item--page a : hover {
background : lightblue ;
text-decoration : none ;
box-shadow : none ;
}
. ais-Pagination-item--firstPage a : hover :: before ,
. ais-Pagination-item--previousPage a : hover :: before ,
. ais-Pagination-item--nextPage a : hover :: before {
background : lightblue ;
border : 2px solid lightblue ;
border-radius : 4px ;
text-align : center ;
color : # 0094ff ;
box-shadow : none ;
}
. ais-Pagination-item--firstPage a : hover ,
. ais-Pagination-item--previousPage a : hover ,
. ais-Pagination-item--nextPage a : hover {
text-decoration : none ! important ;
}
@ media ( min-width : 600px ) {
. ais-ClearRefinements-button {
max-width : 200px ;
}
}
@ media ( min-width : 961px ) {
. search-results-container {
. search-results-container {
flex-direction : row ;
flex-direction : row ;
}
}
. refinements-panel {
. refinements-panel {
max-width : 3 00px;
max-width : 200px ;
width : 100 % ;
width : 100 % ;
margin-right : 20px ;
margin-right : 20px ;
}
}
@ -397,22 +254,41 @@ style-rule below. Again, see URL above for more info. on this behaviour.
}
}
. ais-Hits-item {
. ais-Hits-item {
width : 200px ;
/* width: 200px; */
height : 280px ;
/* height: 280px; */
margin : 12px ;
/* margin: 12px; */
height : 100 % ;
/* height: 100%; */
display : flex ;
/* display: flex; */
flex-direction : column ;
/* flex-direction: column; */
}
. fe-search-hit {
max-width : 200px ;
}
. fe-search-hit-title {
font-weight : bold ;
display : -webkit-box ;
-webkit-box-orient : vertical ;
-webkit-line-clamp : 2 ;
overflow : hidden ;
}
. fe-search-hit-secondary {
display : block ;
}
}
. ais-Hits-item . ui-link-card . ui-card-text {
. fe-search-hit-keywords {
height : 75px ;
display : block ;
/* white-space: nowrap; */
color : slategrey ;
text-overflow : ellipsis ;
font-size : 11px ;
}
}
. ais-Hits-item . ui-link-card . ui-card-text . ui-card-secondary {
. fe-search-hit img {
text-overflow : ellipsis ;
width : 200px ;
height : 100px ;
object-fit : cover ;
overflow : hidden ;
}
}
}
}