From f23b9b8a857a7607d80aafdc4763e28529d10f82 Mon Sep 17 00:00:00 2001 From: Craig Oates Date: Mon, 17 Oct 2022 20:45:40 +0100 Subject: [PATCH] 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. --- static/css/full-search.css | 306 +++++++++++-------------------------- 1 file changed, 91 insertions(+), 215 deletions(-) diff --git a/static/css/full-search.css b/static/css/full-search.css index 23a8d3d..46db302 100644 --- a/static/css/full-search.css +++ b/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; } }