Skip to content

Commit

Permalink
IBX-4064: Search page (#1860)
Browse files Browse the repository at this point in the history
---------

Co-authored-by: Michał Grabowski <michal.grabowski@ibexa.co>
  • Loading branch information
adriendupuis and GrabowskiM authored Nov 29, 2024
1 parent 9e84c24 commit 2145f26
Show file tree
Hide file tree
Showing 12 changed files with 595 additions and 24 deletions.
150 changes: 150 additions & 0 deletions docs/css/instantsearch.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
.md-content {
margin: 0 auto;
}

footer.md-footer {
left: 0;
}

.md-content .ais-InstantSearch {
letter-spacing: 0.12px;
}

.md-content .ais-InstantSearch h1 {
font-size: 32px;
line-height: 36px;
letter-spacing: 0.17px;
margin: 8px 0 40px;
}

.md-content .ais-InstantSearch .ais-SearchBox .ais-SearchBox-submit {
left: 16px;
}

.md-content .ais-InstantSearch .ais-SearchBox .ais-SearchBox-submitIcon {
width: 16px;
}

.md-content .ais-InstantSearch .ais-SearchBox .ais-SearchBox-input {
font-size: 14px;
line-height: 21px;
height: 48px;
padding-left: 48px;
border-color: #A0A4A8;
}

.md-content .ais-InstantSearch .ais-Hits-list {
margin-left: 0;
}

.md-content .ais-InstantSearch .ais-Hits-item {
padding: 0px;
width: initial;
margin: 0;
border: 0;
box-shadow: none;
}

.md-content .ais-InstantSearch .ais-Hits-item + .ais-Hits-item {
border-top: 1px solid #E0E0E8;
margin-top: 16px;
padding-top: 16px;
}

.md-content .ais-InstantSearch .ais-Highlight-highlighted {
background-color: #ECF4FF;
color: #4191FF;
font-size: inherit;
line-height: inherit;
}

.md-content .ais-InstantSearch .instantsearch__entry {
display: block;
color: var(--ibexa-dusk-black);
}

.md-content .ais-InstantSearch .instantsearch__entry:hover,
.md-content .ais-InstantSearch .instantsearch__entry:hover .instantsearch__entry-header,
.md-content .ais-InstantSearch .instantsearch__entry:hover .instantsearch__entry-content {
color: var(--ibexa-jazzberry)
}

.md-content .ais-InstantSearch .instantsearch__entry:hover mark,
.md-content .ais-InstantSearch .instantsearch__entry:hover .instantsearch__entry-header mark,
.md-content .ais-InstantSearch .instantsearch__entry:hover .instantsearch__entry-content mark {
color: var(--ibexa-jazzberry)
}

.md-content .ais-InstantSearch .instantsearch__entry-header {
font-size: 18px;
line-height: 20px;
letter-spacing: 0.12px;
margin: 4px 0;
}

.md-content .ais-InstantSearch .instantsearch__entry-header .ais-Highlight-highlighted {
font-size: 18px;
line-height: 20px;
}

.md-content .ais-InstantSearch .instantsearch__entry-content {
color: #3B424A;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.12px;
margin-top: 10px;
padding-left: 10px;
border-left: 2px solid var(--mid-grey);
}

.md-content .ais-InstantSearch .instantsearch__entry-content .ais-Highlight-highlighted {
font-size: 14px;
line-height: 21px;
}

.md-content .ais-InstantSearch .instantsearch__entry-breadcrumbs {
font-size: 12px;
line-height: 21px;
letter-spacing: 0.12px;
}

.md-content .ais-InstantSearch .instantsearch__entry-breadcrumbs-item:after {
content: '›';
display: inline-block;
padding: 0 5px;
}

.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-list:not([hidden]) {
display: flex;
list-style: none;
margin: 15px 0 0;
display: flex;
justify-content: flex-end;
}

.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item {
margin: 0;
}

.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-link {
border: none;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.12px;
color: var(--ibexa-dusk-black);
height: 40px;
min-width: 40px;
display: flex;
justify-content: center;
align-items: center;
}

.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-item--selected .ais-Pagination-link,
.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-link:hover {
background-color: #F3F3F6;
border-radius: 5px;
}

#version {
display: none;
}
137 changes: 137 additions & 0 deletions docs/css/search.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
.md-header .md-search .algolia-autocomplete .ds-dataset-1 {
padding: 0;
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion {
padding: 0;
}

.md-header .md-search .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
background-color: transparent;
color: var(--ibexa-jazzberry);
}

.md-header .md-search .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--wrapper * {
color: var(--ibexa-jazzberry);
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--highlight {
background-color: #ECF4FF;
color: #4191FF !important;
box-shadow: none;
padding: 0;
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main {
padding: 0 0 14px 0;
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion:not(.algolia-docsearch-suggestion__main) {
padding: 14px 0;
border-top: 1px solid #E0E0E8;
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
display: flex;
align-items: center;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.12px;
height: 40px;
margin: 16px 0;
padding: 0 40px;
border: 0;
background-color: #F2F2F5;
color: var(--ibexa-dusk-black);
font-weight: 600;
}

.md-header .md-search .algolia-autocomplete .ds-suggestions > .ds-suggestion:first-child .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
margin-top: 0;
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--wrapper {
padding: 0;
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content {
float: none;
width: 100%;
text-align: left;
padding: 0;
margin: 0 40px;
color: var(--ibexa-dusk-black);
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--title {
font-size: 18px;
line-height: 20px;
letter-spacing: 0.12px;
font-weight: 600;
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
float: none;
width: 100%;
text-align: left;
color: #3B424A;
font-size: 12px;
line-height: 21px;
letter-spacing: 0.12px;
padding: 0;
margin: 0px 40px 4px;
display: flex;
flex-direction: column-reverse;
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content::before {
display: none;
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--text {
color: #3B424A;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.12px;
margin-top: 10px;
padding-left: 10px;
border-left: 2px solid var(--mid-grey);
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .aa-suggestion-title-separator {
padding: 0 5px;
}

.md-header .md-search .algolia-autocomplete .ds-dataset-1 {
z-index: 1;
padding-bottom: 70px;
}

.md-header .md-search .algolia-autocomplete .search-page-link-wrapper {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
right: 0;
background-color: #F2F2F5;
width: 100%;
height: 60px;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: center;
}

.md-header .md-search .algolia-autocomplete .search-page-link {
color: var(--link);
transition: color 125ms;
}

.md-header .md-search .algolia-autocomplete .search-page-link:hover {
color: var(--ibexa-jazzberry);
transition: color 125ms;
}

.md-header .md-search .algolia-autocomplete .algolia-docsearch-footer {
margin-right: 10px;
}
4 changes: 4 additions & 0 deletions docs/images/caret-back.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions docs/images/caret-double-back.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions docs/images/caret-double-next.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions docs/images/caret-next.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions docs/images/ez-icons.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 2145f26

Please sign in to comment.