From 13ee75adc226f92b8da103a2afcded48b2392d4f Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Fri, 16 Jun 2017 16:09:16 +0100 Subject: [PATCH 1/3] chore: Rename SearchPage to Search and consolidate --- src/amo/components/Search/styles.scss | 53 +-------------------------- 1 file changed, 1 insertion(+), 52 deletions(-) diff --git a/src/amo/components/Search/styles.scss b/src/amo/components/Search/styles.scss index 1ab2948b5e7..7c78d860f0b 100644 --- a/src/amo/components/Search/styles.scss +++ b/src/amo/components/Search/styles.scss @@ -1,56 +1,5 @@ @import "~amo/css/inc/vars"; -@import "~core/css/inc/mixins"; .Search { - @include respond-to(large) { - display: grid; - grid-auto-flow: column dense; - grid-gap: 10px; - grid-template-columns: minmax(300px, 35%) auto; - padding: $padding-page; - } - - .Card { - margin: $padding-page; - - @include respond-to(large) { - margin: 0; - } - } - - .SearchSort { - margin: $padding-page; - - @include respond-to(large) { - margin: 0; - } - } - - .SearchContextCard { - @include respond-to(large) { - grid-column: 1 / -1; - grid-row: 1; - } - } - - .SearchSort { - @include respond-to(large) { - grid-column: 1 / 2; - grid-row: 2; - } - } - - .SearchResults { - @include respond-to(large) { - grid-column: 2; - grid-row: 2 / 4; - } - } - - .Paginate { - @include respond-to(large) { - grid-column: 1 / -1; - grid-row: 4; - } - } + padding: $padding-page $padding-page 0; } From 0c2c60628d1a4fa17ff9aeca2a33e6f3919ca2f8 Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Sun, 18 Jun 2017 17:29:22 +0100 Subject: [PATCH 2/3] feat: Add desktop view for search (fix #2560) --- src/amo/components/Search/styles.scss | 53 ++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/src/amo/components/Search/styles.scss b/src/amo/components/Search/styles.scss index 7c78d860f0b..1ab2948b5e7 100644 --- a/src/amo/components/Search/styles.scss +++ b/src/amo/components/Search/styles.scss @@ -1,5 +1,56 @@ @import "~amo/css/inc/vars"; +@import "~core/css/inc/mixins"; .Search { - padding: $padding-page $padding-page 0; + @include respond-to(large) { + display: grid; + grid-auto-flow: column dense; + grid-gap: 10px; + grid-template-columns: minmax(300px, 35%) auto; + padding: $padding-page; + } + + .Card { + margin: $padding-page; + + @include respond-to(large) { + margin: 0; + } + } + + .SearchSort { + margin: $padding-page; + + @include respond-to(large) { + margin: 0; + } + } + + .SearchContextCard { + @include respond-to(large) { + grid-column: 1 / -1; + grid-row: 1; + } + } + + .SearchSort { + @include respond-to(large) { + grid-column: 1 / 2; + grid-row: 2; + } + } + + .SearchResults { + @include respond-to(large) { + grid-column: 2; + grid-row: 2 / 4; + } + } + + .Paginate { + @include respond-to(large) { + grid-column: 1 / -1; + grid-row: 4; + } + } } From 638940fe388629df836ffb459b8091eac9b887fc Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Sun, 25 Jun 2017 23:49:03 +0100 Subject: [PATCH 3/3] feat: Horizontal cards for landing pages Fix #2640 --- src/amo/components/AddonsCard/index.js | 12 ++- src/amo/components/AddonsCard/styles.scss | 87 +++++++++++++++++-- .../FeaturedAddons/FeaturedAddons.scss | 4 + src/amo/components/LandingAddonsCard/index.js | 9 +- src/amo/components/SearchForm.scss | 2 +- src/core/css/inc/mixins.scss | 8 ++ src/ui/components/Card/Card.scss | 2 +- src/ui/components/CardList/index.js | 7 +- src/ui/components/CardList/styles.scss | 2 +- src/ui/css/vars.scss | 2 +- tests/unit/amo/components/TestSearchResult.js | 2 +- 11 files changed, 117 insertions(+), 20 deletions(-) diff --git a/src/amo/components/AddonsCard/index.js b/src/amo/components/AddonsCard/index.js index a9130e1badb..daadd915f7d 100644 --- a/src/amo/components/AddonsCard/index.js +++ b/src/amo/components/AddonsCard/index.js @@ -1,5 +1,6 @@ -import React from 'react'; +import classNames from 'classnames'; import PropTypes from 'prop-types'; +import React from 'react'; import SearchResult from 'amo/components/SearchResult'; import CardList from 'ui/components/CardList'; @@ -12,14 +13,19 @@ export default class AddonsCard extends React.Component { addons: PropTypes.array.isRequired, children: PropTypes.node, className: PropTypes.string, + type: PropTypes.string, + } + + static defaultProps = { + type: 'list', } render() { - const { addons, children, className, ...otherProps } = this.props; + const { addons, children, className, type, ...otherProps } = this.props; return ( { this.cardContainer = ref; }}> {children} {addons && addons.length ? ( diff --git a/src/amo/components/AddonsCard/styles.scss b/src/amo/components/AddonsCard/styles.scss index 9c0a3b45066..856f0f6bb45 100644 --- a/src/amo/components/AddonsCard/styles.scss +++ b/src/amo/components/AddonsCard/styles.scss @@ -2,17 +2,88 @@ @import "~core/css/inc/mixins"; @import "~ui/css/vars"; -ul.AddonsCard-list { +.AddonsCard--horizontal { @include respond-to(large) { - display: grid; - grid-auto-flow: column dense; - grid-template-columns: 50% 50%; - } + position: relative; - .SearchResult { - @include respond-to(large) { + .Card-contents { background: $white; - grid-column: 1 / -1; + border-bottom-left-radius: $border-radius-default; + border-bottom-right-radius: $border-radius-default; + padding: 0 20px; + } + + .Card-footer, + .Card-footer-link { + @include end(20px); + @include text-align-end(); + + background: none; + border: 0; + position: absolute; + top: 0; + } + + ul.AddonsCard-list { + display: grid; + grid-auto-flow: column dense; + grid-template-columns: repeat(4, 25%); + + .SearchResult { + grid-column: auto; + margin-bottom: 0; + padding-left: 0; + } + + .SearchResult-link { + display: grid; + grid-column-gap: 8px; + grid-template-columns: 32px auto; + } + + .SearchResult-icon-wrapper { + grid-column: 1 / 2; + grid-row: 1 / 3; + } + + .SearchResult-contents { + grid-column: 2 / 2; + grid-row: 1 / 2; + margin: 0; + width: auto; + } + + .SearchResult-name { + font-size: $font-size-s; + } + + .SearchResult-metadata, + .SearchResult-summary { + display: none; + } + + .SearchResult-users { + @include margin-start(-3.5px); + + grid-column: 2 / 2; + grid-row: 2 / 2; + } + + .SearchResult--theme { + @include margin-end(25px); + + padding: 10px 0; + + // stylelint-disable max-nesting-depth + .SearchResult-link { + display: block; + } + + .SearchResult-icon-wrapper { + margin: 0; + } + // stylelint-enable max-nesting-depth + } } } } diff --git a/src/amo/components/FeaturedAddons/FeaturedAddons.scss b/src/amo/components/FeaturedAddons/FeaturedAddons.scss index bfd7ed385d9..eeb01b46030 100644 --- a/src/amo/components/FeaturedAddons/FeaturedAddons.scss +++ b/src/amo/components/FeaturedAddons/FeaturedAddons.scss @@ -1,5 +1,9 @@ @import "~core/css/inc/vars"; +.FeaturedAddons .SearchResults { + margin: 0 10px; +} + .FeaturedAddons-header { font-size: $font-size-m; text-align: center; diff --git a/src/amo/components/LandingAddonsCard/index.js b/src/amo/components/LandingAddonsCard/index.js index 479aa4916bf..904ee973415 100644 --- a/src/amo/components/LandingAddonsCard/index.js +++ b/src/amo/components/LandingAddonsCard/index.js @@ -24,8 +24,13 @@ export default class LandingAddonsCard extends React.Component { const footerLinkHtml = {footerText}; return ( - + ); } } diff --git a/src/amo/components/SearchForm.scss b/src/amo/components/SearchForm.scss index bc8e073fe20..0598fa60baf 100644 --- a/src/amo/components/SearchForm.scss +++ b/src/amo/components/SearchForm.scss @@ -10,6 +10,6 @@ .SearchInput-input, .SearchForm-form { color: $base-color; - font-size: $font-size-search; + font-size: $font-size-m-smaller; white-space: nowrap; } diff --git a/src/core/css/inc/mixins.scss b/src/core/css/inc/mixins.scss index 3f5f4349ea5..3719b4d00eb 100644 --- a/src/core/css/inc/mixins.scss +++ b/src/core/css/inc/mixins.scss @@ -280,6 +280,14 @@ $default-arrow-margin: 3px; } } +@mixin text-align-end() { + text-align: right; + + [dir=rtl] & { + text-align: left; + } +} + @mixin start($pos) { left: $pos; right: auto; diff --git a/src/ui/components/Card/Card.scss b/src/ui/components/Card/Card.scss index 05805dac5ba..3a8fc828349 100644 --- a/src/ui/components/Card/Card.scss +++ b/src/ui/components/Card/Card.scss @@ -3,13 +3,13 @@ .Card-header { @include addonSection(); + @include text-align-start(); border-top-left-radius: $border-radius-default; border-top-right-radius: $border-radius-default; font-size: $font-size-default; margin-top: 0; margin-bottom: 1px; - text-align: left; } .Card-contents { diff --git a/src/ui/components/CardList/index.js b/src/ui/components/CardList/index.js index 8c029e5dc99..afa53045ef5 100644 --- a/src/ui/components/CardList/index.js +++ b/src/ui/components/CardList/index.js @@ -17,8 +17,11 @@ export default class CardList extends React.Component { const { children, className, ...cardProps } = this.props; return ( - + {/* Children in this case is expected to be an unordered list, */} {/* which will be styled correctly. */} {children} diff --git a/src/ui/components/CardList/styles.scss b/src/ui/components/CardList/styles.scss index 851053aeeba..a5a49ae6157 100644 --- a/src/ui/components/CardList/styles.scss +++ b/src/ui/components/CardList/styles.scss @@ -15,7 +15,7 @@ > li { background: $white; - padding: 10px $padding-page; + padding: $padding-page; margin-bottom: 1px; &:last-of-type { diff --git a/src/ui/css/vars.scss b/src/ui/css/vars.scss index 5533154adaa..153807e2193 100644 --- a/src/ui/css/vars.scss +++ b/src/ui/css/vars.scss @@ -47,7 +47,7 @@ $header-text-not-active-color: transparentize($white, 0.5); // Fonts $font-size-s: 12px; -$font-size-search: 14px; +$font-size-m-smaller: 14px; $font-size-m: 18px; $font-size-l: 24px; $font-size-xl: 36px; diff --git a/tests/unit/amo/components/TestSearchResult.js b/tests/unit/amo/components/TestSearchResult.js index 80c32686a15..d4cebe90a30 100644 --- a/tests/unit/amo/components/TestSearchResult.js +++ b/tests/unit/amo/components/TestSearchResult.js @@ -86,7 +86,7 @@ describe('', () => { it('renders the star ratings', () => { const root = render(); - expect(root.find('.SearchResult-rating').length).toEqual(1); + expect(root.find('.SearchResult-rating')).toHaveLength(1); }); it('displays a placeholder if the icon is malformed', () => {