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

View File

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

View File

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

View File

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

View File

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

View File

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