Updates to the result listing and result view

- Align the filter form with the rest of the layout - Add number of results to the listing view - Small styling fixes
mainio · Feb 26, 2024 · b011921 · b011921
1 parent 9ed5ab3
commit b011921
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 50 deletions.
diff --git a/app/views/decidim/accountability/results/_filters.html.erb b/app/views/decidim/accountability/results/_filters.html.erb
@@ -1,54 +1,36 @@
-<%= filter_form_for filter do |form| %>
-  <div class="row columns show-for-medium">
-    <div class="filters__section filters__section--title">
-      <div class="row">
-        <div class="columns mediumlarge-6 large-8">
-          <h3><%= t(".title") %></h3>
-        </div>
-      </div>
-    </div>
-  </div>
-
+<%= filter_form_for filter, results_path, "aria-label": t(".label") do |form| %>
   <div class="row medium-unstack">
-    <div class="columns mediumlarge-6 large-4">
-      <div class="filters__section text_filter">
-        <fieldset>
-          <legend class="mini-title"><%= t(".search") %></legend>
-          <%= form.search_field :search_text_cont, label: false, placeholder: t(".search"), title: t(".search"), "aria-label": t(".search"), data: { disable_dynamic_change: true } %>
-        </fieldset>
+    <div class="columns">
+      <div class="filters__control text_filter">
+        <%= form.search_field :search_text_cont, label: t(".term"), placeholder: t(".term"), data: { disable_dynamic_change: true } %>
       </div>
     </div>
 
     <% if current_participatory_space.has_subscopes? %>
-      <div class="columns mediumlarge-6 large-4 <%= " end" if !current_component.categories.any? %>">
-        <div class="filters__section with_scope_filter">
-          <fieldset>
-            <legend class="mini-title"><%= t(".scope") %></legend>
-            <% scopes = current_component.scope&.children || current_participatory_space.scope&.children || current_organization.scopes.top_level %>
-            <%= form.select(:with_scope, scope_picker_options(scopes, form.object.send(:with_scope)), { label: false, include_blank: t("forms.scopes_picker.prompt", item_name: t(".scope").downcase) }, "aria-label": t(".scope"), data: { disable_dynamic_change: true }) %>
-          </fieldset>
+      <div class="columns">
+        <div class="filters__control with_scope_filter">
+          <% scopes = current_component.scope&.children || current_participatory_space.scope&.children || current_organization.scopes.top_level %>
+          <%= form.select(:with_scope, scope_picker_options(scopes, form.object.send(:with_scope)), { label: t(".scope"), include_blank: t(".scopes_values.all", item_name: t(".scope").downcase) }, data: { disable_dynamic_change: true }) %>
         </div>
       </div>
     <% end %>
 
     <% if current_component.categories.any? %>
-      <div class="columns mediumlarge-6 large-4 end">
-        <div class="filters__section with_category_filter">
-          <fieldset>
-            <legend class="mini-title"><%= t(".category") %></legend>
-            <%= form.select(:with_category, filter_categories_values, { label: false, include_blank: t(".category_prompt") }, "aria-label": t(".category"), data: { disable_dynamic_change: true }) %>
-          </fieldset>
+      <div class="columns">
+        <div class="filters__control category_id_filter">
+          <%= form.select(:with_category, filter_categories_values, { label: t(".category"), include_blank: t(".categories_values.all") }, data: { disable_dynamic_change: true }) %>
         </div>
       </div>
     <% end %>
   </div>
 
   <div class="row columns">
-    <div class="filters__section">
-      <button type="submit" class="button primary" aria-label="<%= t(".search") %>" aria-controls="projects-count projects" data-close>
+    <div class="filters__actions">
+      <button type="submit" class="button button--icon" aria-label="<%= t(".search") %>" aria-controls="results-count results" data-close>
         <%= t(".search") %>
+        <%= icon("magnifying-glass", role: "img", "aria-hidden": true) %>
       </button>
-      <button type="reset" class="button clear"><%= t ".reset" %></button>
+      <button type="reset" class="button clear text-lg"><%= t ".reset" %></button>
     </div>
   </div>
 <% end %>
diff --git a/app/views/decidim/accountability/results/_listing.html.erb b/app/views/decidim/accountability/results/_listing.html.erb
@@ -19,16 +19,21 @@
 
     <div class="tabs-content" data-tabs-content="listing-tabs">
       <div class="tabs-panel is-active" id="results-listing">
-        <div class="collection-controls">
-          <% if false %>
-            <div class="control">
-              <%= render partial: "decidim/shared/results_per_page" %>
+        <div class="collection-info row">
+          <div class="column">
+            <div id="results-count" aria-live="polite">
+              <%= render partial: "decidim/accountability_simple/shared/results_count", locals: { results: results } %>
             </div>
-          <% end %>
-        </div>
-
-        <div id="results-count">
-          <p class="show-for-sr"><%= heading_parent_level_results(results.total_count) %></p>
+          </div>
+          <div class="column">
+            <div class="collection-controls">
+              <% if false %>
+                <div class="control">
+                  <%= render partial: "decidim/shared/results_per_page" %>
+                </div>
+              <% end %>
+            </div>
+          </div>
         </div>
 
         <div id="results">

diff --git a/app/views/decidim/accountability/results/_listing.js.erb b/app/views/decidim/accountability/results/_listing.js.erb
@@ -1,6 +1,8 @@
 var $results = $('#results');
+var $resultsCount = $('#results-count');
 
 $results.html('<%= j(render partial: "decidim/accountability_simple/shared/results_parent", locals: { results: results, total_count: results.total_count }).strip.html_safe %>');
+$resultsCount.html('<%= j(render partial: "decidim/accountability_simple/shared/results_count", locals: { results: results }).strip.html_safe %>');
 
 var $dropdownMenu = $('.dropdown.menu', $results);
 $dropdownMenu.foundation();

diff --git a/app/views/decidim/accountability/results/_show_parent.html.erb b/app/views/decidim/accountability/results/_show_parent.html.erb
@@ -42,10 +42,11 @@ root_result = root_result.parent while root_result.parent
         <%= render partial: "show_result_body", locals: { result: result } %>
 
         <% if show_map? %>
-          <div class="row column" id="result_map">
+          <div id="result_map" class="margin-top-3">
             <h2><%= t(".locations") %></h2>
+
+            <%= render partial: "decidim/accountability_simple/shared/map", locals: { geocoded_results: geocoded_result } %>
           </div>
-          <%= render partial: "decidim/accountability_simple/shared/map", locals: { geocoded_results: geocoded_result } %>
         <% end %>
       </div>
 

diff --git a/app/views/decidim/accountability_simple/shared/_results_count.html.erb b/app/views/decidim/accountability_simple/shared/_results_count.html.erb
@@ -0,0 +1 @@
+<p class="lead"><%= heading_parent_level_results(results.total_count) %></p>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -88,13 +88,18 @@ en:
             one: Found 1 project
             other: "Found %{count} projects"
         filters:
-          category: Category
-          category_prompt: Choose category
+          category: Theme
+          categories_values:
+            all: All themes
+          label: Project search
           open: Open
           related_to: Related to
           reset: Clear filters
           scope: Area
+          scopes_values:
+            all: All areas
           search: Search
+          term: Keyword
           title: Search projects
         filters_small_view:
           close_modal: Close modal

diff --git a/config/locales/fi.yml b/config/locales/fi.yml
@@ -88,13 +88,18 @@ fi:
             one: Löytyi 1 hanke
             other: "Löytyi %{count} hanketta"
         filters:
-          category: Aihepiiri
-          category_prompt: Valitse aihepiiri
+          category: Teema
+          categories_values:
+            all: Kaikki teemat
+          label: Hankkeiden haku
           open: Avaa
           related_to: Liittyy
           reset: Tyhjennä rajaukset
           scope: Alue
+          scopes_values:
+            all: Kaikki alueet
           search: Hae
+          term: Hakusana
           title: Etsi hankkeista
         filters_small_view:
           close_modal: Sulje ikkuna

diff --git a/config/locales/sv.yml b/config/locales/sv.yml
@@ -88,13 +88,18 @@ sv:
             one: Hittade 1 projekt
             other: "Hittade %{count} projekt"
         filters:
-          category: Kategori
-          category_prompt: Välj kategori
+          category: Tema
+          categories_values:
+            all: Alla teman
+          label: Projektsökning
           open: Öppna
           related_to: Relaterade till
           reset: Rensa filter
           scope: Område
+          scopes_values:
+            all: Alla områden
           search: Sök
+          term: Nyckelord
           title: Sök projekt
         filters_small_view:
           close_modal: Stäng fönster
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<p class="lead"><%= heading_parent_level_results(results.total_count) %></p>