Merge pull request #4503 from consul/menu_button

Increase menu button touch area on small screens

app/assets/stylesheets/admin.scss

@@ -159,14 +159,6 @@ $table-header:   #ecf1f6;
     right: 12px;
   }
 
-  .menu-icon {
-
-    &::after {
-      background: #000;
-      box-shadow: 0 7px 0 #000, 0 14px 0 #000;
-    }
-  }
-
   .notifications.unread-notifications::after {
     color: $admin-color;
   }

app/assets/stylesheets/layout.scss

@@ -667,16 +667,16 @@ body > header,
   }
 }
 
+.menu-button {
+  border: 1px solid;
+  border-radius: $button-radius;
+  color: inherit;
+  padding: 0.6em;
+}
+
 .menu-icon {
-
-  &.dark {
-
-    &:hover::after,
-    &::after {
-      background: #fff;
-      box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
-    }
-  }
+  @include hamburger($color: currentcolor, $color-hover: currentcolor);
+  cursor: inherit;
 }
 
 .title-bar {

app/views/layouts/_admin_header.html.erb

@@ -11,8 +11,10 @@
 
   <div class="expanded row admin-top-bar">
     <div class="title-bar" data-responsive-toggle="responsive_menu" data-hide-for="medium">
-      <button class="menu-icon" type="button" data-toggle="responsive_menu"></button>
-      <div class="title-bar-title"><%= t("application.menu") %></div>
+      <button class="menu-button" type="button" data-toggle="responsive_menu">
+        <span class="menu-icon"></span>
+        <span class="title-bar-title"><%= t("application.menu") %></span>
+      </button>
     </div>
 
     <div class="top-bar">

app/views/layouts/_header.html.erb

@@ -16,8 +16,10 @@
     <div class="top-bar">
 
       <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
-        <button type="button" class="menu-icon dark" data-toggle></button>
-        <%= t("application.menu") %>
+        <button type="button" class="menu-button" data-toggle>
+          <span class="menu-icon"></span>
+          <%= t("application.menu") %>
+        </button>
       </span>
 
       <h1 class="top-bar-title">

spec/spec_helper.rb

@@ -98,6 +98,15 @@ RSpec.configure do |config|
     Delayed::Worker.delay_jobs = false
   end
 
+  config.before(:each, :small_window) do
+    @window_size = Capybara.current_window.size
+    Capybara.current_window.resize_to(639, 479)
+  end
+
+  config.after(:each, :small_window) do
+    Capybara.current_window.resize_to(*@window_size)
+  end
+
   config.before(:each, :remote_translations) do
     allow(RemoteTranslations::Microsoft::AvailableLocales)
       .to receive(:available_locales).and_return(I18n.available_locales.map(&:to_s))

spec/system/admin_spec.rb

@@ -104,4 +104,22 @@ describe "Admin" do
       expect(page).to have_link "Participatory budgets"
     end
   end
+
+  describe "Menu button", :admin do
+    scenario "is not present on large screens" do
+      visit admin_root_path
+
+      expect(page).not_to have_button "Menu"
+    end
+
+    scenario "toggles the menu on small screens", :small_window do
+      visit admin_root_path
+
+      expect(page).not_to have_link "My account"
+
+      click_button "Menu"
+
+      expect(page).to have_link "My account"
+    end
+  end
 end

spec/system/debates_spec.rb

@@ -103,17 +103,7 @@ describe "Debates" do
       end
     end
 
-    context "On small devices" do
-      let!(:window_size) { Capybara.current_window.size }
-
-      before do
-        Capybara.current_window.resize_to(639, 479)
-      end
-
-      after do
-        Capybara.current_window.resize_to(*window_size)
-      end
-
+    context "On small devices", :small_window do
       scenario "Shows links to share on telegram and whatsapp too" do
         visit debate_path(create(:debate))
 

spec/system/home_spec.rb

@@ -138,6 +138,24 @@ describe "Home" do
     end
   end
 
+  describe "Menu button" do
+    scenario "is not present on large screens" do
+      visit root_path
+
+      expect(page).not_to have_button "Menu"
+    end
+
+    scenario "toggles the menu on small screens", :small_window do
+      visit root_path
+
+      expect(page).not_to have_link "Sign in"
+
+      click_button "Menu"
+
+      expect(page).to have_link "Sign in"
+    end
+  end
+
   scenario "if there are cards, the 'featured' title will render" do
     create(:widget_card,
       title: "Card text",

spec/system/proposals_spec.rb

@@ -148,17 +148,7 @@ describe "Proposals" do
       end
     end
 
-    context "On small devices" do
-      let!(:window_size) { Capybara.current_window.size }
-
-      before do
-        Capybara.current_window.resize_to(639, 479)
-      end
-
-      after do
-        Capybara.current_window.resize_to(*window_size)
-      end
-
+    context "On small devices", :small_window do
       scenario "Shows links to share on telegram and whatsapp too" do
         visit proposal_path(create(:proposal))
 
@@ -253,17 +243,7 @@ describe "Proposals" do
     end
   end
 
-  describe "Show sticky support button on mobile screens" do
-    let!(:window_size) { Capybara.current_window.size }
-
-    before do
-      Capybara.current_window.resize_to(640, 480)
-    end
-
-    after do
-      Capybara.current_window.resize_to(*window_size)
-    end
-
+  describe "Show sticky support button on small screens", :small_window do
     scenario "On a first visit" do
       proposal = create(:proposal)
       visit proposal_path(proposal)