From 2f43d1a7341afeae5d18f8624a6b2fe7c3291bc2 Mon Sep 17 00:00:00 2001 From: Doug Martin Date: Tue, 3 Sep 2024 09:31:53 -0400 Subject: [PATCH] feat: Update search styling, part 1 [PT-188117054] Updated html/css to match most of the latest homepage and advanced search spec. There are some issues with the header spacing and advanced search grouping that need to be sorted out for part 2. --- .../stylesheets/themes/ngss-assessment.scss | 7 +- .../stylesheets/web/search_materials.scss | 24 ++++- rails/app/controllers/help_controller.rb | 1 + rails/app/views/home/home.html.haml | 7 ++ rails/app/views/search/_filters.html.haml | 4 +- .../views/search/_sensors_filter.html.haml | 2 +- rails/app/views/search/index.html.haml | 5 +- .../views/shared/_project_header.html.haml | 2 + ...er_filters_instructional_materials.feature | 18 ++-- .../assets/banners/concord-logo-no-tag.svg | 102 ++---------------- .../library/assets/banners/concord-logo.svg | 16 ++- .../featured-collections.scss | 12 ++- .../featured-collections.tsx | 5 +- .../src/library/components/page-header.tsx | 5 + .../src/library/components/stem-finder.scss | 24 ++++- .../src/library/components/stem-finder.tsx | 34 +++--- 16 files changed, 138 insertions(+), 130 deletions(-) diff --git a/rails/app/assets/stylesheets/themes/ngss-assessment.scss b/rails/app/assets/stylesheets/themes/ngss-assessment.scss index 5634d7bfef..f533d340de 100644 --- a/rails/app/assets/stylesheets/themes/ngss-assessment.scss +++ b/rails/app/assets/stylesheets/themes/ngss-assessment.scss @@ -12,9 +12,14 @@ ngss-assessment-theme-styles { background-size: 325px 100px; } } - + #footer { font-size: 15px; text-align: center; } + + .search-form__ngss_info { + // hide link to NGSS Pathfinder when on NGSS portal + display: none; + } } diff --git a/rails/app/assets/stylesheets/web/search_materials.scss b/rails/app/assets/stylesheets/web/search_materials.scss index 6d90975dc1..50a0e75ce8 100644 --- a/rails/app/assets/stylesheets/web/search_materials.scss +++ b/rails/app/assets/stylesheets/web/search_materials.scss @@ -36,6 +36,20 @@ width: 350px; } } + .search-form__ngss_info { + font-size: 18px; + line-height: normal; + text-align: center; + vertical-align: middle; + + @media screen and (max-width: 950px) { + br { display: none;} // remove line break on smaller screens + } + + a { + color: #ea6d2f; + } + } input[type="submit"] { padding: 12px 20px 11px !important; width: auto !important; @@ -75,8 +89,8 @@ .filter-group__options { background: #fff; border: solid 1px #999; - height: 126px; - max-height: 126px; + height: 146px; + max-height: 146px; overflow-x: hidden; overflow-y: scroll; padding: 5px; @@ -85,6 +99,11 @@ label { text-transform: none; + vertical-align: middle; + } + + input[type="checkbox"] { + vertical-align: middle; } &.select-menu { @@ -118,7 +137,6 @@ .filter-group__options { height: auto; - max-height: 63px; } } } diff --git a/rails/app/controllers/help_controller.rb b/rails/app/controllers/help_controller.rb index 5443daee04..8a3bc50af4 100644 --- a/rails/app/controllers/help_controller.rb +++ b/rails/app/controllers/help_controller.rb @@ -3,6 +3,7 @@ class HelpController < ApplicationController def index help_type = current_settings.help_type get_help_page(help_type) + @extra_options = {:isHelp => true} end def preview_help_page diff --git a/rails/app/views/home/home.html.haml b/rails/app/views/home/home.html.haml index ac9492b766..8743b4c13f 100644 --- a/rails/app/views/home/home.html.haml +++ b/rails/app/views/home/home.html.haml @@ -1,5 +1,12 @@ = render :partial => "notice" +- # hide intro for logged in users +- if @current_user != nil + %style{media: "screen"} + :plain + #page-introduction { display: none; } + .portal-pages-header-contain { margin-bottom: 0; } + #portal-pages-finder { padding-top: 20px !important; } .landing-container .home-page-content - if custom_content.blank? diff --git a/rails/app/views/search/_filters.html.haml b/rails/app/views/search/_filters.html.haml index f1b44b71f9..a4f3902c3c 100644 --- a/rails/app/views/search/_filters.html.haml +++ b/rails/app/views/search/_filters.html.haml @@ -36,13 +36,13 @@ .filter-group__options.webkit_scrollbars = check_box_tag 'material_properties[]', SearchModelInterface::RunsInBrowser, @form_model.runs_in_browser, :id => 'runs_in_browser' %label.tooltip - Runs In Browser + Runs in browser %span.tip These materials do not launch a Java webstart application. %br = check_box_tag 'material_properties[]', SearchModelInterface::RequiresDownload, @form_model.requires_download, :id => 'requires_download' %label.tooltip - Requires Download + Requires download %span.tip These materials download a file to your computer, and start using Java Web Start. %br diff --git a/rails/app/views/search/_sensors_filter.html.haml b/rails/app/views/search/_sensors_filter.html.haml index cfaf08abf4..b0ef11404a 100644 --- a/rails/app/views/search/_sensors_filter.html.haml +++ b/rails/app/views/search/_sensors_filter.html.haml @@ -3,7 +3,7 @@ Sensors .filter-group__options.webkit_scrollbars = check_box_tag 'no_sensors', '1', @form_model.no_sensors, :id=>'sensor_0', :class=>'sensor_filter_item' - = label_tag 'sensor_0', 'Sensors Not Necessary', :class=>'sensors_label' + = label_tag 'sensor_0', 'Sensors not necessary', :class=>'sensors_label' %br - @form_model.available_sensors.uniq.sort_by { |sensor| sensor.downcase }.each do |sensor| - id = "sensor_#{sensor.squish.downcase.tr(" ","_")}" diff --git a/rails/app/views/search/index.html.haml b/rails/app/views/search/index.html.haml index 5206a6952f..1a5ba23f0e 100644 --- a/rails/app/views/search/index.html.haml +++ b/rails/app/views/search/index.html.haml @@ -7,6 +7,8 @@ SEARCH .search-form__field #auto-suggest-placeholder + .search-form__ngss_info + Search here or head over to our
NGSS Pathfinder! = render :partial=>"search/filters" = hidden_field_tag 'investigation_page', (@form_model.investigation_page rescue 1) = hidden_field_tag 'activity_page', (@form_model.activity_page rescue 1) @@ -38,7 +40,8 @@ name: "search_term", query: query, onSubmit: autoSuggestSubmit, - getQueryParams: function () { return jQuery(form).serialize() } + getQueryParams: function () { return jQuery(form).serialize() }, + placeholder: "Type search term here" }, 'auto-suggest-placeholder') } diff --git a/rails/app/views/shared/_project_header.html.haml b/rails/app/views/shared/_project_header.html.haml index 20f7a29f2d..7688ad7c9d 100644 --- a/rails/app/views/shared/_project_header.html.haml +++ b/rails/app/views/shared/_project_header.html.haml @@ -7,6 +7,8 @@ - options[:sitewideAlert] = current_settings.sitewide_alert - if local_assigns[:extra_options] - options.merge!(extra_options) +- elsif @extra_options + - options.merge!(@extra_options) %script{:type=>"text/javascript"} var pageHeaderOptions = #{raw options.to_json}; diff --git a/rails/features/teacher_filters_instructional_materials.feature b/rails/features/teacher_filters_instructional_materials.feature index aa76de4812..69fb14bcbc 100644 --- a/rails/features/teacher_filters_instructional_materials.feature +++ b/rails/features/teacher_filters_instructional_materials.feature @@ -43,26 +43,26 @@ Feature: Teacher filters instructional materials And I wait for the search to be ready Then I should see "My grade 5 Math Activity" And I should not see "My grade 7 Science Activity" - + When I check "Science" And I uncheck "Math" And I wait for the search to be ready - + Then I should see "My grade 7 Science Activity" And I should not see "My grade 5 Math Activity" - + When I uncheck "Math" And I uncheck "Science" And I check "grade_level_7-8" And I wait for the search to be ready - + Then I should not see "My grade 5 Math Activity" And I should see "My grade 7 Science Activity" - + When I uncheck "grade_level_7-8" And I check "grade_level_5-6" And I wait for the search to be ready - + Then I should see "My grade 5 Math Activity" And I should not see "My grade 7 Science Activity" @@ -107,16 +107,16 @@ Feature: Teacher filters instructional materials Then I should see "My Temperature Sensor Activity" And I should not see "My Force Sensor Activity" And I should not see "My No Sensor Activity" - + When I check "Force" And I wait for the search to be ready Then I should see "My Temperature Sensor Activity" And I should see "My Force Sensor Activity" And I should not see "My No Sensor Activity" - + When I uncheck "Temperature" And I uncheck "Force" - And I check "Sensors Not Necessary" + And I check "Sensors not necessary" And I wait for the search to be ready Then I should see "My No Sensor Activity" And I should not see "My Force Sensor Activity" diff --git a/rails/react-components/src/library/assets/banners/concord-logo-no-tag.svg b/rails/react-components/src/library/assets/banners/concord-logo-no-tag.svg index d615b7c21f..784bae0b75 100644 --- a/rails/react-components/src/library/assets/banners/concord-logo-no-tag.svg +++ b/rails/react-components/src/library/assets/banners/concord-logo-no-tag.svg @@ -1,92 +1,12 @@ - - - - -concord-logo - - - - - - - + + + + + + + + + + + diff --git a/rails/react-components/src/library/assets/banners/concord-logo.svg b/rails/react-components/src/library/assets/banners/concord-logo.svg index 8f81d99ae7..8869558810 100644 --- a/rails/react-components/src/library/assets/banners/concord-logo.svg +++ b/rails/react-components/src/library/assets/banners/concord-logo.svg @@ -1 +1,15 @@ -concord-logo \ No newline at end of file + + + + + + + + + + + + + + + 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 f456c0d774..3ba01b614b 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 @@ -1,14 +1,22 @@ @import '../../../shared/styles/variables/_variables.scss'; .finderResultsFeatured { - border-bottom: solid 5px rgba(51, 51, 51, .25); - margin: 0 0 20px; + margin: 0; padding: 0 0 20px; width: 100%; .finderResultsFeaturedHeader { overflow: hidden; + .finderResultsFeaturedTitle { + display: flex; + justify-content: space-between; + + a { + margin-right: 25px; + } + } + a, a:visited { color: $col-darkgray; font-size: 16px !important; 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 28e3fc967a..759ca6600b 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 @@ -14,7 +14,10 @@ export default class FeaturedCollections extends React.Component {

Featured Collections

-

Collections are curated groups of complementary resources that focus on a particular topic. View all

+
+
Collections include a related set of student and teacher resources.
+ View all Collections +
{ featuredCollections.map(function (featuredCollection: any, index: any) { diff --git a/rails/react-components/src/library/components/page-header.tsx b/rails/react-components/src/library/components/page-header.tsx index fec87e2dd1..16fe83f7e3 100644 --- a/rails/react-components/src/library/components/page-header.tsx +++ b/rails/react-components/src/library/components/page-header.tsx @@ -177,6 +177,11 @@ const PageHeader = Component({ About ); + headerItems.push( +
  • + Help +
    • + ); } } diff --git a/rails/react-components/src/library/components/stem-finder.scss b/rails/react-components/src/library/components/stem-finder.scss index adb1f5adb5..29162bee9b 100644 --- a/rails/react-components/src/library/components/stem-finder.scss +++ b/rails/react-components/src/library/components/stem-finder.scss @@ -51,7 +51,7 @@ padding: 7px 5px 6px; width: calc(100% - 59px); - &::-webkit-input-placeholder, + &::-webkit-input-placeholder, &::-moz-placeholder, &::placeholder { color: #ff0000; @@ -206,7 +206,8 @@ } .advancedSearchLink { - font-size: 14px; + font-size: 16px; + font-weight: 500; text-align: center; a { @@ -233,6 +234,19 @@ line-height: .8; width: 100%; } + .finderHeaderWrapper { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 5px 0 -3px 0; + width: 100%; + align-items: flex-end; + } + .finderHeaderLeft { + display: flex; + justify-content: space-between; + gap: 10px; + } .finderHeaderResourceCount { align-self: center; color: $col-darkgray; @@ -241,7 +255,7 @@ display: flex; font-size: 14px; width: 217px; - + label { align-self: center; color: $col-darkgray; @@ -264,12 +278,12 @@ } @media(hover: hover) and (pointer: fine) { - .finderOptionsContainer { + .finderOptionsContainer { ul { list-style: none; margin: 0; padding: 0; - + li { &:hover { background: $col-gold; diff --git a/rails/react-components/src/library/components/stem-finder.tsx b/rails/react-components/src/library/components/stem-finder.tsx index 6eb7a8a7c5..f1303a50cd 100644 --- a/rails/react-components/src/library/components/stem-finder.tsx +++ b/rails/react-components/src/library/components/stem-finder.tsx @@ -713,12 +713,16 @@ class StemFinder extends React.Component { if (noResourcesFound || searching) { return (
    -

    Activities List

    - { (this.isAdvancedUser() || usersAuthoredResourcesCount > 0) && this.renderShowOnly() } -
    - { noResourcesFound ? "No Resources Found" : "Loading..." } +

    Activities

    +
    +
    +
    + { noResourcesFound ? "No Resources Found" : "Loading..." } +
    + { (this.isAdvancedUser() || usersAuthoredResourcesCount > 0) && this.renderShowOnly() } +
    + { this.renderSortMenu() }
    - { this.renderSortMenu() }
    ); } @@ -729,15 +733,19 @@ class StemFinder extends React.Component { jQuery("#portal-pages-finder").removeClass("loading"); return (
    -

    Activities List

    - { (this.isAdvancedUser() || usersAuthoredResourcesCount > 0) && this.renderShowOnly() } -
    - { showingAll && multipleResources ? "Showing All " : "Showing " } - - { resourceCount + " " + pluralize(resourceCount, "Activity", "Activities") } - +

    Activities

    +
    +
    +
    + { showingAll && multipleResources ? "Showing All " : "Showing " } + + { resourceCount + " " + pluralize(resourceCount, "Activity", "Activities") } + +
    + { (this.isAdvancedUser() || usersAuthoredResourcesCount > 0) && this.renderShowOnly() } +
    + { this.renderSortMenu() }
    - { this.renderSortMenu() }
    ); }