From 61314f05fc7c24436357e4c85884228592c11d71 Mon Sep 17 00:00:00 2001 From: Otto Richter <git@otto.splvs.net> Date: Tue, 17 Sep 2024 17:11:18 +0200 Subject: [PATCH 1/2] tests(e2e): Test overflow in commit graph --- tests/e2e/repo-code.test.e2e.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/tests/e2e/repo-code.test.e2e.js b/tests/e2e/repo-code.test.e2e.js index 01179d28d3..62c4f557c1 100644 --- a/tests/e2e/repo-code.test.e2e.js +++ b/tests/e2e/repo-code.test.e2e.js @@ -77,3 +77,10 @@ test('Readable diff', async ({page}, workerInfo) => { } } }); + +test('Commit graph overflow', async ({page}) => { + await page.goto('/user2/diff-test/graph'); + await expect(page.getByRole('button', {name: 'Mono'})).toBeInViewport({ratio: 1}); + await expect(page.getByRole('button', {name: 'Color'})).toBeInViewport({ratio: 1}); + await expect(page.locator('.selection.search.dropdown')).toBeInViewport({ratio: 1}); +}); From dbe2846e3b869c6b4f3f865f827cfdf56b98b16e Mon Sep 17 00:00:00 2001 From: 0ko <0ko@noreply.codeberg.org> Date: Tue, 3 Sep 2024 21:51:51 +0500 Subject: [PATCH 2/2] ui: improve commit graph layout --- templates/repo/graph.tmpl | 19 ++++++++------ web_src/css/features/gitgraph.css | 42 ++++++++++++++++++++++++------- 2 files changed, 44 insertions(+), 17 deletions(-) diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl index 6e7b6cb2b5..04b056cc60 100644 --- a/templates/repo/graph.tmpl +++ b/templates/repo/graph.tmpl @@ -3,9 +3,9 @@ {{template "repo/header" .}} <div class="ui container"> <div id="git-graph-container" class="ui segment{{if eq .Mode "monochrome"}} monochrome{{end}}"> - <h2 class="ui header dividing"> - {{ctx.Locale.Tr "repo.commit_graph"}} - <div class="ui icon buttons small color-buttons"> + <div id="git-graph-heading"> + <div id="git-graph-heading-left"> + <h2>{{ctx.Locale.Tr "repo.commit_graph"}}</h2> <div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown"> <input type="hidden" name="flow"> <div class="default text">{{ctx.Locale.Tr "repo.commit_graph.select"}}</div> @@ -45,14 +45,17 @@ {{end}} </div> </div> + </div> + <div class="ui icon buttons small"> <button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button> <button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button> </div> - </h2> - <div class="ui dividing"></div> - <div class="is-loading tw-py-32 tw-hidden" id="loading-indicator"></div> - {{template "repo/graph/svgcontainer" .}} - {{template "repo/graph/commits" .}} + </div> + <div id="git-graph-content"> + <div class="is-loading tw-py-32 tw-hidden" id="loading-indicator"></div> + {{template "repo/graph/svgcontainer" .}} + {{template "repo/graph/commits" .}} + </div> </div> </div> </div> diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css index 45fb2d9555..4da871da61 100644 --- a/web_src/css/features/gitgraph.css +++ b/web_src/css/features/gitgraph.css @@ -1,24 +1,48 @@ -#git-graph-container { +#git-graph-content { overflow-x: auto; width: 100%; - min-height: 350px; + min-height: 250px; } -#git-graph-container h2 { +#git-graph-heading { display: flex; justify-content: space-between; - align-items: center; + padding-bottom: 20px; } -#git-graph-container .ui.header.dividing { - padding-bottom: 10px; +#git-graph-heading-left { + display: flex; + gap: 1rem; +} + +#git-graph-heading h2 { + margin: 0; +} + +@media (min-width: 767.98px) { + #git-graph-heading { + align-items: center; + } +} + +@media (max-width: 767.98px) { + #git-graph-heading, + #git-graph-heading-left { + flex-direction: column; + } + + #git-graph-heading-left { + margin-bottom: 1rem; + } + + h2, + #flow-select-refs-dropdown { + max-width: 100%; + } } #git-graph-container #flow-select-refs-dropdown { - border-top-right-radius: 0; - border-bottom-right-radius: 0; min-width: 250px; - border-right: none; } #git-graph-container #flow-select-refs-dropdown .ui.label {