From 722a759af2829cf69d894c4fe65cc426f86651d8 Mon Sep 17 00:00:00 2001 From: Doug Martin Date: Fri, 6 Sep 2024 09:30:54 -0400 Subject: [PATCH] fix: Search styling updates from QA [PT-188117054] --- .../src/library/components/collections.scss | 4 +++- .../featured-collections.scss | 2 +- .../featured-collections.tsx | 2 +- .../components/search/auto-suggest.scss | 5 ++++ .../components/stem-finder-result.scss | 23 +++++++++++++++++++ .../library/components/stem-finder-result.tsx | 2 +- .../src/library/components/stem-finder.scss | 4 ++++ .../src/library/components/stem-finder.tsx | 13 +++++++---- .../src/library/styles/common/_common.scss | 9 ++++---- 9 files changed, 52 insertions(+), 12 deletions(-) diff --git a/rails/react-components/src/library/components/collections.scss b/rails/react-components/src/library/components/collections.scss index 30e8839f4a..7c2ba2d254 100644 --- a/rails/react-components/src/library/components/collections.scss +++ b/rails/react-components/src/library/components/collections.scss @@ -1,7 +1,7 @@ @import '../../shared/styles/variables/_variables.scss'; .finderResultsCollections { - margin-bottom: 30px; + margin-bottom: 20px; .finderResultsCollectionsHeader { margin-bottom: 10px; @@ -23,6 +23,8 @@ display: inline-block; border-radius: 4px; font-weight: bold; + font-size: 16px; + margin-top: 5px; &:hover, &:active { background: #ffc321; diff --git a/rails/react-components/src/library/components/featured-collections/featured-collections.scss b/rails/react-components/src/library/components/featured-collections/featured-collections.scss index 02e9689b51..6c9b41ad0e 100644 --- a/rails/react-components/src/library/components/featured-collections/featured-collections.scss +++ b/rails/react-components/src/library/components/featured-collections/featured-collections.scss @@ -2,7 +2,7 @@ .finderResultsFeatured { margin: 0; - padding: 0 0 20px; + padding: 0 0 24px; width: 100%; .finderResultsFeaturedHeader { diff --git a/rails/react-components/src/library/components/featured-collections/featured-collections.tsx b/rails/react-components/src/library/components/featured-collections/featured-collections.tsx index 759ca6600b..0b86b25f6e 100644 --- a/rails/react-components/src/library/components/featured-collections/featured-collections.tsx +++ b/rails/react-components/src/library/components/featured-collections/featured-collections.tsx @@ -16,7 +16,7 @@ export default class FeaturedCollections extends React.Component {

Featured Collections

Collections include a related set of student and teacher resources.
- View all Collections + View All Collections
diff --git a/rails/react-components/src/library/components/search/auto-suggest.scss b/rails/react-components/src/library/components/search/auto-suggest.scss index faa2610976..8a75f1513e 100644 --- a/rails/react-components/src/library/components/search/auto-suggest.scss +++ b/rails/react-components/src/library/components/search/auto-suggest.scss @@ -13,6 +13,11 @@ margin-left: 5px; padding: 6.5px 5px 5px; width: 40px; + + &:hover, &:active { + background: $col-gold; + color: $white; + } } .suggestions { position: absolute; diff --git a/rails/react-components/src/library/components/stem-finder-result.scss b/rails/react-components/src/library/components/stem-finder-result.scss index 3ac152ec28..79a86c96aa 100644 --- a/rails/react-components/src/library/components/stem-finder-result.scss +++ b/rails/react-components/src/library/components/stem-finder-result.scss @@ -254,6 +254,29 @@ } } + .previewCollectionButton { + background: $col-orange; + border: solid 2px $col-orange; + border-radius: 4px; + color: #fff; + display: block; + font: 700 14px/1 museo-sans, Arial, Helvetica, sans-serif; + line-height: .8; + padding: 10px; + text-align: center; + + &:hover { + background: $col-gold; + border-color: $col-gold; + color: $white; + } + &:active { + background: $col-gold; + border-color: $col-gold; + color: $white; + } + } + .projectLabel { font-size: 12px; font-weight: 500; diff --git a/rails/react-components/src/library/components/stem-finder-result.tsx b/rails/react-components/src/library/components/stem-finder-result.tsx index b86af2556a..f544363344 100644 --- a/rails/react-components/src/library/components/stem-finder-result.tsx +++ b/rails/react-components/src/library/components/stem-finder-result.tsx @@ -394,7 +394,7 @@ const StemFinderResult = Component({
{ resource.material_type !== "Collection" ? { resource.links.preview.text } - : Go to Collection + : Go to Collection } {
{ projectName } diff --git a/rails/react-components/src/library/components/stem-finder.scss b/rails/react-components/src/library/components/stem-finder.scss index 29162bee9b..255d118472 100644 --- a/rails/react-components/src/library/components/stem-finder.scss +++ b/rails/react-components/src/library/components/stem-finder.scss @@ -250,6 +250,10 @@ .finderHeaderResourceCount { align-self: center; color: $col-darkgray; + + span { + font-weight: bold; + } } .showOnly, .sortMenu { display: flex; diff --git a/rails/react-components/src/library/components/stem-finder.tsx b/rails/react-components/src/library/components/stem-finder.tsx index 9c60b7e10f..00751b21bc 100644 --- a/rails/react-components/src/library/components/stem-finder.tsx +++ b/rails/react-components/src/library/components/stem-finder.tsx @@ -341,6 +341,13 @@ class StemFinder extends React.Component { // only set collections on initial search if (!incremental) { collections.push(material); + + // TODO: REMOVE! + collections.push(material); + collections.push(material); + collections.push(material); + collections.push(material); + collections.push(material); } } else { resources.push(material); @@ -724,7 +731,7 @@ class StemFinder extends React.Component {
- { noResourcesFound ? "No Resources Found" : "Loading..." } + { noResourcesFound ?
No Activities matching your search
: "Loading..." }
{ (this.isAdvancedUser() || usersAuthoredResourcesCount > 0) && this.renderShowOnly() }
@@ -745,9 +752,7 @@ class StemFinder extends React.Component {
{ showingAll && multipleResources ? "Showing All " : "Showing " } - - { resourceCount + " " + pluralize(resourceCount, "Activity", "Activities") } - + { resourceCount + " " + pluralize(resourceCount, "Activity", "Activities") } matching your search
{ (this.isAdvancedUser() || usersAuthoredResourcesCount > 0) && this.renderShowOnly() }
diff --git a/rails/react-components/src/library/styles/common/_common.scss b/rails/react-components/src/library/styles/common/_common.scss index faa1a381ab..2fbd35b117 100644 --- a/rails/react-components/src/library/styles/common/_common.scss +++ b/rails/react-components/src/library/styles/common/_common.scss @@ -3,9 +3,9 @@ @import "forms"; /* - * Some of these rules are here to counteract rules set in + * Some of these rules are here to counteract rules set in * https://portal-pages.concord.org/site-redesign/site-redesign.css - * We should at some point reconcile the two sets of rules and + * We should at some point reconcile the two sets of rules and * possibly do away with the site-redesign.css file. */ @@ -42,7 +42,7 @@ body.member-visitor { .home-page-content { .portal-pages-hero h1 { - font: 100 40px museo, sans-serif !important; + font: 100 32px museo, sans-serif !important; line-height: 46px !important; strong:before { @@ -66,6 +66,7 @@ body.member-visitor { form input[type="text"] { font-size: 12px; width: calc(100% - 69px) !important; + font-size: 14px; } form input[type="submit"] { font-size: 15px; @@ -80,7 +81,7 @@ body.member-visitor { .portal-pages-finder-form-subject-areas-logo-inner { display: none !important; } - .portal-pages-finder-form-subject-areas-logo-label, + .portal-pages-finder-form-subject-areas-logo-label, .portal-pages-finder-form-filters-logo-label { font-size: 16px; font-weight: 300;