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:
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<nav class="small-12 medium-9 column">
|
||||
<nav>
|
||||
<ul>
|
||||
<%= raw content_block("subnavigation_left") %>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user