Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Instant Search : Update mobile structure #14423

Merged
merged 20 commits into from
Jan 28, 2020
Merged

Instant Search : Update mobile structure #14423

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
3744163
Add cross gridicon
keoshi Jan 20, 2020
8df1b37
Replace close button label by a gridicon
keoshi Jan 20, 2020
1e6365c
Change position of close button
keoshi Jan 20, 2020
4d30055
Update z-index stacking order
keoshi Jan 20, 2020
5ce1b62
Reorder CSS properties
keoshi Jan 20, 2020
9224b3c
Add medium break point at 768px
keoshi Jan 21, 2020
52ff75d
Add mobile styles for filters popover
keoshi Jan 21, 2020
6372552
Change how transparency is set on the overlay
keoshi Jan 21, 2020
20a74a5
Merge branch 'instant-search-master' into update/instant-search-mobil…
keoshi Jan 27, 2020
d990cb7
Update break-small to break-medium
keoshi Jan 27, 2020
0ca0447
Add styles for smaller close button on mobile devices
keoshi Jan 27, 2020
5534096
Add arrow element to popover
keoshi Jan 27, 2020
e64bbc1
Remove styles that are out of place
keoshi Jan 27, 2020
c368819
Update search results styling
keoshi Jan 27, 2020
fbbceaa
Add popover styles
keoshi Jan 27, 2020
e8359ae
Update filter icon margins
keoshi Jan 27, 2020
f506922
Show sidebar filters up to 768px
keoshi Jan 28, 2020
e34cfe6
Bring up the opacity on the arrow border
keoshi Jan 28, 2020
7edd008
Reduce side padding on small screens
keoshi Jan 28, 2020
663484e
Move margin to label span instead of select element
keoshi Jan 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions modules/search/instant-search/components/gridicon/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ class Gridicon extends Component {
return <title>{ __( 'Is a product.' ) }</title>;
case 'gridicons-comment':
return <title>{ __( 'Matching comment.' ) }</title>;
case 'gridicons-cross':
return <title>{ __( 'Close search overlay' ) }</title>;
case 'gridicons-folder':
return <title>{ __( 'Category' ) }</title>;
case 'gridicons-image-multiple':
Expand Down Expand Up @@ -90,6 +92,12 @@ class Gridicon extends Component {
<path d="M3 6v9c0 1.105.895 2 2 2h9v5l5.325-3.804c1.05-.75 1.675-1.963 1.675-3.254V6c0-1.105-.895-2-2-2H5c-1.105 0-2 .895-2 2z" />
</g>
);
case 'gridicons-cross':
return (
<g>
<path d="M18.36 19.78L12 13.41l-6.36 6.37-1.42-1.42L10.59 12 4.22 5.64l1.42-1.42L12 10.59l6.36-6.36 1.41 1.41L13.41 12l6.36 6.36z" />
</g>
);
case 'gridicons-folder':
return (
<g>
Expand Down
8 changes: 6 additions & 2 deletions modules/search/instant-search/components/overlay.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@
*/
import { h } from 'preact';
import { useEffect } from 'preact/hooks';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import Gridicon from './gridicon';

const closeOnEscapeKey = callback => event => {
event.key === 'Escape' && callback();
Expand Down Expand Up @@ -34,7 +38,7 @@ const Overlay = ( { children, closeColor, closeOverlay, colorTheme, isVisible, o
onClick={ closeOverlay }
style={ { background: closeColor } }
>
{ __( 'Close', 'jetpack' ) }
<Gridicon icon="cross" size="24" />
</button>
{ children }
</div>
Expand Down
23 changes: 17 additions & 6 deletions modules/search/instant-search/components/overlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
.jetpack-instant-search__overlay {
position: fixed;
top: 0;
left: 0;
z-index: 9999999999999;
width: 100vw;
height: 100vh;
opacity: 0.975;
transition: opacity 0.5s linear, 0.25s transform ease-in-out;
position: fixed;
padding: 3em 1em;
background: rgba(255, 255, 255, 0.975);
overflow-y: auto;
overflow-x: hidden;
z-index: 9999999999999;
transition: opacity 0.5s linear, 0.25s transform ease-in-out;

&.is-hidden {
transform: translateX( 100vw );
Expand All @@ -25,6 +25,17 @@
}

.jetpack-instant-search__overlay-close {
position: absolute;
right: 2em;
position: fixed;
top: 0;
right: 0;
z-index: 20;
width: 44px;
height: 44px;
padding: 0;
line-height: 1;

@include break-medium() {
width: 64px;
height: 64px;
}
}
5 changes: 2 additions & 3 deletions modules/search/instant-search/components/search-box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@
}

.jetpack-instant-search__box-filter-icon {
margin-left: 8px;
margin: 0 16px;
cursor: pointer;

// TODO: To be updated to break-medium
@include break-small() {
@include break-medium() {
display: none;
}
}
Expand Down
1 change: 1 addition & 0 deletions modules/search/instant-search/components/search-form.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ class SearchForm extends Component {
</div>
{ this.state.showFilters && (
<div className="jetpack-instant-search__search-form-filters">
<div className="jetpack-instant-search__search-form-filters-arrow" />
<SearchSort onChange={ this.onChangeSort } value={ getSortQuery() } />
{ this.props.widgets.map( widget => (
<SearchFilters
Expand Down
74 changes: 73 additions & 1 deletion modules/search/instant-search/components/search-form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,78 @@
$arrow-height: 10px;

.jetpack-instant-search__search-form-filters {
// TODO: To be updated to break-medium
position: absolute;
top: 52px;
right: 0;
z-index: 10;
width: 100%;
margin: 12px 0 32px;
padding: 16px 24px;
border-radius: 6px;

.jetpack-instant-search__overlay--light & {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.jetpack-instant-search__overlay--dark & {
background: #222;
border: 1px solid rgba(140, 140, 140, 0.1);
box-shadow: 0 2px 3px rgba(140, 140, 140, 0.1);
}

@include break-small() {
width: auto;
min-width: 360px;
}

@include break-medium() {
display: none;
}
}

.jetpack-instant-search__search-form-filters-arrow {
position: absolute;
top: ( $arrow-height + 1px ) * -1;
right: 16px;
width: $arrow-height * 2;
height: $arrow-height;

&:before,
&:after {
content: '';
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 0 $arrow-height $arrow-height $arrow-height;
}

&:before {
top: 0;

.jetpack-instant-search__overlay--light & {
border-bottom-color: rgba(0, 0, 0, 0.1 );
}

.jetpack-instant-search__overlay--dark & {
border-bottom-color: rgba(140, 140, 140, 0.1 );
}
}

&:after {
top: 1px;

.jetpack-instant-search__overlay--light & {
border-bottom-color: #fff;
}

.jetpack-instant-search__overlay--dark & {
border-bottom-color: #222;
}
}

@include break-medium() {
display: none;
}
}
40 changes: 28 additions & 12 deletions modules/search/instant-search/components/search-results.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
.jetpack-instant-search__search-results {
padding: 0.125em 2em;
margin: 0 auto;
position: relative;
display: flex;
z-index: 10;
max-width: 1080px;
margin: 0 auto;
padding: 0.125em 2em;
text-align: left;
display: flex;

mark {
font-weight: bold;
color: inherit;
padding: 0;
font-weight: bold;
}

.jetpack-instant-search__overlay--light & {
Expand All @@ -31,10 +31,26 @@

.jetpack-instant-search__search-results-primary {
flex: 5;
margin-right: 4em;

@include break-medium() {
margin-right: 4em;
}
}
.jetpack-instant-search__search-results-secondary {
flex: 2;
display: none;

@include break-medium() {
position: static;
display: block;
flex: 2;
width: auto;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;

}
}

.jetpack-instant-search__search-results-real-query {
Expand All @@ -50,11 +66,11 @@
}

.jetpack-instant-search__result-comments {
padding-left: 16px;
margin-left: 8px;
margin-top: 16px;
border-left: 2px solid #eee;
padding-left: 16px;
font-size: 0.9em;
border-left: 2px solid #eee;

.gridicon {
margin-right: 8px;
Expand All @@ -71,16 +87,16 @@
// https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Accessibility_concerns
li:before {
content: '\200B';
height: 1px;
position: absolute;
height: 1px;
width: 1px;
}
}

.jetpack-instant-search__search-results-search-form {
// Only display the search form in the main column at the smallest breakpoint
font-size: 0.8em;
position: relative;
margin-bottom: 1em;
font-size: 0.8em;

.jetpack-instant-search__sort-select {
font-size: 0.9em;
Expand Down
3 changes: 1 addition & 2 deletions modules/search/instant-search/components/search-sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
.jetpack-instant-search__sidebar {
.jetpack-filters.widget_search,
.jetpack-instant-search-wrapper {
// TODO: To be updated to break-medium
@media ( max-width: #{ ( $break-small ) } ) {
@media ( max-width: #{ ( $break-medium ) } ) {
keoshi marked this conversation as resolved.
Show resolved Hide resolved
display: none;
}
}
Expand Down
7 changes: 7 additions & 0 deletions modules/search/instant-search/instant-search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
$break-small: 600px;
$break-medium: 768px;
$grid-size-large: 16px;

@mixin break-small() {
Expand All @@ -7,6 +8,12 @@ $grid-size-large: 16px;
}
}

@mixin break-medium() {
@media ( min-width: #{ ( $break-medium ) } ) {
@content;
}
}

@import './components/gridicon/style.scss';
@import './components/notice.scss';
@import './components/overlay.scss';
Expand Down