Skip to content

Commit

Permalink
Make search results page responsive (opensearch-project#8397)
Browse files Browse the repository at this point in the history 
Signed-off-by: Fanit Kolchina <[email protected]>
  • Loading branch information
@kolchfa-aws
kolchfa-aws authored Oct 1, 2024
1 parent 4bb49d3 commit 5e5b6d1
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 79 deletions.
99 changes: 55 additions & 44 deletions _layouts/search_layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,59 +20,70 @@

<div class="main-content-wrap-home">
<div id="main-content" class="main-content" role="main">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Results Page Head from layout</title>
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Results Page Head from layout</title>
</head>

<div class="search-page--wrapper">
<!-- Search input box at the top -->
<div class="search-page--input-container">
<div class="search-page--results--wrapper">
<input type="text" class="search-page--results--input-box" id="searchPageInput" placeholder="Search for anything" aria-label="Search" autocomplete="off">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="search-page--results--input-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
</div>

<div class="search-page">
<aside class="search-page--sidebar">
<h2>Filter results</h2>
<div class="version-selector-wrapper" id="version-panel">
<version-selector selected="{{ site.data.versions.current }}"></version-selector>
<h3>Filter results</h3>
<div class="version-selector-wrapper" id="version-panel">
<version-selector selected="{{ site.data.versions.current }}"></version-selector>
</div>
<form class="search-page--sidebar--category-filter">
<div class="search-page--sidebar--category-filter--checkbox">
<input type="checkbox" id="categoryAll" name="categoryGroup" value="All" class="category-checkbox" checked>
<label for="categoryAll">All</label>
</div>
<div class="search-page--sidebar--category-filter--checkbox-child">
<input type="checkbox" id="categoryDocumentation" name="categoryGroup" value="docs" class="category-checkbox" checked>
<label for="categoryDocumentation">Documentation</label>
</div>
<form class="search-page--sidebar--category-filter">
<div class="search-page--sidebar--category-filter--checkbox">
<div>
<input type="checkbox" id="categoryAll" name="categoryGroup" value="All" class="category-checkbox" checked>
<label for="categoryAll">All</label>
</div>
<div class="search-page--sidebar--category-filter--checkbox-child">
<input type="checkbox" id="categoryDocumentation" name="categoryGroup" value="docs" class="category-checkbox" checked>
<label for="categoryDocumentation">Documentation</label>
</div>
<div class="search-page--sidebar--category-filter--checkbox-child">
<input type="checkbox" id="categoryBlog" name="categoryGroup" value="blogs" class="category-checkbox" checked>
<label for="categoryBlog">Blog</label>
</div>
<div class="search-page--sidebar--category-filter--checkbox-child">
<input type="checkbox" id="categoryEvent" name="categoryGroup" value="events" class="category-checkbox" checked>
<label for="categoryEvent">Event</label>
</div>
</div>
</form>
<div class="search-page--sidebar--category-filter--checkbox-child">
<input type="checkbox" id="categoryBlog" name="categoryGroup" value="blogs" class="category-checkbox" checked>
<label for="categoryBlog">Blogs</label>
</div>
<div class="search-page--sidebar--category-filter--checkbox-child">
<input type="checkbox" id="categoryEvent" name="categoryGroup" value="events" class="category-checkbox" checked>
<label for="categoryEvent">Events</label>
</div>
</form>
</aside>

<!-- Search Results Section -->
<div class="search-page--results">
<div class="search-page--results--input">
<input type="text" class="search-page--results--input-box" id="searchPageInput" placeholder="Search for anything" aria-label="Search {{ site.title }}" autocomplete="off">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="search-page--results--input-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<main class="search-page--results--display">
<h2 class="search-page--results--display--header" id="searchPageResultsHeader">Search Results</h2>
<div class="search-page--results--display--container" id="searchPageResultsContainer">
<!-- API results will be displayed here -->
</div>
<main class="search-page--results--diplay">
<h1 class="search-page--results--diplay--header" id="searchPageResultsHeader"></h1>
<div class="search-page--results--diplay--container" id="searchPageResultsContainer">
<!-- API results will be displayed here -->
</div>
</main>
</main>
</div>
</div>
<a class="top-link" href="#top">
<svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg>
</a>
</div>

<a class="top-link" href="#top">
<svg viewBox="0 0 24 24">
<use xlink:href="#svg-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>


{% include footer.html %}
<script src="{{ '/assets/js/search.js' | relative_url }}"></script>
Expand Down
97 changes: 76 additions & 21 deletions _sass/custom/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1039,67 +1039,122 @@ 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 {
padding-left: 20px;
}

.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';
Expand Down
21 changes: 7 additions & 14 deletions assets/js/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,10 @@

const showNoResults = () => {
emptyResults();
elResults.appendChild(document.createRange().createContextualFragment('<span>No results found!</span>'));
const resultElement = document.createElement('div');
resultElement.classList.add('search-page--results--no-results');
resultElement.appendChild(document.createRange().createContextualFragment('<span>No results found.</span>'));
elResults.appendChild(resultElement);
showResults();
elSpinner?.classList.remove(CLASSNAME_SPINNING);
};
Expand Down Expand Up @@ -278,8 +281,6 @@


window.doResultsPageSearch = async (query, type, version) => {
console.log("Running results page search!");

const searchResultsContainer = document.getElementById('searchPageResultsContainer');

try {
Expand All @@ -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];
Expand All @@ -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';
Expand All @@ -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) {
Expand Down

0 comments on commit 5e5b6d1

Please sign in to comment.