display flash messages

decidim-core/app/packs/src/decidim/sticky_header.js

@@ -1,5 +1,5 @@
 let prevScroll = window.scrollY;
-const stickyHeader = document.getElementById("stickyHeader");
+const stickyHeader = document.getElementById("sticky-header");
 
 document.addEventListener("scroll", () => {
   // if a subelement is not visible it has no offsetParent

decidim-core/app/packs/stylesheets/decidim/_forms.scss

@@ -1,3 +1,11 @@
+#form-search-mobile {
+  @apply py-1.5 px-4 bg-gray-6 rounded-sm;
+
+  input[type="text"] {
+    @apply bg-gray-6;
+  }
+}
+
 .form-defaults {
   /* text-like inputs */
   input[type="date"],

decidim-core/app/packs/stylesheets/decidim/_header.scss

@@ -20,15 +20,25 @@ header {
     }
   }
 
-  #menu-bar {
+  #flash-messages-container {
+    @apply mt-28 md:mt-0;
+  }
+
+  #menu-bar-container {
     @apply mt-24 md:mt-0;
   }
 
-  &.with-admin-bar #menu-bar {
-    @apply mt-[140px];
+  &.with-admin-bar {
+    #flash-messages-container {
+      @apply mt-40 md:mt-0;
+    }
+
+    #menu-bar-container{
+      @apply mt-[140px] md:mt-0;
+    } 
   }
 
-  #stickyHeader {
+  #sticky-header {
     @apply fixed top-0 shadow-lg z-40 bg-white md:relative;
 
     transition: top 0.3s;

decidim-core/app/views/layouts/decidim/_wrapper.html.erb

@@ -12,16 +12,18 @@ end
 
 <div class="layout-container">
   <header <%= "class=with-admin-bar" if current_user&.admin %>>
-    <div id="stickyHeader">
+    <div id="sticky-header">
       <%= render partial: "layouts/decidim/admin_links" if current_user&.admin %>
       <%= render partial: "layouts/decidim/header/main" %>
     </div>
-    <% if display_flash_messages.present? %>
-      <div class="container">
-        <%= display_flash_messages %>
-      </div>
-    <% end %>
-    <%= render partial: "layouts/decidim/header/menu" unless controller_name == "homepage" %>
+    <div id="menu-bar-container">
+      <% if display_flash_messages.present? %>
+        <div id="flash-messages-container" class="container">
+          <%= display_flash_messages %>
+        </div>
+      <% end %>
+      <%= render partial: "layouts/decidim/header/menu" unless controller_name == "homepage" %>
+    </div>
   </header>
 
   <div id="content" data-content>

decidim-core/app/views/layouts/decidim/header/_menu_form_search_mobile.html.erb

@@ -1,4 +1,4 @@
-<%= form_tag(decidim.search_path, method: :get, class: "filter-search") do %>
+<%= form_tag(decidim.search_path, method: :get, id: "form-search-mobile", class: "filter-search") do %>
         <%= text_field_tag(
             :term,
             nil,

decidim-core/app/views/layouts/decidim/header/_mobile_language_choose.html.erb

@@ -12,7 +12,7 @@
                 <% end %>
             </span>
     </button>
-    <div id="dropdown-menu-language-chooser" class="bg-gray-5 relative" aria-hidden="true">
+    <div id="dropdown-menu-language-chooser" class="bg-gray-7 relative" aria-hidden="true">
         <ul class="menu-bar__language-chooser" role="menu">
         <% (available_locales - [I18n.locale.to_s]).each do |locale| %>
             <li class="text-black text-xs hover:bg-secondary hover:text-white transition" role="presentation">

decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb

@@ -45,7 +45,9 @@ module.exports = {
         2: "#3E4C5C",
         3: "#E1E5EF",
         4: "#242424",
-        5: "#F6F8FA"
+        5: "#F6F8FA",
+        6: "#F3F4F7",
+        7: "#FAFBFC"
       },
       background: {
         DEFAULT: "#F3F4F7",

decidim-core/spec/system/mobile_header_spec.rb

@@ -6,45 +6,70 @@
   let(:organization) { create(:organization) }
   let!(:user) { create(:user, :admin, :confirmed, organization:) }
 
-  before do
-    driven_by(:iphone)
-    switch_to_host(organization.host)
-    visit decidim.root_path
-    click_on(id: "dc-dialog-accept")
-  end
-
-  context "when user view the header" do
-    it "has a favicon as the logo" do
-      expect(page).to have_css(".main-bar__logo")
+  context "when user visit a desktop browser" do
+    before do
+      switch_to_host(organization.host)
+      visit decidim.root_path
     end
 
-    it "includes a clearly visible login access" do
-      expect(page).to have_css(".main-bar__links-mobile__login")
+    it "does not have a sticky header" do
+      expect(page).to have_no_css(".with-admin-bar")
     end
-  end
 
-  context "when user access to the hamburger menu" do
-    before do
-      click_on(id: "main-dropdown-summary-mobile")
+    it "does not include mobile login classes" do
+      expect(page).to have_no_css(".main-bar__links-mobile__login")
     end
 
-    it "includes access to the language selector and search bar" do
-      within ".menu-bar__main-dropdown__top" do
-        expect(page).to have_css(".filter-search")
-        expect(page).to have_css("#trigger-dropdown-language-chooser-mobile")
-      end
+    it "does not include a dropdown menu" do
+      expect(page).to have_no_css("#main-dropdown-summary-mobile")
     end
   end
 
-  context "when user login is confirmed" do
+  context "when user visit a mobile browser" do
     before do
+      driven_by(:iphone)
       switch_to_host(organization.host)
-      login_as user, scope: :user
       visit decidim.root_path
+      click_on(id: "dc-dialog-accept")
+    end
+
+    it "has a sticky header" do
+      expect(page).to have_css("#sticky-header")
     end
 
-    it "displays an avatar on the header" do
-      expect(page).to have_css(".main-bar__avatar")
+    context "when user view the header" do
+      it "has a favicon as the logo" do
+        expect(page).to have_css(".main-bar__logo")
+      end
+
+      it "includes a clearly visible login access" do
+        expect(page).to have_css(".main-bar__links-mobile__login")
+      end
+    end
+
+    context "when user access to the hamburger menu" do
+      before do
+        click_on(id: "main-dropdown-summary-mobile")
+      end
+
+      it "includes access to the language selector and search bar" do
+        within ".menu-bar__main-dropdown__top" do
+          expect(page).to have_css(".filter-search")
+          expect(page).to have_css("#trigger-dropdown-language-chooser-mobile")
+        end
+      end
+    end
+
+    context "when user login is confirmed" do
+      before do
+        switch_to_host(organization.host)
+        login_as user, scope: :user
+        visit decidim.root_path
+      end
+
+      it "displays an avatar on the header" do
+        expect(page).to have_css(".main-bar__avatar")
+      end
     end
   end
 end