Public archive for the Return to Ritherdon project.
https://www.nicolaellisandritherdon.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
418 lines
9.2 KiB
418 lines
9.2 KiB
.search-dashboard { |
|
margin: 0px; |
|
padding: 0px; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.refinements-panel h2, |
|
.refinements-panel p { |
|
padding: 0px; |
|
margin: 0px; |
|
} |
|
.refinements-panel p { |
|
color : silver; |
|
font-size: 12px; |
|
} |
|
|
|
#clear-refinements { |
|
margin-bottom: 20px; |
|
} |
|
|
|
.ais-ClearRefinements-button { |
|
font-size: 16px; |
|
height: 40px; |
|
width: 100%; |
|
margin: 0px; |
|
font-family: 'main', sans-serif; |
|
color: white; |
|
background-color: #0094ff; |
|
box-shadow: 2px 2px 1px black; |
|
border-radius: 4px; |
|
padding: 10px; |
|
cursor: pointer; |
|
text-transform: uppercase; |
|
border: none; |
|
} |
|
|
|
.ais-ClearRefinements-button:hover { |
|
background: lightblue; |
|
color: #0094ff; |
|
text-decoration: none; |
|
box-shadow: none; |
|
} |
|
|
|
.ais-ClearRefinements-button--disabled { |
|
text-align: center; |
|
padding: 10px; |
|
border: 2px solid silver; |
|
border-radius: 4px; |
|
text-transform: uppercase; |
|
color: silver; |
|
background: transparent; |
|
box-shadow: none; |
|
} |
|
|
|
.ais-ClearRefinements-button--disabled:hover { |
|
background: transparent; |
|
color: silver; |
|
} |
|
|
|
.search-refinement-list { |
|
margin: 20px 0px; |
|
border-bottom: 2px solid black; |
|
} |
|
|
|
#searchbox { |
|
width: 100%; |
|
margin-top: 20px; |
|
margin-bottom: 20px; |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
|
|
.ais-SearchBox, |
|
.ais-ClearRefinements-button { |
|
max-width: 600px; |
|
} |
|
|
|
.search-results-container { |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.ais-SearchBox-form { |
|
display: flex; |
|
flex-wrap: nowrap; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.ais-SearchBox-input { |
|
width: 100%; |
|
height: 40px; |
|
padding: 10px; |
|
border: 2px solid #0094ff; |
|
border-radius: 4px; |
|
font-family: 'main', sans-serif; |
|
font-size: 16px; |
|
} |
|
|
|
.ais-SearchBox-input::placeholder { |
|
font-family: 'main', sans-serif; |
|
font-size: 16px; |
|
} |
|
|
|
.ais-SearchBox-form input:focus-visible { |
|
outline: none; |
|
} |
|
|
|
.ais-SearchBox-submitIcon, |
|
.ais-SearchBox-submit, |
|
.ais-SearchBox-reset { |
|
display: none; |
|
} |
|
|
|
.ais-RefinementList-list { |
|
list-style: none; |
|
padding: 0px; |
|
margin: 0px 0px 40px 0px; |
|
display: flex; |
|
flex-direction: row; |
|
width: 100%; |
|
overflow: scroll; |
|
} |
|
|
|
.ais-RefinementList-label { |
|
display: flex; |
|
align-items: center ; |
|
width: max-content; |
|
margin-right: 6px; |
|
} |
|
|
|
.ais-RefinementList-label > span { |
|
padding: 0px 2px; |
|
} |
|
|
|
.ais-RefinementList-checkbox { |
|
width: 30px; |
|
height: 30px; |
|
margin: 0px; |
|
} |
|
|
|
.search-hits-panel { |
|
width: -webkit-fill-available; |
|
} |
|
|
|
#hits { |
|
width: 100%; |
|
min-width: 350px; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.ais-Hits-list { |
|
padding: 0px; |
|
margin: 0px; |
|
display: flex; |
|
flex-direction: column; |
|
list-style: none; |
|
} |
|
|
|
.ais-Hits-item { |
|
margin: 12px 0px 12px 0px; |
|
max-height: 400px; |
|
border: 2px #0094ff solid; |
|
border-radius: 4px; |
|
overflow: hidden; |
|
display: flex; |
|
flex-direction: column; |
|
box-shadow: 3px 3px 3px black; |
|
} |
|
|
|
.ais-Hits-item:hover { |
|
border-color: lightblue; |
|
box-shadow: none; |
|
} |
|
|
|
#pagination { |
|
display: block; |
|
margin: 40px 0px 40px 0px; |
|
overflow: auto; |
|
width: 100%; |
|
} |
|
|
|
.ais-Pagination-list { |
|
list-style: none; |
|
padding: 0px; |
|
margin: 0px; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.ais-Pagination-item { |
|
margin: 0px; |
|
display: flex; |
|
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 { |
|
content: "First"; |
|
visibility: visible; |
|
} |
|
|
|
.ais-Pagination-item--previousPage a:before { |
|
content: "Prev."; |
|
visibility: visible; |
|
} |
|
|
|
.ais-Pagination-item--nextPage a:before { |
|
content: "Next"; |
|
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 { |
|
flex-direction: row; |
|
} |
|
|
|
.refinements-panel { |
|
max-width: 300px; |
|
width: 100%; |
|
margin-right: 20px; |
|
} |
|
|
|
.ais-RefinementList-list { |
|
font-size: 12px; |
|
flex-direction: column; |
|
overflow: auto; |
|
} |
|
|
|
.ais-RefinementList-item { |
|
margin: 2px 0px; |
|
} |
|
|
|
.ais-RefinementList-checkbox { |
|
width: 20px; |
|
margin-right: 4px; |
|
} |
|
|
|
#hits { |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.ais-Hits-list { |
|
padding: 0px; |
|
margin: 0px; |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
list-style: none; |
|
} |
|
|
|
.ais-Hits-item { |
|
width: 200px; |
|
height: 280px; |
|
margin: 12px; |
|
height: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.ais-Hits-item .ui-link-card .ui-card-text { |
|
height: 75px; |
|
/* white-space: nowrap; */ |
|
text-overflow: ellipsis; |
|
} |
|
|
|
.ais-Hits-item .ui-link-card .ui-card-text .ui-card-secondary { |
|
text-overflow: ellipsis; |
|
} |
|
|
|
}
|
|
|