diff --git a/rails/app/assets/stylesheets/web/search_materials.scss b/rails/app/assets/stylesheets/web/search_materials.scss index 50a0e75ce8..775ce80bee 100644 --- a/rails/app/assets/stylesheets/web/search_materials.scss +++ b/rails/app/assets/stylesheets/web/search_materials.scss @@ -41,9 +41,10 @@ line-height: normal; text-align: center; vertical-align: middle; + display: none; - @media screen and (max-width: 950px) { - br { display: none;} // remove line break on smaller screens + @media screen and (min-width: 1170px) { + & { display: block;} // show only on larger screens } a { @@ -65,7 +66,6 @@ font-size: 12px; margin-top: 10px; min-height: 20px; - padding: 5px; position: relative; #showhidefilters { @@ -80,78 +80,89 @@ flex-flow: row wrap; height: auto; min-height: 400px; - - .filter-group { - flex: 23.25%; - max-width: 23.25%; - padding: .875%; - - .filter-group__options { - background: #fff; - border: solid 1px #999; - height: 146px; - max-height: 146px; - overflow-x: hidden; - overflow-y: scroll; - padding: 5px; - text-overflow: ellipsis; - white-space: nowrap; - - label { - text-transform: none; - vertical-align: middle; - } - - input[type="checkbox"] { - vertical-align: middle; - } - - &.select-menu { - background: transparent; - border: none; - height: auto; - margin-top: -2.5px; - padding: 0; - - select { - background: #fff; - border: solid 1px #999; - } - } + align-content: flex-start; + gap: 10px; + padding: 10px; + + .filter-row { + display: flex; + width: 100%; + flex-grow: 1; + gap: 10px; + + &.flex-col { + flex-direction: column; } - &.two-col { - flex: 48.25%; - max-width: 48.25%; + &.flex-row { + flex-direction: row; } - } - .filter-stack-wrap { - flex: 23.25%; - max-width: 23.25%; - padding: .875%; - - .filter-group { - flex: 100%; - margin-bottom: 1.75%; - max-width: 100%; - padding: 0; - - .filter-group__options { - height: auto; - } + &.full-height { + height: 100%; } - } - .full-col { - flex: 98.25%; - height: 25px; - max-height: 25px; - max-width: 98.25%; - padding: .875%; - - .filterheader { - float: left; - margin-right: 5px; + + &.flex-shrink { + flex-grow: 0; } - } + + .filter-group { + flex: 1; + + &.sort-by { + display: flex; + gap: 10px; + align-items: center; + margin-top: 10px; + + select { + padding: 5px; + } + } + + .filter-group__options { + background: #fff; + border: solid 1px #999; + overflow-x: hidden; + overflow-y: scroll; + padding: 5px; + text-overflow: ellipsis; + white-space: nowrap; + max-height: 125px; + + &.auto-overflow { + overflow: auto; + } + + &.projects { + max-height: 150px; + } + &.sensors { + max-height: 300px; + } + + label { + text-transform: none; + vertical-align: middle; + } + + input[type="checkbox"] { + vertical-align: middle; + } + + &.select-menu { + background: transparent; + border: none; + height: auto; + margin-top: -2.5px; + padding: 0; + + select { + background: #fff; + border: solid 1px #999; + } + } + } + } + } } } .filters { diff --git a/rails/app/models/search.rb b/rails/app/models/search.rb index a14f3f39d0..5dbfd8b619 100644 --- a/rails/app/models/search.rb +++ b/rails/app/models/search.rb @@ -13,6 +13,10 @@ class Search attr_accessor :investigation_page attr_accessor :interactive_page attr_accessor :collection_page + attr_accessor :activity_per_page + attr_accessor :investigation_per_page + attr_accessor :interactive_per_page + attr_accessor :collection_per_page attr_accessor :per_page attr_accessor :user_id attr_accessor :user @@ -134,17 +138,21 @@ def initialize(opts={}) self.sort_order = opts[:sort_order] || Newest self.per_page = opts[:per_page] || 10 - self.activity_page = opts[:activity_page] || 1 - self.investigation_page = opts[:investigation_page] || 1 - self.interactive_page = opts[:interactive_page] || 1 - self.collection_page = opts[:collection_page] || 1 - self.without_teacher_only = opts[:without_teacher_only]|| true - self.material_properties = opts[:material_properties] || [] - self.include_contributed = opts[:include_contributed] || false - self.include_mine = opts[:include_mine] || false - self.include_official = opts[:include_official] || false - self.include_templates = opts[:include_templates] || false - self.show_archived = opts[:show_archived] || false + self.activity_page = opts[:activity_page] || 1 + self.investigation_page = opts[:investigation_page] || 1 + self.interactive_page = opts[:interactive_page] || 1 + self.collection_page = opts[:collection_page] || 1 + self.activity_per_page = opts[:activity_per_page] || self.per_page + self.investigation_per_page = opts[:investigation_per_page] || self.per_page + self.interactive_per_page = opts[:interactive_per_page] || self.per_page + self.collection_per_page = opts[:collection_per_page] || self.per_page + self.without_teacher_only = opts[:without_teacher_only] || true + self.material_properties = opts[:material_properties] || [] + self.include_contributed = opts[:include_contributed] || false + self.include_mine = opts[:include_mine] || false + self.include_official = opts[:include_official] || false + self.include_templates = opts[:include_templates] || false + self.show_archived = opts[:show_archived] || false self.fetch_available_filter_options() @@ -250,13 +258,13 @@ def search add_custom_search_filters(s) if (type == ActivityMaterial) - s.paginate(:page => self.activity_page, :per_page => self.per_page) + s.paginate(:page => self.activity_page, :per_page => self.activity_per_page) elsif (type == InvestigationMaterial) - s.paginate(:page => self.investigation_page, :per_page => self.per_page) + s.paginate(:page => self.investigation_page, :per_page => self.investigation_per_page) elsif (type == InteractiveMaterial) - s.paginate(:page => self.interactive_page, :per_page => self.per_page) + s.paginate(:page => self.interactive_page, :per_page => self.interactive_per_page) elsif (type == CollectionMaterial) - s.paginate(:page => self.collection_page, :per_page => self.per_page) + s.paginate(:page => self.collection_page, :per_page => self.collection_per_page) end end diff --git a/rails/app/views/search/_filters.html.haml b/rails/app/views/search/_filters.html.haml index a4f3902c3c..916f29bfa0 100644 --- a/rails/app/views/search/_filters.html.haml +++ b/rails/app/views/search/_filters.html.haml @@ -2,88 +2,95 @@ #filtermask #showhidefilters = link_to('- Hide Filters', 'javascript: void(0);', :id=>"showHideFilters", :onclick => "showHideFilters(this)") - %div{:style=>'clear:both'} #filters_wrapper.visible - .filter-group.full-col - %h2.filterheader - Sort By - .filter-group__options.select-menu - = select_tag(:sort_order, options_for_select([["Oldest", "Oldest"],["Newest", "Newest"],["Alphabetical", "Alphabetical"]], "Newest")) - #subject-area-filters.filter-group - = render :partial => "search/subject_areas_filter" - #grade-level-filters.filter-group - = render :partial => "search/grade_levels_filter" - .filter-stack-wrap - #material-type-filters.filter-group + .filter-row.flex-shrink + .filter-group.sort-by %h2.filterheader - Resource Type - .filter-group__options.webkit_scrollbars - = check_box_tag 'material_types[]', 'Investigation', @form_model.material_types.include?('Investigation'),:id=>'investigation' - = label_tag 'investigation', t(:investigation).titleize - %br - = check_box_tag 'material_types[]', 'Activity', @form_model.material_types.include?('Activity'),:id=>'Activity' - = label_tag 'activity','Activity' - %br - = check_box_tag 'material_types[]', 'Interactive', @form_model.material_types.include?('Interactive'),:id=>'Interactive' - = label_tag 'interactive', t(:interactive).titleize - %br - = check_box_tag 'material_types[]', 'Collection', @form_model.material_types.include?('Collection'),:id=>'Collection' - = label_tag 'collection', t(:collection).titleize - %br - #material-properties-filters.filter-group - %h2.filterheader - Resource Properties - .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 - %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 - %span.tip - These materials download a file to your computer, and start using Java Web Start. - %br - #sensor-filters.filter-group - = render :partial => "search/sensors_filter" - #projects-filters.filter-group.two-col - = render :partial => "search/projects_filter" - .filter-stack-wrap - #authorship-filters.filter-group - %h2.filterheader - Authorship - .filter-group__options.webkit_scrollbars - = check_box_tag 'include_official', '1', @form_model.will_show_official, :id => 'include_official' - %label.tooltip - Official - %span.tip - These materials are written by the Concord Consortium. - %br - = check_box_tag 'include_contributed', '1', params[:include_contributed], :id => 'include_contributed' - %label.tooltip - Community - %span.tip - These materials are written by external contributors. - %br - - unless current_visitor.anonymous? - #show-only-filters.filter-group + Sort By + .filter-group__options.select-menu.auto-overflow + = select_tag(:sort_order, options_for_select([["Oldest", "Oldest"],["Newest", "Newest"],["Alphabetical", "Alphabetical"]], "Newest")) + .filter-row + .filter-row.flex-col + .filter-row + - if @form_model.available_subject_areas.size > 0 + #subject-area-filters.filter-group + = render :partial => "search/subject_areas_filter" + - if authored_grade_level_groupes.size > 0 + #grade-level-filters.filter-group + = render :partial => "search/grade_levels_filter" + - if @form_model.available_projects.size > 0 + .filter-row.full-height + #projects-filters.filter-group + = render :partial => "search/projects_filter" + .filter-row.flex-col + #material-type-filters.filter-group + %h2.filterheader + Resource Type + .filter-group__options.webkit_scrollbars + = check_box_tag 'material_types[]', 'Investigation', @form_model.material_types.include?('Investigation'),:id=>'investigation' + = label_tag 'investigation', t(:investigation).titleize + %br + = check_box_tag 'material_types[]', 'Activity', @form_model.material_types.include?('Activity'),:id=>'Activity' + = label_tag 'activity','Activity' + %br + = check_box_tag 'material_types[]', 'Interactive', @form_model.material_types.include?('Interactive'),:id=>'Interactive' + = label_tag 'interactive', t(:interactive).titleize + %br + = check_box_tag 'material_types[]', 'Collection', @form_model.material_types.include?('Collection'),:id=>'Collection' + = label_tag 'collection', t(:collection).titleize + %br + #material-properties-filters.filter-group %h2.filterheader - Show Only + Resource Properties .filter-group__options.webkit_scrollbars - .authored_by_me - = check_box_tag 'include_mine', '1', params[:include_mine], :id => 'include_mine', :class => 'include_mine' - %label.tooltip{:for => "include_mine", :class => 'include_mine'} - = t "search.only_mine" - .only_show_archived - = check_box_tag 'show_archived', '1', params[:show_archived], :id => 'show_archived', :class => 'show_archived' - %label.tooltip{:for => "show archived", :class => 'show_archived'} - = t "search.only_archived" + = check_box_tag 'material_properties[]', SearchModelInterface::RunsInBrowser, @form_model.runs_in_browser, :id => 'runs_in_browser' + %label.tooltip + 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 + %span.tip + These materials download a file to your computer, and start using Java Web Start. + %br + #authorship-filters.filter-group + %h2.filterheader + Authorship + .filter-group__options.webkit_scrollbars + = check_box_tag 'include_official', '1', @form_model.will_show_official, :id => 'include_official' + %label.tooltip + Official + %span.tip + These materials are written by the Concord Consortium. + %br + = check_box_tag 'include_contributed', '1', params[:include_contributed], :id => 'include_contributed' + %label.tooltip + Community + %span.tip + These materials are written by external contributors. + %br + - unless current_visitor.anonymous? + #show-only-filters.filter-group + %h2.filterheader + Show Only + .filter-group__options.webkit_scrollbars + .authored_by_me + = check_box_tag 'include_mine', '1', params[:include_mine], :id => 'include_mine', :class => 'include_mine' + %label.tooltip{:for => "include_mine", :class => 'include_mine'} + = t "search.only_mine" + .only_show_archived + = check_box_tag 'show_archived', '1', params[:show_archived], :id => 'show_archived', :class => 'show_archived' + %label.tooltip{:for => "show archived", :class => 'show_archived'} + = t "search.only_archived" + -if @form_model.available_sensors.size > 0 + .filter-row + #sensor-filters.filter-group + = render :partial => "search/sensors_filter" = render :partial=>"search/customize_filters" - :javascript jQuery(function(){ diff --git a/rails/app/views/search/_projects_filter.html.haml b/rails/app/views/search/_projects_filter.html.haml index f44aae40fa..fa30653698 100644 --- a/rails/app/views/search/_projects_filter.html.haml +++ b/rails/app/views/search/_projects_filter.html.haml @@ -1,7 +1,7 @@ - if @form_model.available_projects.size > 0 %h2.filterheader Collections - .filter-group__options.webkit_scrollbars + .filter-group__options.webkit_scrollbars.projects - puts @form_model.available_projects - @form_model.available_projects.sort_by { |p| p[:name].downcase }.each do |project| = check_box_tag 'project_ids[]', project[:id], @form_model.project_ids.include?(project[:id].to_s), id: "project_#{project[:id]}", class: 'check-box-left-margin' diff --git a/rails/app/views/search/_sensors_filter.html.haml b/rails/app/views/search/_sensors_filter.html.haml index b0ef11404a..93c414c1cb 100644 --- a/rails/app/views/search/_sensors_filter.html.haml +++ b/rails/app/views/search/_sensors_filter.html.haml @@ -1,7 +1,7 @@ -if @form_model.available_sensors.size > 0 %h2.filterheader Sensors - .filter-group__options.webkit_scrollbars + .filter-group__options.webkit_scrollbars.sensors = 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' %br 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 3ba01b614b..02e9689b51 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 @@ -11,6 +11,7 @@ .finderResultsFeaturedTitle { display: flex; justify-content: space-between; + padding-bottom: 5px; a { margin-right: 25px; 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 8143f5c221..b86af2556a 100644 --- a/rails/react-components/src/library/components/stem-finder-result.tsx +++ b/rails/react-components/src/library/components/stem-finder-result.tsx @@ -363,7 +363,7 @@ const StemFinderResult = Component({ const resourceName = resource.name; const resourceLink = resource.stem_resource_url; const shortDesc = resource.filteredShortDescription; - const projectName = resource.projects[0] ? resource.projects[0].name : null; + const projectName = resource.projects.length > 1 ? "Multiple Projects" : (resource.projects[0] ? resource.projects[0].name : null); const projectNameRegex = / |-|\./g; const projectClass = projectName ? projectName.replace(projectNameRegex, "").toLowerCase() : null; const transitionDelay = 100 * index; diff --git a/rails/react-components/src/library/components/stem-finder.tsx b/rails/react-components/src/library/components/stem-finder.tsx index f1303a50cd..9c60b7e10f 100644 --- a/rails/react-components/src/library/components/stem-finder.tsx +++ b/rails/react-components/src/library/components/stem-finder.tsx @@ -241,7 +241,9 @@ class StemFinder extends React.Component { query = query.concat([ "&skip_lightbox_reloads=true", "&sort_order=Alphabetical", - "&model_types=All", + "&material_types[]=Investigation", + "&material_types[]=Activity", + "&material_types[]=Interactive", "&include_related=0", "&investigation_page=", String(searchPage), @@ -249,12 +251,17 @@ class StemFinder extends React.Component { String(searchPage), "&interactive_page=", String(searchPage), - "&collection_page=", - String(searchPage), "&per_page=", String(DISPLAY_LIMIT_INCREMENT) ]); + // only search collections on first search and gather all of them at once + if (!incremental) { + query.push("&material_types[]=Collection"); + query.push("&collection_page=1"); + query.push("&collection_per_page=1000"); + } + // subject areas this.state.subjectAreasSelected.forEach((subjectArea: any) => { subjectArea.searchAreas.forEach((searchArea: any) => { diff --git a/rails/react-components/src/library/styles/navigation/_main_nav.scss b/rails/react-components/src/library/styles/navigation/_main_nav.scss index ad02ed52dc..099486e356 100644 --- a/rails/react-components/src/library/styles/navigation/_main_nav.scss +++ b/rails/react-components/src/library/styles/navigation/_main_nav.scss @@ -1,6 +1,9 @@ .portal-pages-header-contain { height: 195px; - margin-bottom: 30px; + margin-bottom: 0; +} +.portal-pages-hero { + margin-bottom: 10px !important; } /* top bar */ @@ -45,7 +48,7 @@ } .concord-logo { background: url(./assets/banners/concord-logo.svg) no-repeat center; - height: 91px; + height: 45px; overflow: hidden; text-indent: 300px; white-space: nowrap; @@ -57,11 +60,11 @@ } .theme-learn .logo-contain { - margin-bottom: 0; + margin: 10px 0; } .theme-learn .concord-logo { background: url(./assets/banners/concord-logo.svg) no-repeat top; - height: 120px; + // height: 120px; position: relative; text-indent: 0; @@ -75,8 +78,13 @@ position: absolute; text-indent: 100%; white-space: nowrap; - } } +} +@media screen and (max-width: 950px) { + .theme-learn .mobile-nav-contain { + margin-top: 20px; + } +} .portal-pages-nav-auth { min-width: 200px; @@ -85,7 +93,7 @@ .portal-pages-main-nav-contain { position: relative; - margin-top: 65px; + margin-top: 10px; text-align: right; } @@ -102,7 +110,7 @@ transition: .2s; z-index: 100; } - + > a { padding: 0 0 8px 0; cursor: pointer; @@ -220,7 +228,7 @@ opacity: 1; text-align: left; transition: .2s; - + &:last-of-type { margin: 0 0 4px 0; } @@ -235,7 +243,8 @@ display: none; } .logo-contain { - margin-top: 12px; + margin: 10px 0 0 0; + .concord-logo { background: url(./assets/banners/concord-logo-small.png) no-repeat center top; background-size: 100%;