Browse Source

update full-search.css (removed rules for co-web project).

I will need to update this as I go along. I copied the code over from my co-web
project so the webpages have been rendering with that style/design until
now. This commit has removed as much of it as possible and added/updated the
style rules to fall in-line with the design of this website.
stable
Craig Oates 1 year ago
parent
commit
f23b9b8a85
  1. 306
      static/css/full-search.css

306
static/css/full-search.css

@ -8,11 +8,7 @@
.refinements-panel h2,
.refinements-panel p {
padding: 0px;
margin: 0px;
}
.refinements-panel p {
color : silver;
font-size: 12px;
margin: 12px 0px;
}
#clear-refinements {
@ -25,42 +21,30 @@
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;
color: black;
background-color: white;
cursor: pointer;
text-transform: uppercase;
border: none;
text-align: left;
}
.ais-ClearRefinements-button:hover {
background: lightblue;
color: #0094ff;
text-decoration: none;
box-shadow: none;
text-decoration: underline;
}
.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;
color: slategrey;
}
.ais-ClearRefinements-button--disabled:hover {
background: transparent;
color: silver;
color: slategrey;
text-decoration: none;
cursor: initial;
}
.search-refinement-list {
margin: 20px 0px;
border-bottom: 2px solid black;
/* margin: 20px 0px; */
/* border-bottom: 2px solid black; */
}
#searchbox {
@ -89,22 +73,21 @@
}
.ais-SearchBox-input {
box-sizing: border-box;
width: 100%;
height: 40px;
margin-bottom: 15px;
padding: 10px;
border: 2px solid #0094ff;
border-radius: 4px;
font-family: 'main', sans-serif;
font-size: 16px;
border-radius: 8px;
border: 1px solid black;
}
.ais-SearchBox-input::placeholder {
font-family: 'main', sans-serif;
font-size: 16px;
/* font-family: 'main', sans-serif; */
/* font-size: 16px; */
}
.ais-SearchBox-form input:focus-visible {
outline: none;
/* outline: none; */
}
.ais-SearchBox-submitIcon,
@ -148,7 +131,7 @@
width: 100%;
min-width: 350px;
display: flex;
flex-direction: column;
flex-direction: row;
}
.ais-Hits-list {
@ -160,19 +143,42 @@
}
.ais-Hits-item {
margin: 12px 0px 12px 0px;
margin: 8px;
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;
/* border-color: lightblue; */
/* 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 {
@ -185,184 +191,35 @@
.ais-Pagination-list {
list-style: none;
padding: 0px;
margin: 0px;
margin: 0px 12px;
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;
font-size: 22px;
margin: 6px;
}
.ais-Pagination-item--firstPage a:before {
content: "First";
visibility: visible;
.ais-Pagination-item--disabled {
color: slategrey;
}
.ais-Pagination-item--previousPage a:before {
content: "Prev.";
visibility: visible;
}
/* @media (min-width:600px) {
.ais-ClearRefinements-button {
max-width: 200px;
}
} */
.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) {
/* @media (min-width:961px) { */
@media (min-width: 600px) {
.search-results-container {
flex-direction: row;
}
.refinements-panel {
max-width: 300px;
max-width: 200px;
width: 100%;
margin-right: 20px;
}
@ -397,22 +254,41 @@ style-rule below. Again, see URL above for more info. on this behaviour.
}
.ais-Hits-item {
width: 200px;
height: 280px;
margin: 12px;
height: 100%;
display: flex;
flex-direction: column;
/* width: 200px; */
/* height: 280px; */
/* margin: 12px; */
/* height: 100%; */
/* display: flex; */
/* 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 {
height: 75px;
/* white-space: nowrap; */
text-overflow: ellipsis;
.fe-search-hit-keywords {
display: block;
color: slategrey;
font-size: 11px;
}
.ais-Hits-item .ui-link-card .ui-card-text .ui-card-secondary {
text-overflow: ellipsis;
.fe-search-hit img {
width: 200px;
height: 100px;
object-fit: cover;
overflow: hidden;
}
}

Loading…
Cancel
Save