feat: Add desktop view for search (fix #2560)

Author: tofumatt

assets/sketch files/AMO Desktop - Master.sketch

@@ -6,6 +6,10 @@
   padding: 20px 10px;
 }
 
+.Addon .Card {
+  margin-bottom: 10px;
+}
+
 .Addon-icon-image {
   height: 48px;
   width: 48px;
@@ -144,6 +148,7 @@
     grid-auto-flow: column dense;
     grid-gap: 10px;
     grid-template-columns: minmax(300px, 35%) auto;
+    margin: 10px 0 0;
 
     .AddonDescription {
       grid-column: 2;

src/amo/components/Addon/styles.scss

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import SearchResult from 'amo/components/SearchResult';
 import CardList from 'ui/components/CardList';
 
+import './styles.scss';
+
 
 export default class AddonsCard extends React.Component {
   static propTypes = {

src/amo/components/AddonsCard/index.js

@@ -0,0 +1,16 @@
+@import "~amo/css/inc/vars";
+@import "~core/css/inc/mixins";
+@import "~ui/css/vars";
+
+@include respond-to(large) {
+  ul.AddonsCard-list {
+    display: grid;
+    grid-auto-flow: column dense;
+    grid-template-columns: 50% 50%;
+
+    .SearchResult {
+      background: $white;
+      grid-column: 1 / -1;
+    }
+  }
+}

src/amo/components/AddonsCard/styles.scss

@@ -9,7 +9,7 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  margin: $padding-page $padding-page ($padding-page * 2);
+  margin: $padding-page;
 }
 
 .LandingPage-header-top {

src/amo/components/LandingPage.scss

@@ -5,6 +5,7 @@ import { compose } from 'redux';
 
 import { setViewContext } from 'amo/actions/viewContext';
 import Link from 'amo/components/Link';
+import SearchContextCard from 'amo/components/SearchContextCard';
 import Paginate from 'core/components/Paginate';
 import { VIEW_CONTEXT_EXPLORE } from 'core/constants';
 import SearchResults from 'amo/components/SearchResults';
@@ -16,6 +17,8 @@ import {
 } from 'core/searchUtils';
 import { safeAsyncConnect } from 'core/utils';
 
+import './styles.scss';
+
 
 export class SearchBase extends React.Component {
   static propTypes = {
@@ -54,8 +57,15 @@ export class SearchBase extends React.Component {
 
   render() {
     const {
-      LinkComponent, count, enableSearchSort, filters, hasSearchParams,
-      loading, page, pathname, results,
+      LinkComponent,
+      count,
+      enableSearchSort,
+      filters,
+      hasSearchParams,
+      loading,
+      page,
+      pathname,
+      results,
     } = this.props;
     const queryParams = this.props.queryParams ||
       convertFiltersToQueryParams(filters);
@@ -69,6 +79,7 @@ export class SearchBase extends React.Component {
 
     return (
       <div className="Search">
+        <SearchContextCard />
         {searchSort}
         <SearchResults count={count} hasSearchParams={hasSearchParams}
           filters={filters} loading={loading} pathname={pathname}

src/amo/components/Search/index.js

@@ -1,5 +1,49 @@
 @import "~amo/css/inc/vars";
+@import "~core/css/inc/mixins";
 
 .Search {
-  padding: $padding-page $padding-page 0;
+  .Card,
+  .SearchSort {
+    margin: $padding-page;
+  }
+}
+
+@include respond-to(large) {
+  .Search {
+    display: grid;
+    grid-auto-flow: column dense;
+    grid-gap: 10px;
+    grid-template-columns: minmax(300px, 35%) auto;
+    padding: $padding-page;
+
+    .Card,
+    .SearchSort {
+      margin: 0;
+    }
+
+    .SearchContextCard {
+      grid-column: 1 / -1;
+      grid-row: 1;
+    }
+
+    .SearchSort {
+      grid-column: 1 / 2;
+      grid-row: 2;
+    }
+
+    .SearchResults {
+      grid-column: 2;
+      grid-row: 2 / 4;
+    }
+
+    // .SearchResult {
+    //   background: red;
+    //   max-width: 300px;
+    // }
+
+    .Paginate {
+      grid-column: 1 / -1;
+      grid-row: 4;
+    }
+  }
 }

src/amo/components/Search/styles.scss

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import translate from 'core/i18n/translate';
+import Card from 'ui/components/Card';
+
+import './styles.scss';
+
+
+export class SearchContextCardBase extends React.Component {
+  static propTypes = {
+    count: PropTypes.number,
+    filters: PropTypes.object,
+    i18n: PropTypes.object.isRequired,
+    loading: PropTypes.bool.isRequired,
+  }
+
+  static defaultProps = {
+    count: 0,
+    filters: {},
+  }
+
+  render() {
+    const { count, filters, i18n, loading } = this.props;
+    const { query } = filters;
+
+    let searchText;
+
+    if (!loading && query) {
+      searchText = i18n.sprintf(i18n.ngettext(
+        '%(count)s result for "%(query)s"',
+        '%(count)s results for "%(query)s"',
+        count), { count: i18n.formatNumber(count), query }
+      );
+    } else if (loading && query) {
+      searchText = i18n.sprintf(i18n.gettext(
+        'Searching for "%(query)s"'), { query });
+    } else if (loading) {
+      searchText = i18n.gettext('Loading add-ons');
+    } else if (!loading && count === 0) {
+      searchText = i18n.gettext('No add-ons found');
+    } else {
+      searchText = i18n.sprintf(i18n.ngettext(
+        '%(count)s add-on found"',
+        '%(count)s add-ons found',
+        count), { count: i18n.formatNumber(count) }
+      );
+    }
+
+    return (
+      <Card className="SearchContextCard">
+        <h1 className="SearchContextCard-header">{searchText}</h1>
+      </Card>
+    );
+  }
+}
+
+export function mapStateToProps(state) {
+  return {
+    count: state.search.count,
+    filters: state.search.filters,
+    loading: state.search.loading,
+  };
+}
+
+export default compose(
+  connect(mapStateToProps),
+  translate(),
+)(SearchContextCardBase);

src/amo/components/SearchContextCard/index.js

@@ -0,0 +1,6 @@
+@import "~ui/css/vars";
+
+.SearchContextCard-header {
+  font-size: $font-size-l;
+  margin: 0;
+}