From 4cc0320ed0076804986f55ddc60eb333f4841ca3 Mon Sep 17 00:00:00 2001 From: 0ko <0ko@noreply.codeberg.org> Date: Wed, 29 Jan 2025 16:55:10 +0000 Subject: [PATCH] ui: update language stats layout and click behavior (#6700) Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6700 Reviewed-by: Michael Kriese Reviewed-by: Beowulf Reviewed-by: Gusted --- templates/repo/sub_menu.tmpl | 12 ++++++------ tests/e2e/repo-home.e2e.ts | 19 +++++++++++++++++++ web_src/css/repo.css | 5 +++-- 3 files changed, 28 insertions(+), 8 deletions(-) create mode 100644 tests/e2e/repo-home.e2e.ts diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl index 598cfc5c80..ee1b959a7c 100644 --- a/templates/repo/sub_menu.tmpl +++ b/templates/repo/sub_menu.tmpl @@ -20,7 +20,12 @@ {{end}} {{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}} - {{end}} diff --git a/tests/e2e/repo-home.e2e.ts b/tests/e2e/repo-home.e2e.ts new file mode 100644 index 0000000000..fbcfe17226 --- /dev/null +++ b/tests/e2e/repo-home.e2e.ts @@ -0,0 +1,19 @@ +// @watch start +// web_src/js/features/common-global.js +// web_src/css/repo.css +// @watch end + +import {expect} from '@playwright/test'; +import {save_visual, test} from './utils_e2e.ts'; + +test('Language stats bar', async ({page}) => { + const response = await page.goto('/user2/repo1'); + expect(response?.status()).toBe(200); + + await expect(page.locator('#language-stats-legend')).toBeVisible(); + await save_visual(page); + + await page.click('#language-stats-bar'); + await expect(page.locator('#language-stats-legend')).toBeHidden(); + await save_visual(page); +}); diff --git a/web_src/css/repo.css b/web_src/css/repo.css index b8cd3c08bb..bdb09eb776 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2022,13 +2022,14 @@ details.repo-search-result summary::marker { font-weight: var(--font-weight-medium); } -.repository .repository-summary .segment.language-stats { +.repository .repository-summary #language-stats-bar { display: flex; gap: 2px; padding: 0; height: 10px; white-space: nowrap; - border-radius: 0 0 3px 3px !important; + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; overflow: hidden; }