Skip to content

Commit

Permalink
Merge pull request #2481 from 10up/feature/instant-results
Browse files Browse the repository at this point in the history
Instant Results feature
  • Loading branch information
felipeelia authored Dec 6, 2021
2 parents 80aa939 + 51cc3e1 commit 6b3dd26
Show file tree
Hide file tree
Showing 117 changed files with 38,818 additions and 5,033 deletions.
27 changes: 27 additions & 0 deletions assets/css/instant-results.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
@import "instant-results/utilities.css";
@import "instant-results/input.css";
@import "instant-results/modal.css";
@import "instant-results/options-list.css";
@import "instant-results/page.css";
@import "instant-results/panel.css";
@import "instant-results/pagination.css";
@import "instant-results/range-slider.css";
@import "instant-results/result.css";
@import "instant-results/results.css";
@import "instant-results/sidebar.css";
@import "instant-results/sidebar-toggle.css";
@import "instant-results/sort.css";
@import "instant-results/toolbar.css";

:root {
--ep-search-background-color: #fff;
--ep-search-alternate-background-color: #efefef;
--ep-search-border-color: #dfdfdf;
--ep-search-range-thumb-size: 1.625em;
--ep-search-range-track-size: 0.75em;

@media ( min-width: 768px ) {
--ep-search-range-thumb-size: 1.25em;
--ep-search-range-track-size: 0.5em;
}
}
5 changes: 5 additions & 0 deletions assets/css/instant-results/input.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.ep-search-input {
font-size: 1.25em;
margin: 0 !important;
width: 100%;
}
60 changes: 60 additions & 0 deletions assets/css/instant-results/modal.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
.has-ep-search-modal {
overflow: hidden;
}

.ep-search-modal {
--ep-search-modal-focus-within: 0;
background-color: rgba(43, 46, 56, 0.9);
bottom: 0;
display: flex;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 9999;

@nest .rtl & {
direction: rtl;
text-align: right;
}

@nest .admin-bar & {
top: 32px;

@media ( max-width: 782px ) {
top: 46px;
}
}

&[aria-hidden="true"] {
display: none;
}

&:focus-within {
--ep-search-modal-focus-within: 1;
}
}

.ep-search-modal__content {
background-color: var(--ep-search-background-color);
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
position: absolute;
right: 0;
top: 0;

@media ( min-width: 768px ) {
bottom: 1em;
margin: 0 auto;
max-width: calc(100% - 2em);
top: 1em;
width: 80em;
}
}

.ep-search-modal__close {
align-self: flex-end;
padding: 1em !important;
}
17 changes: 17 additions & 0 deletions assets/css/instant-results/options-list.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.ep-search-options-list {
list-style: none;
margin: 0;
padding: 0;
}

.ep-search-options-list__item {
margin: 0.5em 0;

&::before {
content: none;
}
}

.ep-search-options-list__sub-menu {
padding-left: 1em;
}
39 changes: 39 additions & 0 deletions assets/css/instant-results/page.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.ep-search-page {
display: flex;
flex-direction: column;
flex-grow: 2;
margin: 0;
overflow-y: auto;
transition: opacity 300ms ease-out;
width: 100%;

@media ( min-width: 768px ) {
overflow: hidden;
}

& *,
& *::before,
& *::after {
box-sizing: border-box;
}

&.is-loading {
opacity: 0.5;
}
}

.ep-search-page__header,
.ep-search-page__tools,
.ep-search-page__body {
padding: 0 1em;
}

.ep-search-page__body {

@media ( min-width: 768px ) {
align-items: flex-start;
display: flex;
flex-grow: 2;
overflow: hidden;
}
}
19 changes: 19 additions & 0 deletions assets/css/instant-results/pagination.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.ep-search-pagination {
align-items: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-top: auto;
text-align: center;

@nest .rtl & {
direction: rtl;
}
}

.ep-search-pagination__next {
justify-self: end;
}

.ep-search-pagination__previous {
justify-self: start;
}
27 changes: 27 additions & 0 deletions assets/css/instant-results/panel.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.ep-search-panel {
border: 1px solid var(--ep-search-border-color);
margin: 0;
padding: 0;

@nest .ep-search-panel + & {
border-top-width: 0;
}
}

.ep-search-panel__heading {
font-size: inherit;
margin: 0;
}

.ep-search-panel__button {
padding: 1em !important;
width: 100% !important;
}

.ep-search-panel__content {
padding: 0 1em 1em 1em;

&[aria-hidden="true"] {
display: none;
}
}
26 changes: 26 additions & 0 deletions assets/css/instant-results/range-slider.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.ep-search-range-slider {
align-items: center;
display: flex;
margin: 0.5em 0;
min-height: var(--ep-search-range-thumb-size);
}

.ep-search-range-slider__track {
background: var(--ep-search-alternate-background-color);
border-radius: calc(var(--ep-search-range-track-size) / 2);
height: var(--ep-search-range-track-size);
}

.ep-search-range-slider__track-1 {
background-color: currentColor;
}

.ep-search-range-slider__thumb {
background-color: currentColor;
border-radius: calc(var(--ep-search-range-thumb-size) / 2);
box-shadow:
inset 0 0 0 calc(var(--ep-search-range-thumb-size) / 10) currentColor,
inset 0 0 0 calc((var(--ep-search-range-thumb-size) - var(--ep-search-range-track-size)) / 2) var(--ep-search-background-color);
height: var(--ep-search-range-thumb-size);
width: var(--ep-search-range-thumb-size);
}
89 changes: 89 additions & 0 deletions assets/css/instant-results/result.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
.ep-search-result {
align-items: flex-start;
display: grid;
grid-gap: 0.5em;
grid-template-areas:
"header"
"footer";
grid-template-rows: auto 1fr;

@media ( min-width: 768px ) {
grid-gap: 1em;
grid-template-areas:
"header"
"description"
"footer";
grid-template-rows: auto auto 1fr;
}
}

.ep-search-result--has-thumbnail {
grid-template-areas:
"thumbnail header"
"thumbnail footer";
grid-template-columns: min(300px, 34%) auto;

@media ( min-width: 768px ) {
grid-template-areas:
"thumbnail header"
"thumbnail description"
"thumbnail footer";
}
}

.ep-search-result__thumbnail {
display: block;
grid-area: thumbnail;

& img {
display: block;
margin: 0;
width: 100%;
}
}

.ep-search-result__header {
display: grid;
grid-area: header;
grid-gap: 0.5em;
grid-template-columns: auto;
justify-items: start;
}

.ep-search-result__title {
font-size: 1em;
margin: 0;

@media ( min-width: 768px ) {
font-size: 1.25em;
}
}

.ep-search-result__type {
background-color: var(--ep-search-alternate-background-color);
border-radius: 0.25em;
display: inline-block;
font-size: 0.875em;
line-height: 1.5;
padding: 0 0.25em;
vertical-align: text-bottom;
}

.ep-search-result__description {
display: none;
font-size: 0.875em;
grid-area: description;
margin: 0;

@media ( min-width: 768px ) {
display: block;
font-size: 1em;
}
}

.ep-search-result__footer {
display: grid;
grid-area: footer;
grid-gap: 0.5em;
justify-items: start;
}
30 changes: 30 additions & 0 deletions assets/css/instant-results/results.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.ep-search-results {
display: grid;
grid-gap: 2em;
grid-template-columns: 100%;
grid-template-rows: max-content;
padding: 0 0 1em 0;
width: 100%;

@media ( min-width: 768px ) {
height: 100%;
overflow-y: auto;
padding: 0 1em 1em 1em;
}
}

.ep-search-results__header {
align-items: center;
display: flex;
gap: 1em;
justify-content: space-between;
}

.ep-search-results__title {
font-size: 1.25em;
margin: 0 !important;

@media ( min-width: 768px ) {
font-size: 1.5em;
}
}
7 changes: 7 additions & 0 deletions assets/css/instant-results/sidebar-toggle.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.ep-search-sidebar-toggle {
width: 100%;

@media ( min-width: 768px ) {
display: none;
}
}
15 changes: 15 additions & 0 deletions assets/css/instant-results/sidebar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.ep-search-sidebar {
display: none;
margin-bottom: 2em;

&.is-open {
display: block;
}

@media ( min-width: 768px ) {
display: block;
max-height: calc(100% - 1em);
min-width: 25%;
overflow-y: auto;
}
}
24 changes: 24 additions & 0 deletions assets/css/instant-results/sort.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.ep-search-sort {
flex-shrink: 0;
gap: 0.5em;
margin: 0;

@nest .ep-search-results & {
display: none;

@media ( min-width: 768px ) {
align-items: center;
display: flex;
}
}

@nest .ep-search-sidebar & {
display: flex;
flex-direction: column;
margin-bottom: 1em;

@media ( min-width: 768px ) {
display: none;
}
}
}
Loading

0 comments on commit 6b3dd26

Please sign in to comment.