From 257210b9a9cd05100239f421a6eae39b7b111d35 Mon Sep 17 00:00:00 2001 From: Finn Bacall Date: Mon, 15 Dec 2025 16:40:52 +0000 Subject: [PATCH 1/2] Dropdown to adjust page size. Fixes #1195 --- app/assets/javascripts/application.js | 9 +++++++++ app/assets/stylesheets/application.scss | 13 ++++++++++++- app/controllers/concerns/searchable_index.rb | 5 ++++- app/helpers/application_helper.rb | 5 +++++ app/views/search/common/_search_panel.html.erb | 4 ++++ config/locales/en.yml | 1 + 6 files changed, 35 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 05cdaf77c..804750af7 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -50,6 +50,15 @@ function redirect_to_sort_url(){ window.location.replace(url.toString()); } +function apply_per_page(){ + url = new URL(window.location.href); + url.searchParams.set( + "per_page", + $("#per_page").val() + ); + window.location.replace(url.toString()); +} + function redirect_with_updated_search(param, paramVal) { url = new URL(window.location.href); // special case for empty range types diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index d1c858952..4267bb9e3 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -418,10 +418,21 @@ ul.unstyled { } .search-results-count { - margin-right: 5px; + margin-right: 1em; display: inline-block } +.search-results-per-page { + display: inline-block; + + select { + border: none; + padding: 0; + background: transparent; + border-bottom: 1px dashed $text-color; + } +} + .index-display-options { margin: 5px 0; } diff --git a/app/controllers/concerns/searchable_index.rb b/app/controllers/concerns/searchable_index.rb index acd792dae..2591b3030 100644 --- a/app/controllers/concerns/searchable_index.rb +++ b/app/controllers/concerns/searchable_index.rb @@ -1,5 +1,8 @@ # The concern for searchable index module SearchableIndex + DEFAULT_PAGE_SIZE = 10 + PER_PAGE_OPTIONS = [10, 20, 50, 100] + extend ActiveSupport::Concern included do @@ -19,7 +22,7 @@ def count def fetch_resources if TeSS::Config.solr_enabled page = page_param.blank? ? 1 : page_param.to_i - per_page = per_page_param.blank? ? 10 : per_page_param.to_i + per_page = per_page_param.blank? ? DEFAULT_PAGE_SIZE : per_page_param.to_i @search_results = @model.search_and_filter(current_user, @search_params, @facet_params, page: page, per_page: per_page, sort_by: @sort_by) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 13ea4950b..9cc2a3718 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -708,4 +708,9 @@ def omniauth_login_link(provider, config) method: :post ) end + + def per_page_options_for_select + options_for_select(SearchableIndex::PER_PAGE_OPTIONS.map { |k| [k, k] }, + params[:per_page].presence || SearchableIndex::DEFAULT_PAGE_SIZE) + end end diff --git a/app/views/search/common/_search_panel.html.erb b/app/views/search/common/_search_panel.html.erb index c4ecd8782..289adf2cb 100644 --- a/app/views/search/common/_search_panel.html.erb +++ b/app/views/search/common/_search_panel.html.erb @@ -27,6 +27,10 @@
<%= pluralize(resources.total, resource_type.model_name.human.downcase ) %> found
+
+ + <%= select_tag('per_page', per_page_options_for_select, onchange: 'apply_per_page()', class: 'font-size-sm') %> +
<% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index d5650cfb0..2926a6b55 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -910,6 +910,7 @@ en: values: show_hidden: 'Show hidden items' hide_hidden: 'Hide hidden items' + per_page: 'Results per page: ' collections: show: curate_materials: "Curate materials" From f811c6411d2c92534ad4c4caecc28d48435e7b61 Mon Sep 17 00:00:00 2001 From: Finn Bacall Date: Tue, 16 Dec 2025 15:21:21 +0000 Subject: [PATCH 2/2] Namespace and camelCase some JS functions --- app/assets/javascripts/application.js | 82 +++++++++---------- .../_facet_sidebar_date_filter.html.erb | 4 +- .../search/common/_search_panel.html.erb | 2 +- app/views/search/common/_sort_by.html.erb | 2 +- 4 files changed, 44 insertions(+), 46 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 804750af7..157ca851f 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -41,45 +41,41 @@ //= require ol //= require ol-geocoder -function redirect_to_sort_url(){ - url = new URL(window.location.href); - url.searchParams.set( - "sort", - $("#sort").find(":selected").val() - ); - window.location.replace(url.toString()); -} - -function apply_per_page(){ - url = new URL(window.location.href); - url.searchParams.set( - "per_page", - $("#per_page").val() - ); - window.location.replace(url.toString()); -} - -function redirect_with_updated_search(param, paramVal) { - url = new URL(window.location.href); - // special case for empty range types - if (param == 'start' && paramVal == '/') { - url.searchParams.delete(param); - } else { - url.searchParams.set(param, paramVal); - } - window.location.replace(url.toString()); -} - -function reposition_tiles(container, tileClass){ - var $container = $("." + container); - - $container.imagesLoaded(function () { - $container.masonry({ - // options... - itemSelector: "." + tileClass, - columnWidth: 20 +const Index = { + applySorting: function () { + Index.setParam("sort", $("#sort").val()); + }, + + applyPerPage: function () { + Index.setParam("per_page", $("#per_page").val()); + }, + + applyDateParam: function (param, value) { + const url = new URL(window.location.href); + if (param === 'start' && value === '/') { + url.searchParams.delete(param); + } else { + url.searchParams.set(param, value); + } + window.location.replace(url.toString()); + }, + + setParam: function (param, value) { + const url = new URL(window.location.href); + url.searchParams.set(param, value); + window.location.replace(url.toString()); + }, + + repositionTiles(containerSelector, itemSelector) { + const container = $(containerSelector); + container.imagesLoaded(function () { + container.masonry({ + // options... + itemSelector: itemSelector, + columnWidth: 20 + }); }); - }); + } } // Perform an ajax request to load the calendar and replace the contents @@ -161,7 +157,7 @@ document.addEventListener("turbolinks:load", function(e) { $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { addTabToFilters(e.target.href.split('#').pop()); // and reposition masonry tiles - reposition_tiles('masonry', 'masonry-brick'); + Index.repositionTiles('.masonry', '.masonry-brick'); }); // Manually trigger bootstrap tab history (we should probably remove the dependency and reimplement in a turbolink-compatible way) @@ -177,12 +173,14 @@ document.addEventListener("turbolinks:load", function(e) { // Masonry $(".nav-tabs a").on("shown.bs.tab", function(e) { - reposition_tiles('masonry', 'masonry-brick'); + Index.repositionTiles('.masonry', '.masonry-brick'); }); + $(window).on("orientationchange", function() { - reposition_tiles("masonry", "masonry-brick"); + Index.repositionTiles('.masonry', '.masonry-brick'); }); - reposition_tiles("masonry", "masonry-brick"); + + Index.repositionTiles('.masonry', '.masonry-brick'); new Clipboard(".clipboard-btn"); diff --git a/app/views/search/common/_facet_sidebar_date_filter.html.erb b/app/views/search/common/_facet_sidebar_date_filter.html.erb index 8ca5adcb0..4826c0d51 100644 --- a/app/views/search/common/_facet_sidebar_date_filter.html.erb +++ b/app/views/search/common/_facet_sidebar_date_filter.html.erb @@ -10,9 +10,9 @@ diff --git a/app/views/search/common/_search_panel.html.erb b/app/views/search/common/_search_panel.html.erb index 289adf2cb..9631b644a 100644 --- a/app/views/search/common/_search_panel.html.erb +++ b/app/views/search/common/_search_panel.html.erb @@ -29,7 +29,7 @@
- <%= select_tag('per_page', per_page_options_for_select, onchange: 'apply_per_page()', class: 'font-size-sm') %> + <%= select_tag('per_page', per_page_options_for_select, onchange: 'Index.applyPerPage()', class: 'font-size-sm') %>
<% end %> diff --git a/app/views/search/common/_sort_by.html.erb b/app/views/search/common/_sort_by.html.erb index 359607b5a..9037ed56a 100644 --- a/app/views/search/common/_sort_by.html.erb +++ b/app/views/search/common/_sort_by.html.erb @@ -29,7 +29,7 @@ e.g.
  • <%= select_tag(:sort, options_for_select(options, @sort_by), - onchange: 'redirect_to_sort_url()', class: 'form-control facet-select font-size-sm facet-sort') + onchange: 'Index.applySorting()', class: 'form-control facet-select font-size-sm facet-sort') %>