Skip to content

Commit

Permalink
feat: Update search styling, part 2 [PT-188117054]
Browse files Browse the repository at this point in the history 
This finishes up the search styling changes.

This also updates the search code to take a per_page value per material_type and updates the stem-finder to search for all collections on the initial search.
  • Loading branch information
@dougmartin
dougmartin committed Sep 5, 2024
1 parent fccd73c commit 4a6c509
Show file tree
Hide file tree
Showing 9 changed files with 213 additions and 174 deletions.
149 changes: 80 additions & 69 deletions rails/app/assets/stylesheets/web/search_materials.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -80,78 +81,88 @@
flex-flow: row wrap;
height: auto;
min-height: 400px;
align-content: flex-start;
gap: 10px;

.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;
}
}
.filter-row {
display: flex;
width: 100%;
flex-grow: 1;

&.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;
padding: 0 10px 10px 10px;
max-height: 150px;

&.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;

&.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 {
Expand Down
38 changes: 23 additions & 15 deletions rails/app/models/search.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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()

Expand Down Expand Up @@ -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
Expand Down
153 changes: 78 additions & 75 deletions rails/app/views/search/_filters.html.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,88 +2,91 @@
#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
#subject-area-filters.filter-group
= render :partial => "search/subject_areas_filter"
#grade-level-filters.filter-group
= render :partial => "search/grade_levels_filter"
.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"
.filter-row
#sensor-filters.filter-group
= render :partial => "search/sensors_filter"

= render :partial=>"search/customize_filters"


:javascript

jQuery(function(){
Expand Down
Loading

0 comments on commit 4a6c509

Please sign in to comment.