feat: Update search styling, part 1 [PT-188117054]

Updated html/css to match latest homepage and advanced search spec.

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;
+  }
 }

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;
        }
      }
    }

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

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?

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

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(" ","_")}"

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 <br/> <a href="/ngss/">NGSS Pathfinder!</a>
     = 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')
     }
 

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};

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;

rails/react-components/src/library/components/featured-collections/featured-collections.tsx

@@ -14,7 +14,10 @@ export default class FeaturedCollections extends React.Component<any, any> {
       <div className={css.finderResultsFeatured}>
         <div className={css.finderResultsFeaturedHeader}>
           <h2>Featured Collections</h2>
-          <p>Collections are curated groups of complementary resources that focus on a particular topic. <a className="special-link" href="/collections">View all</a></p>
+          <div className={css.finderResultsFeaturedTitle}>
+            <div>Collections include a <strong>related set</strong> of student and teacher resources.</div>
+            <a className="special-link" href="/collections">View all Collections</a>
+          </div>
         </div>
         <div className={css.finderResultsFeaturedCards}>
           { featuredCollections.map(function (featuredCollection: any, index: any) {

rails/react-components/src/library/components/page-header.tsx

@@ -177,6 +177,11 @@ const PageHeader = Component({
             <a href="/about" className="portal-pages-main-nav-item__link" title="Learn More about the STEM Resource Finder">About</a>
           </li>
         );
+        headerItems.push(
+          <li key={nextKey("Help")} className={"portal-pages-main-nav-item portal-pages-main-nav-help" + (this.props.isHelp ? " current-menu-item" : "")}>
+            <a href="/help" className="portal-pages-main-nav-item__link" title="Get help with using the STEM Resource Finder">Help</a>
+          </li>
+        );
       }
     }
 

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;

rails/react-components/src/library/components/stem-finder.tsx

@@ -713,7 +713,7 @@ class StemFinder extends React.Component<Props, State> {
     if (noResourcesFound || searching) {
       return (
         <div className={finderHeaderClass}>
-          <h2>Activities List</h2>
+          <h2>Activities</h2>
           { (this.isAdvancedUser() || usersAuthoredResourcesCount > 0) && this.renderShowOnly() }
           <div className={css.finderHeaderResourceCount}>
             { noResourcesFound ? "No Resources Found" : "Loading..." }
@@ -729,15 +729,19 @@ class StemFinder extends React.Component<Props, State> {
     jQuery("#portal-pages-finder").removeClass("loading");
     return (
       <div className={finderHeaderClass}>
-        <h2>Activities List</h2>
-        { (this.isAdvancedUser() || usersAuthoredResourcesCount > 0) && this.renderShowOnly() }
-        <div className={css.finderHeaderResourceCount}>
-          { showingAll && multipleResources ? "Showing All " : "Showing " }
-          <strong>
-            { resourceCount + " " + pluralize(resourceCount, "Activity", "Activities") }
-          </strong>
+        <h2>Activities</h2>
+        <div className={css.finderHeaderWrapper}>
+          <div className={css.finderHeaderLeft}>
+            <div className={css.finderHeaderResourceCount}>
+              { showingAll && multipleResources ? "Showing All " : "Showing " }
+              <strong>
+                { resourceCount + " " + pluralize(resourceCount, "Activity", "Activities") }
+              </strong>
+            </div>
+            { (this.isAdvancedUser() || usersAuthoredResourcesCount > 0) && this.renderShowOnly() }
+          </div>
+          { this.renderSortMenu() }
         </div>
-        { this.renderSortMenu() }
       </div>
     );
   }