consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #4567 from consul/advanced_search_position

Browse Source 
Fix advanced search button position
This commit is contained in:
Javi Martín
2021-06-29 14:45:02 +02:00
committed by GitHub
parent a783b1a3d0 16401dafdb
commit a8fe8aceda
5 changed files with 135 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/assets/javascripts/advanced_search.js
View File

@@ -1,13 +1,6 @@
(function() {
"use strict";
App.AdvancedSearch = {
advanced_search_terms: function() {
return $("#js-advanced-search").data("advanced-search-terms");
},
toggle_form: function(event) {
event.preventDefault();
$("#js-advanced-search").slideToggle();
},
toggle_date_options: function() {
if ($("#js-advanced-search-date-min").val() === "custom") {
$("#js-custom-date").show();
@@ -18,13 +11,19 @@
}
},
initialize: function() {
if (App.AdvancedSearch.advanced_search_terms()) {
$("#js-advanced-search").show();
var toggle_button = $("#js-advanced-search-title");
toggle_button.removeAttr("hidden");
if (toggle_button.attr("aria-expanded") === "true") {
App.AdvancedSearch.toggle_date_options();
} else {
toggle_button.next().hide();
}
$("#js-advanced-search-title").on({
click: function(event) {
App.AdvancedSearch.toggle_form(event);
toggle_button.on({
click: function() {
$(this).attr("aria-expanded", !JSON.parse($(this).attr("aria-expanded")));
$(this).next().slideToggle();
}
});
$("#js-advanced-search-date-min").on({

36
app/assets/stylesheets/advanced_search.scss
View File

@@ -1,18 +1,7 @@
.advanced-search {
float: left;
margin: $line-height 0;
position: inherit;
@include breakpoint(medium) {
float: right;
margin-bottom: 0;
margin-top: $line-height / 4;
position: absolute;
right: 0;
}
}
.advanced-search-form {
@include grid-row-nest;
display: flex;
flex-direction: column;
@include breakpoint(large) {
.filter {
@@ -38,6 +27,25 @@
}
}
> [aria-expanded] {
@include xy-gutters;
color: $link;
cursor: pointer;
margin-top: $line-height;
margin-bottom: $line-height;
max-width: max-content;
@include breakpoint(medium) {
align-self: flex-end;
margin-bottom: 0;
margin-top: $line-height / 4;
}
&:focus {
outline: $outline-focus;
}
}
.general-search,
.filter,
.submit {

132
app/components/shared/advanced_search_component.html.erb
View File

@@ -1,70 +1,66 @@
<div class="relative">
<%= link_to t("shared.advanced_search.title"), "#advanced_search_form", id: "js-advanced-search-title", class: "advanced-search small" %>
</div>
<div class="row advanced-search-form">
<%= form_tag request.path, id: "advanced_search_form", method: :get do %>
<div id="js-advanced-search" data-advanced-search-terms="<%= advanced_search.present? %>" style="display: none">
<div class="general-search">
<label for="search">
<%= t("shared.advanced_search.general") %>
</label>
<%= text_field_tag "search", params[:search],
placeholder: t("shared.advanced_search.general_placeholder") %>
</div>
<div class="date-filters">
<div class="filter">
<label for="js-advanced-search-date-min"><%= t("shared.advanced_search.date") %></label>
<%= select_tag("advanced_search[date_min]", date_range_options,
include_blank: t("shared.advanced_search.date_range_blank"),
id: "js-advanced-search-date-min") %>
</div>
<div id="js-custom-date" class="custom-date-filters" style="display: none">
<div class="filter">
<label for="advanced_search_date_min">
<%= t("shared.advanced_search.from") %> (<%= t("shared.advanced_search.date_placeholder") %>)
</label>
<%= text_field_tag "advanced_search[date_min]",
advanced_search[:date_min],
class: "js-calendar" %>
</div>
<div class="filter">
<label for="advanced_search_date_max">
<%= t("shared.advanced_search.to") %> (<%= t("shared.advanced_search.date_placeholder") %>)
</label>
<%= text_field_tag "advanced_search[date_max]",
advanced_search[:date_max],
class: "js-calendar" %>
</div>
</div>
</div>
<div class="filter">
<label for="advanced_search_official_level"><%= t("shared.advanced_search.author_type") %></label>
<%= select_tag("advanced_search[official_level]", official_level_search_options,
include_blank: t("shared.advanced_search.author_type_blank")) %>
</div>
<% if sdg? %>
<div class="filter">
<label for="advanced_search_goal"><%= t("shared.advanced_search.goal") %></label>
<%= select_tag("advanced_search[goal]", goal_options,
include_blank: t("shared.advanced_search.goal_blank")) %>
</div>
<div class="filter">
<label for="advanced_search_target"><%= t("shared.advanced_search.target") %></label>
<%= select_tag("advanced_search[target]", target_options,
include_blank: t("shared.advanced_search.target_blank")) %>
</div>
<% end %>
<div class="submit">
<%= submit_tag t("shared.advanced_search.search"), class: "button expanded" %>
</div>
<%= form_tag request.path, id: "advanced_search_form", class: "advanced-search-form", method: :get do %>
<button type="button" aria-expanded="<%= advanced_search.present? %>" id="js-advanced-search-title" class="advanced-search small" hidden>
<%= t("shared.advanced_search.title") %>
</button>
<div>
<div class="general-search">
<label for="search">
<%= t("shared.advanced_search.general") %>
</label>
<%= text_field_tag "search", params[:search],
placeholder: t("shared.advanced_search.general_placeholder") %>
</div>
<% end %>
</div>
<div class="date-filters">
<div class="filter">
<label for="js-advanced-search-date-min"><%= t("shared.advanced_search.date") %></label>
<%= select_tag("advanced_search[date_min]", date_range_options,
include_blank: t("shared.advanced_search.date_range_blank"),
id: "js-advanced-search-date-min") %>
</div>
<div id="js-custom-date" class="custom-date-filters" style="display: none">
<div class="filter">
<label for="advanced_search_date_min">
<%= t("shared.advanced_search.from") %> (<%= t("shared.advanced_search.date_placeholder") %>)
</label>
<%= text_field_tag "advanced_search[date_min]",
advanced_search[:date_min],
class: "js-calendar" %>
</div>
<div class="filter">
<label for="advanced_search_date_max">
<%= t("shared.advanced_search.to") %> (<%= t("shared.advanced_search.date_placeholder") %>)
</label>
<%= text_field_tag "advanced_search[date_max]",
advanced_search[:date_max],
class: "js-calendar" %>
</div>
</div>
</div>
<div class="filter">
<label for="advanced_search_official_level"><%= t("shared.advanced_search.author_type") %></label>
<%= select_tag("advanced_search[official_level]", official_level_search_options,
include_blank: t("shared.advanced_search.author_type_blank")) %>
</div>
<% if sdg? %>
<div class="filter">
<label for="advanced_search_goal"><%= t("shared.advanced_search.goal") %></label>
<%= select_tag("advanced_search[goal]", goal_options,
include_blank: t("shared.advanced_search.goal_blank")) %>
</div>
<div class="filter">
<label for="advanced_search_target"><%= t("shared.advanced_search.target") %></label>
<%= select_tag("advanced_search[target]", target_options,
include_blank: t("shared.advanced_search.target_blank")) %>
</div>
<% end %>
<div class="submit">
<%= submit_tag t("shared.advanced_search.search"), class: "button expanded" %>
</div>
</div>
<% end %>

18
spec/components/shared/advanced_search_component_spec.rb
View File

@@ -1,9 +1,23 @@
require "rails_helper"
describe Shared::AdvancedSearchComponent, type: :component do
describe "SDG filter" do
let(:component) { Shared::AdvancedSearchComponent.new }
let(:component) { Shared::AdvancedSearchComponent.new }
context "JavaScript disabled" do
it "renders the form" do
render_inline component
expect(page).to have_button "Filter"
end
it "hides the button to show the form" do
render_inline component
expect(page.find("form")).to have_button "Advanced search", visible: :hidden
end
end
describe "SDG filter" do
before do
Setting["feature.sdg"] = true
Setting["sdg.process.proposals"] = true

44
spec/system/advanced_search_spec.rb
View File

@@ -11,7 +11,7 @@ describe "Advanced search" do
visit debates_path
click_link "Advanced search"
click_button "Advanced search"
fill_in "Write the text", with: "Schwifty"
click_button "Filter"
@@ -31,7 +31,7 @@ describe "Advanced search" do
visit proposals_path
click_link "Advanced search"
click_button "Advanced search"
fill_in "Write the text", with: "Schwifty"
click_button "Filter"
@@ -51,7 +51,7 @@ describe "Advanced search" do
visit budget_investments_path(budget)
click_link "Advanced search"
click_button "Advanced search"
fill_in "Write the text", with: "Schwifty"
click_button "Filter"
@@ -76,7 +76,7 @@ describe "Advanced search" do
visit debates_path
click_link "Advanced search"
click_button "Advanced search"
select "Official position 1", from: "advanced_search_official_level"
click_button "Filter"
@@ -100,7 +100,7 @@ describe "Advanced search" do
visit proposals_path
click_link "Advanced search"
click_button "Advanced search"
select "Official position 2", from: "advanced_search_official_level"
click_button "Filter"
@@ -124,7 +124,7 @@ describe "Advanced search" do
visit budget_investments_path(budget)
click_link "Advanced search"
click_button "Advanced search"
select "Official position 3", from: "advanced_search_official_level"
click_button "Filter"
@@ -148,7 +148,7 @@ describe "Advanced search" do
visit debates_path
click_link "Advanced search"
click_button "Advanced search"
select "Official position 4", from: "advanced_search_official_level"
click_button "Filter"
@@ -172,7 +172,7 @@ describe "Advanced search" do
visit proposals_path
click_link "Advanced search"
click_button "Advanced search"
select "Official position 5", from: "advanced_search_official_level"
click_button "Filter"
@@ -194,7 +194,7 @@ describe "Advanced search" do
visit budget_investments_path(budget)
click_link "Advanced search"
click_button "Advanced search"
select "Last 24 hours", from: "js-advanced-search-date-min"
click_button "Filter"
@@ -214,7 +214,7 @@ describe "Advanced search" do
visit debates_path
click_link "Advanced search"
click_button "Advanced search"
select "Last week", from: "js-advanced-search-date-min"
click_button "Filter"
@@ -234,7 +234,7 @@ describe "Advanced search" do
visit proposals_path
click_link "Advanced search"
click_button "Advanced search"
select "Last month", from: "js-advanced-search-date-min"
click_button "Filter"
@@ -254,7 +254,7 @@ describe "Advanced search" do
visit budget_investments_path(budget)
click_link "Advanced search"
click_button "Advanced search"
select "Last year", from: "js-advanced-search-date-min"
click_button "Filter"
@@ -275,7 +275,7 @@ describe "Advanced search" do
visit debates_path
click_link "Advanced search"
click_button "Advanced search"
select "Customized", from: "js-advanced-search-date-min"
fill_in "advanced_search_date_min", with: 7.days.ago.strftime("%d/%m/%Y")
fill_in "advanced_search_date_max", with: 1.day.ago.strftime("%d/%m/%Y")
@@ -298,7 +298,7 @@ describe "Advanced search" do
visit proposals_path
click_link "Advanced search"
click_button "Advanced search"
select "Customized", from: "js-advanced-search-date-min"
fill_in "advanced_search_date_min", with: 4000.years.ago.strftime("%d/%m/%Y")
fill_in "advanced_search_date_max", with: "13/13/2199"
@@ -325,7 +325,7 @@ describe "Advanced search" do
visit budget_investments_path(budget)
click_link "Advanced search"
click_button "Advanced search"
fill_in "Write the text", with: "Schwifty"
select "Official position 1", from: "advanced_search_official_level"
select "Last 24 hours", from: "js-advanced-search-date-min"
@@ -343,7 +343,7 @@ describe "Advanced search" do
Setting["official_level_1_name"] = "Official position 1"
visit debates_path
click_link "Advanced search"
click_button "Advanced search"
fill_in "Write the text", with: "Schwifty"
select "Official position 1", from: "advanced_search_official_level"
@@ -351,7 +351,7 @@ describe "Advanced search" do
click_button "Filter"
within "#js-advanced-search" do
within ".advanced-search-form" do
expect(page).to have_selector("input[name='search'][value='Schwifty']")
expect(page).to have_select("advanced_search[official_level]", selected: "Official position 1")
expect(page).to have_select("advanced_search[date_min]", selected: "Last 24 hours")
@@ -360,7 +360,7 @@ describe "Advanced search" do
scenario "Maintain custom date search criteria" do
visit proposals_path
click_link "Advanced search"
click_button "Advanced search"
select "Customized", from: "js-advanced-search-date-min"
fill_in "advanced_search_date_min", with: 7.days.ago.strftime("%d/%m/%Y")
@@ -370,7 +370,7 @@ describe "Advanced search" do
expect(page).to have_content("citizen proposals cannot be found")
within "#js-advanced-search" do
within ".advanced-search-form" do
expect(page).to have_select("advanced_search[date_min]", selected: "Customized")
expect(page).to have_selector("input[name='advanced_search[date_min]'][value*='#{7.days.ago.strftime("%d/%m/%Y")}']")
expect(page).to have_selector("input[name='advanced_search[date_max]'][value*='#{1.day.ago.strftime("%d/%m/%Y")}']")
@@ -391,7 +391,7 @@ describe "Advanced search" do
create(:budget_investment, title: "Hospital", heading: heading, sdg_goals: [SDG::Goal[3]])
visit budget_investments_path(budget)
click_link "Advanced search"
click_button "Advanced search"
select "6. Clean Water and Sanitation", from: "By SDG"
click_button "Filter"
@@ -413,7 +413,7 @@ describe "Advanced search" do
create(:debate, title: "Preschool", sdg_targets: [SDG::Target["4.2"]])
visit debates_path
click_link "Advanced search"
click_button "Advanced search"
select "4.2", from: "By target"
click_button "Filter"
@@ -429,7 +429,7 @@ describe "Advanced search" do
scenario "Dynamic target options depending on the selected goal" do
visit proposals_path
click_link "Advanced search"
click_button "Advanced search"
select "1. No Poverty", from: "By SDG"
expect(page).to have_select "By target",