diff --git a/components/common/nav-list/nav-list.css b/components/common/nav-list/nav-list.css new file mode 100644 index 00000000..20c1e371 --- /dev/null +++ b/components/common/nav-list/nav-list.css @@ -0,0 +1,79 @@ +/* GitHub's NavList, as in settings and Insights: an icon per page, collapsible groups and a blue bar beside the current + page. Add theme-nav-list to Forgejo's vertical menu. */ +.ui.vertical.menu.theme-nav-list { + border: 0; + background: transparent; + box-shadow: none; + & > .item:not(details), + & > details.item > summary, + & > details.item > .menu > .item { + position: relative; + display: flex; + /* Room for the current page's bar, which sits outside the item. */ + overflow: visible; + align-items: center; + gap: 8px; + min-height: 33px; + margin: 0; + padding: 6px 8px; + border: 0; + border-radius: var(--border-radius); + background: transparent; + color: var(--color-text); + font-size: 14px; + font-weight: 400; + line-height: 21px; + &:hover { + background: var(--github-control-transparent-bgColor-hover); + color: var(--color-text); + } + &:focus-visible { + outline: 2px solid var(--github-fgColor-accent); + outline-offset: -2px; + } + } + & > details.item { + display: block; + width: 100%; + padding: 0; + background: transparent; + & > summary { + cursor: pointer; + } + & > .menu { + margin: 0; + padding: 0; + } + /* Pages inside a group line up with their group's label, as on GitHub. */ + & > .menu > .item { + padding-left: 32px; + } + } + & .item > .svg, + & summary > .svg:first-child { + flex: none; + color: var(--color-text-light-1); + } + & > .item.active, + & > details.item > .menu > .item.active { + background: var(--github-control-transparent-bgColor-active); + font-weight: 600; + &::before { + content: ""; + /* Fomantic hides ::before on nested menu items with a more specific rule. */ + display: block !important; + position: absolute; + top: 4px; + left: -8px; + width: 4px; + height: 24px; + border-radius: var(--border-radius); + background: var(--github-bgColor-accent-emphasis); + } + } + & > details.item > summary::after { + flex: none; + margin-left: auto; + color: var(--color-text-light-1); + } +} diff --git a/components/common/settings/settings.css b/components/common/settings/settings.css index e6f0f0fa..0670ea57 100644 --- a/components/common/settings/settings.css +++ b/components/common/settings/settings.css @@ -58,86 +58,9 @@ margin-top: 0; } -/* Nav: GitHub's action list with an icon per page, group labels and a blue bar beside the current page. */ +/* Nav column: 256px, holding the shared nav list (components/common/nav-list). */ .theme-settings > .flex-container-nav { width: 256px; - & > .ui.fluid.vertical.menu { - border: 0; - background: transparent; - box-shadow: none; - } - & > .ui.vertical.menu { - & > .item:not(details), - & > details.item > summary, - & > details.item > .menu > .item { - position: relative; - display: flex; - align-items: center; - gap: 8px; - min-height: 33px; - margin: 0; - padding: 6px 8px; - border: 0; - border-radius: var(--border-radius); - background: transparent; - color: var(--color-text); - font-size: 14px; - font-weight: 400; - line-height: 21px; - &:hover { - background: var(--github-control-transparent-bgColor-hover); - color: var(--color-text); - } - &:focus-visible { - outline: 2px solid var(--github-fgColor-accent); - outline-offset: -2px; - } - } - & > details.item { - display: block; - width: 100%; - padding: 0; - background: transparent; - & > summary { - cursor: pointer; - } - & > .menu { - margin: 0; - padding: 0; - } - /* Pages inside a group line up with their group's label, as on GitHub. */ - & > .menu > .item { - padding-left: 32px; - } - } - & .item > .svg, - & summary > .svg:first-child { - flex: none; - color: var(--color-text-light-1); - } - & > .item.active, - & > details.item > .menu > .item.active { - background: var(--github-control-transparent-bgColor-active); - font-weight: 600; - &::before { - content: ""; - /* Fomantic hides ::before on nested menu items with a more specific rule. */ - display: block !important; - position: absolute; - top: 4px; - left: -8px; - width: 4px; - height: 24px; - border-radius: var(--border-radius); - background: var(--github-bgColor-accent-emphasis); - } - } - } - & > .ui.fluid.vertical.menu > details.item > summary::after { - flex: none; - margin-left: auto; - color: var(--color-text-light-1); - } } .theme-settings-group, diff --git a/scripts/assembleForgejo.ts b/scripts/assembleForgejo.ts index 69f3ff3f..a72a6fff 100644 --- a/scripts/assembleForgejo.ts +++ b/scripts/assembleForgejo.ts @@ -46,6 +46,7 @@ for (const directory of ["common", "project", "repository"]) { for (const file of [ "commits.css", "dashboard-lists.css", + "insights.css", "organization.css", "profile-subpages.css", "projects.css", diff --git a/src/build-output.test.ts b/src/build-output.test.ts index 8fd40491..9fba01a1 100644 --- a/src/build-output.test.ts +++ b/src/build-output.test.ts @@ -579,6 +579,21 @@ describe("Forgejo 15 native integration", () => { expect(read("styles", "components", "issues", "issue.ts")).toContain(".theme-branch-name {"); }); + it("shares GitHub's nav list between settings and Insights", () => { + const read = (...parts: string[]) => fs.readFileSync(path.join(ROOT_DIR, ...parts), "utf-8"); + for (const navbar of [ + ["templates", "repo", "navbar.tmpl"], + ["templates", "repo", "settings", "navbar.tmpl"], + ["templates", "user", "settings", "navbar.tmpl"], + ["templates", "org", "settings", "navbar.tmpl"], + ["templates", "admin", "navbar.tmpl"], + ]) + expect(read(...navbar)).toContain('class="ui fluid vertical menu theme-nav-list"'); + expect(read("components", "common", "nav-list", "nav-list.css")).toContain(".ui.vertical.menu.theme-nav-list {"); + expect(read("components", "common", "settings", "settings.css")).not.toContain("& > .item.active"); + expect(read("templates", "repo", "activity.tmpl")).toContain("flex-container github-insights"); + }); + it("matches GitHub's repository About, visibility, and code-search details", () => { const headerStyle = fs.readFileSync(path.join(ROOT_DIR, "styles", "templates", "repo", "header.ts"), "utf-8"); const headerTemplate = fs.readFileSync(path.join(ROOT_DIR, "templates", "repo", "home_header.tmpl"), "utf-8"); diff --git a/styles/pages/insights.css b/styles/pages/insights.css new file mode 100644 index 00000000..b1a49b59 --- /dev/null +++ b/styles/pages/insights.css @@ -0,0 +1,19 @@ +/* Insights (Forgejo's activity pages): GitHub's 256px nav list beside the page, 40px apart. Kept as a page stylesheet, + outside the size-limited theme files. */ +.ui.container.flex-container.github-insights { + gap: 40px; +} + +.github-insights > .flex-container-nav { + width: 256px; +} + +@media (max-width: 767.98px) { + .ui.container.flex-container.github-insights { + gap: 24px; + } + + .github-insights > .flex-container-nav { + width: auto; + } +} diff --git a/templates/admin/navbar.tmpl b/templates/admin/navbar.tmpl index d8400d35..e27feb47 100644 --- a/templates/admin/navbar.tmpl +++ b/templates/admin/navbar.tmpl @@ -1,6 +1,6 @@ {{/* Forgejo's admin nav with GitHub's icon per top-level page; the site administration header above it names the area. */}}