From 768d63ad5f5ab5baf7dca197ca9ef03e5697623f Mon Sep 17 00:00:00 2001 From: SimpleTest Date: Sun, 19 Jul 2026 20:53:26 +0300 Subject: [PATCH] fix: unify responsive application header --- e2e/tests/accessibility-resilience.spec.ts | 31 +++ lib/who_need_help_web/components/layouts.ex | 261 ++++++++++++++---- .../components/layouts/root.html.heex | 51 ---- .../controllers/page_controller_test.exs | 14 +- 4 files changed, 249 insertions(+), 108 deletions(-) diff --git a/e2e/tests/accessibility-resilience.spec.ts b/e2e/tests/accessibility-resilience.spec.ts index a2bdf0e..bcbb79e 100644 --- a/e2e/tests/accessibility-resilience.spec.ts +++ b/e2e/tests/accessibility-resilience.spec.ts @@ -45,6 +45,7 @@ test("public navigation does not overflow narrow or wide viewports", async ({ br for (const viewport of [ { width: 360, height: 800 }, { width: 768, height: 1024 }, + { width: 1030, height: 900 }, { width: 1440, height: 900 }, ]) { const context = await newIsolatedContext(browser); @@ -59,6 +60,36 @@ test("public navigation does not overflow narrow or wide viewports", async ({ br expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth); await expect(page.getByRole("navigation", { name: "Primary navigation" })).toBeVisible(); + + await expect(page.locator("body > header")).toHaveCount(1); + await expect(page.locator("body > nav[aria-label='Account and language']")).toHaveCount(0); + + if (viewport.width < 1280) { + const menuButton = page.locator("summary[aria-label='Primary navigation']"); + await expect(menuButton).toBeVisible(); + await menuButton.click(); + + await expect(page.getByRole("link", { name: "Requests", exact: true })).toBeVisible(); + await expect(page.getByRole("link", { name: "Activities", exact: true })).toBeVisible(); + await expect(page.getByRole("link", { name: "Categories", exact: true })).toBeVisible(); + await expect(page.getByRole("link", { name: "Helpers", exact: true })).toBeVisible(); + await expect(page.getByRole("link", { name: "English", exact: true })).toBeVisible(); + await expect(page.getByRole("link", { name: "Log in", exact: true })).toBeVisible(); + + const openDimensions = await page.evaluate(() => ({ + clientWidth: document.documentElement.clientWidth, + scrollWidth: document.documentElement.scrollWidth, + })); + + expect(openDimensions.scrollWidth).toBeLessThanOrEqual(openDimensions.clientWidth); + } else { + await expect(page.locator("summary[aria-label='Primary navigation']")).toBeHidden(); + await expect(page.getByRole("link", { name: "Requests", exact: true })).toBeVisible(); + await expect(page.getByRole("link", { name: "English", exact: true })).toBeVisible(); + await expect(page.getByRole("link", { name: "Register", exact: true })).toBeVisible(); + await expect(page.getByRole("link", { name: "Log in", exact: true })).toBeVisible(); + } + await context.close(); } }); diff --git a/lib/who_need_help_web/components/layouts.ex b/lib/who_need_help_web/components/layouts.ex index 75f7940..63436ae 100644 --- a/lib/who_need_help_web/components/layouts.ex +++ b/lib/who_need_help_web/components/layouts.ex @@ -35,63 +35,100 @@ defmodule WhoNeedHelpWeb.Layouts do def app(assigns) do ~H""" -
-
- - + - Who Need Help +
+
+ + + + + + Who Need Help + +
-
@@ -110,6 +147,120 @@ defmodule WhoNeedHelpWeb.Layouts do """ end + attr :current_scope, :map, default: nil + attr :link_class, :string, default: "btn btn-ghost btn-sm" + + defp primary_navigation_links(assigns) do + ~H""" +
  • + <.link navigate={~p"/requests"} class={@link_class}> + {gettext("Requests")} + +
    • +
  • + <.link navigate={~p"/activities"} class={@link_class}> + {gettext("Activities")} + +
    • +
  • + <.link navigate={~p"/categories/proposals"} class={@link_class}> + {gettext("Categories")} + +
    • +
  • + <.link navigate={~p"/leaderboard"} class={@link_class}> + {gettext("Helpers")} + +
    • +
  • + <.link navigate={~p"/moderation"} class={["btn-warning", @link_class]}> + {gettext("Moderation")} + +
    • + """ + end + + defp locale_switcher(assigns) do + ~H""" +
    + + EN + + + UK + + + RU + +
    + """ + end + + attr :current_scope, :map, required: true + + defp account_menu(assigns) do + ~H""" +
    + + <.icon name="hero-user-circle" class="size-5" /> + + + {@current_scope.user.display_name || @current_scope.user.email} + + + {@current_scope.user.email} + + + <.icon name="hero-chevron-down-micro" class="size-4 opacity-60" /> + +
    +
      +
    • + <.link navigate={~p"/profile"}>{gettext("Profile")} +
      • +
    • + <.link href={~p"/users/settings"}>{gettext("Account settings")} +
      • +
    • + <.link href={~p"/users/log-out"} method="delete">{gettext("Log out")} +
      • +
    +
    +
    + """ + end + @doc """ Shows the flash group with standard titles and content. diff --git a/lib/who_need_help_web/components/layouts/root.html.heex b/lib/who_need_help_web/components/layouts/root.html.heex index 6f69fda..e40bd2a 100644 --- a/lib/who_need_help_web/components/layouts/root.html.heex +++ b/lib/who_need_help_web/components/layouts/root.html.heex @@ -51,57 +51,6 @@ > {gettext("Skip to main content")} - {@inner_content} diff --git a/test/who_need_help_web/controllers/page_controller_test.exs b/test/who_need_help_web/controllers/page_controller_test.exs index b0bab5e..77f844e 100644 --- a/test/who_need_help_web/controllers/page_controller_test.exs +++ b/test/who_need_help_web/controllers/page_controller_test.exs @@ -3,10 +3,20 @@ defmodule WhoNeedHelpWeb.PageControllerTest do test "GET /", %{conn: conn} do conn = get(conn, ~p"/") - assert html_response(conn, 200) =~ "Help can be closer than you think." + html = html_response(conn, 200) + document = LazyHTML.from_document(html) - assert html_response(conn, 200) =~ + assert html =~ "Help can be closer than you think." + + assert html =~ ~s(data-map-tile-url="https://tile.openstreetmap.org/{z}/{x}/{y}.png") + + assert Enum.count(LazyHTML.query(document, "body > header")) == 1 + + assert Enum.count(LazyHTML.query(document, "header nav[aria-label='Primary navigation']")) == + 1 + + assert Enum.empty?(LazyHTML.query(document, "body > nav[aria-label='Account and language']")) end test "GET / selects Russian locale", %{conn: conn} do