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.
419 lines
9.2 KiB
419 lines
9.2 KiB
2 years ago
|
.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;
|
||
|
}
|
||
|
|
||
|
}
|