Simplify subnavigation layout

Using `flex` instead of a fixed width for the navigation, the elements
take all the available space when the search form isn't present. That
wasn't the case before and produced a strange effect on medium-sized
screens.

This way we also align the search to the right.
This commit is contained in:
Javi Martín
2021-07-07 23:08:32 +02:00
parent 1bba51d161
commit a4eff3aa19
6 changed files with 27 additions and 30 deletions

View File

@@ -692,21 +692,18 @@ body > header,
.subnavigation {
@include full-width-background;
@include breakpoint(small only) {
@include grid-row-nest;
}
@include grid-column-gutter;
display: flex;
flex-direction: column;
@include breakpoint(medium) {
background: $body-background;
color: $text;
flex-direction: row;
padding-bottom: 0;
}
.search-form-header {
@include breakpoint(small only) {
padding-left: rem-calc(map-get($grid-column-gutter, small) / 2);
> :first-child {
flex-grow: 1;
}
}
@@ -790,6 +787,11 @@ body > header,
}
}
.subnavigation-with-top-links {
padding-left: 0;
padding-right: 0;
}
.top-bar-right {
.is-active {

View File

@@ -33,25 +33,20 @@
</ul>
<div class="show-for-small-only">
<div class="subnavigation row">
<div class="subnavigation subnavigation-with-top-links">
<%= render "shared/subnavigation" %>
<div class="small-12 column">
<%= render "shared/top_links" %>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="navigation_bar" class="subnavigation expanded">
<div class="row">
<div id="navigation_bar" class="subnavigation">
<div class="hide-for-small-only">
<%= render "shared/subnavigation" %>
</div>
<div class="small-12 medium-3 column">
<%= yield :header_addon %>
</div>
</div>
</div>
</header>

View File

@@ -1,4 +1,4 @@
<nav class="small-12 medium-9 column">
<nav>
<ul>
<%= raw content_block("subnavigation_left") %>

View File

@@ -181,7 +181,7 @@ describe "Budget Investments" do
visit budget_investments_path(budget, heading_id: heading.id)
within(".expanded #search_form") do
within "#search_form" do
fill_in "search", with: "Schwifty"
click_button "Search"
end

View File

@@ -536,7 +536,7 @@ describe "Debates" do
visit debates_path
within(".expanded #search_form") do
within "#search_form" do
fill_in "search", with: "Schwifty"
click_button "Search"
end
@@ -553,7 +553,7 @@ describe "Debates" do
scenario "Maintain search criteria" do
visit debates_path
within(".expanded #search_form") do
within "#search_form" do
fill_in "search", with: "Schwifty"
click_button "Search"
end
@@ -629,7 +629,7 @@ describe "Debates" do
create(:debate, title: "Abcdefghi")
visit debates_path
within(".expanded #search_form") do
within "#search_form" do
fill_in "search", with: "Abcdefghi"
click_button "Search"
end

View File

@@ -1119,7 +1119,7 @@ describe "Proposals" do
visit proposals_path
within(".expanded #search_form") do
within "#search_form" do
fill_in "search", with: "Schwifty"
click_button "Search"
end
@@ -1139,7 +1139,7 @@ describe "Proposals" do
visit proposals_path
within(".expanded #search_form") do
within "#search_form" do
fill_in "search", with: proposal1.code
click_button "Search"
end
@@ -1155,7 +1155,7 @@ describe "Proposals" do
scenario "Maintain search criteria" do
visit proposals_path
within(".expanded #search_form") do
within "#search_form" do
fill_in "search", with: "Schwifty"
click_button "Search"
end
@@ -1236,7 +1236,7 @@ describe "Proposals" do
create(:proposal, title: "Abcdefghi")
visit proposals_path
within(".expanded #search_form") do
within "#search_form" do
fill_in "search", with: "Abcdefghi"
click_button "Search"
end