-
-
-
- Results Page Head from layout
-
+
+
+
+ Results Page Head from layout
+
+
+
+
{% include footer.html %}
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index 3a9dcc5e6d..b3ee3c3775 100755
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -1039,14 +1039,25 @@ body {
display: flex;
align-items: flex-start;
justify-content: center;
- gap: 20px;
- margin: 0 auto;
+ gap: 0;
+ border-top: 1px solid #eeebee;
+ flex-direction: column;
+ @include mq(md) {
+ flex-direction: row;
+ gap: 20px
+ }
}
.search-page--sidebar {
- flex: 1;
- max-width: 200px;
- flex: 0 0 200px;
+ max-width: 100%;
+ order: 2;
+ margin-top: 1rem;
+ color: $grey-dk-300;
+ @include mq(md) {
+ flex: 1;
+ max-width: 200px;
+ margin-top: 3rem;
+ }
}
.search-page--sidebar--category-filter--checkbox-child {
@@ -1054,52 +1065,96 @@ body {
}
.search-page--results {
- flex: 3;
display: flex;
flex-direction: column;
align-items: center;
- max-width: 60%;
+ width: 100%;
+ max-width: 100%;
+ order: 3;
+ @include mq(md) {
+ flex: 3;
+ max-width: 60%;
+ }
}
-.search-page--results--input {
- width: 100%;
+.search-page--results--wrapper {
position: relative;
+ display: flex;
+ width: 100%;
+ background-color: white;
+ margin: 0 auto 2rem;
+ max-width: 800px;
}
.search-page--results--input-box {
width: 100%;
- padding: 10px;
- margin-bottom: 20px;
- border: 1px solid #ccc;
+ padding: 10px 40px 10px 10px;
+ border: 1px solid $grey-lt-300;
border-radius: 4px;
+ color: $grey-dk-300;
}
.search-page--results--input-icon {
position: absolute;
- top: 35%;
- right: 10px;
- transform: translateY(-50%);
+ right: 12px;
+ align-self: center;
pointer-events: none;
- color: #333;
+ color: $grey-dk-000;
}
-.search-page--results--diplay {
+.search-page--results--display {
width: 100%;
position: relative;
flex-flow: column nowrap;
+ margin-top: 1rem;
+ @media (max-width: $content-width) {
+ margin-top: 0.5rem;
+ }
}
-.search-page--results--diplay--header {
+.search-page--results--display--header {
text-align: center;
- margin-bottom: 20px;
background-color: transparent;
+ color: $grey-dk-300;
+ margin-bottom: 1rem;
+ margin-top: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid $blue-dk-100;
+ font-size: 20px;
+ @include mq(md) {
+ font-size: 1.5rem;
+ }
}
-.search-page--results--diplay--container--item {
- margin-bottom: 1%;
+.search-page--results--display--container--item {
+ margin-bottom: 2rem;
display: block;
}
+.search-page--results--no-results {
+ padding: 1rem;
+ display: block;
+ font-size: 1rem;
+ font-weight: normal;
+}
+
+.search-page--results--display--container--item--link {
+ font-family: "Open Sans Condensed", Impact, "Franklin Gothic Bold", sans-serif;
+ font-size: 1.2rem;
+ font-weight: bold;
+ display: block;
+ text-decoration: underline;
+ text-underline-offset: 5px;
+ text-decoration-color: $grey-lt-300;
+ &:hover {
+ text-decoration-color: $blue-100;
+ }
+}
+
+.category-checkbox {
+ margin-right: 4px;
+}
+
@mixin body-text($color: #000) {
color: $color;
font-family: 'Open Sans';
diff --git a/assets/js/search.js b/assets/js/search.js
index 4d4fce62f3..86970d9544 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -173,7 +173,10 @@
const showNoResults = () => {
emptyResults();
- elResults.appendChild(document.createRange().createContextualFragment('No results found!'));
+ const resultElement = document.createElement('div');
+ resultElement.classList.add('search-page--results--no-results');
+ resultElement.appendChild(document.createRange().createContextualFragment('No results found.'));
+ elResults.appendChild(resultElement);
showResults();
elSpinner?.classList.remove(CLASSNAME_SPINNING);
};
@@ -278,8 +281,6 @@
window.doResultsPageSearch = async (query, type, version) => {
- console.log("Running results page search!");
-
const searchResultsContainer = document.getElementById('searchPageResultsContainer');
try {
@@ -291,7 +292,7 @@ window.doResultsPageSearch = async (query, type, version) => {
if (data.results && data.results.length > 0) {
data.results.forEach(result => {
const resultElement = document.createElement('div');
- resultElement.classList.add('search-page--results--diplay--container--item');
+ resultElement.classList.add('search-page--results--display--container--item');
const contentCite = document.createElement('cite');
const crumbs = [...result.ancestors];
@@ -302,11 +303,9 @@ window.doResultsPageSearch = async (query, type, version) => {
const titleLink = document.createElement('a');
titleLink.href = result.url;
+ titleLink.classList.add('search-page--results--display--container--item--link');
titleLink.textContent = result.title;
- titleLink.style.fontSize = '1.5em';
- titleLink.style.fontWeight = 'bold';
- titleLink.style.display = 'block';
-
+
const contentSpan = document.createElement('span');
contentSpan.textContent = result.content;
contentSpan.style.display = 'block';
@@ -317,16 +316,10 @@ window.doResultsPageSearch = async (query, type, version) => {
// Append the result element to the searchResultsContainer
searchResultsContainer.appendChild(resultElement);
-
- const breakline = document.createElement('hr');
- breakline.style.borderTop = '.5px solid #ccc';
- breakline.style.margin = 'auto';
- searchResultsContainer.appendChild(breakline);
});
} else {
const noResultsElement = document.createElement('div');
noResultsElement.textContent = 'No results found.';
- noResultsElement.style.fontSize = '2em';
searchResultsContainer.appendChild(noResultsElement);
}
} catch (error) {
+
+
-
+
+
+
+
+
+
+