aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorsebastian-sauer <sauer.sebastian@gmail.com>2023-07-14 03:54:20 +0200
committerGitHub <noreply@github.com>2023-07-14 01:54:20 +0000
commitb81c01305714ceca818ccb91d19dada6469e658c (patch)
tree91d3e5163e37cbc0b72f3808ce90a95565f0c75b
parente53390d88f93375f467f58a5e05d1e9c34f3340e (diff)
downloadgitea-b81c01305714ceca818ccb91d19dada6469e658c.tar.gz
gitea-b81c01305714ceca818ccb91d19dada6469e658c.zip
Don't stack PR tab menu on small screens (#25789)
the stacking takes up screen space - display the tabs as the navigation bar. github uses the same layout. Screenshots (left before, right after): ![image](https://github.com/go-gitea/gitea/assets/1135157/d7e2aaec-c67b-403d-8d56-d4c824b04eed) ![image](https://github.com/go-gitea/gitea/assets/1135157/9e150881-c265-4074-afd7-407bb52e1934) Large screen: ![image](https://github.com/go-gitea/gitea/assets/1135157/d5cbdaa3-2962-4c4f-9595-5938981ff99e)
-rw-r--r--templates/repo/pulls/tab_menu.tmpl45
-rw-r--r--web_src/css/repo.css9
2 files changed, 32 insertions, 22 deletions
diff --git a/templates/repo/pulls/tab_menu.tmpl b/templates/repo/pulls/tab_menu.tmpl
index c91d09d9e1..fe1d4e4de0 100644
--- a/templates/repo/pulls/tab_menu.tmpl
+++ b/templates/repo/pulls/tab_menu.tmpl
@@ -1,23 +1,26 @@
-<div class="ui top attached pull tabular stackable menu">
- <a class="item {{if .PageIsPullConversation}}active{{end}}" href="{{.Issue.Link}}">
- {{svg "octicon-comment-discussion"}}
- {{$.locale.Tr "repo.pulls.tab_conversation"}}
- <span class="ui small label">{{.Issue.NumComments}}</span>
- </a>
- <a class="item {{if .PageIsPullCommits}}active{{end}}" {{if .NumCommits}}href="{{.Issue.Link}}/commits"{{end}}>
- {{svg "octicon-git-commit"}}
- {{$.locale.Tr "repo.pulls.tab_commits"}}
- <span class="ui small label">{{if .NumCommits}}{{.NumCommits}}{{else}}-{{end}}</span>
- </a>
- <a class="item {{if .PageIsPullFiles}}active{{end}}" href="{{.Issue.Link}}/files">
- {{svg "octicon-diff"}}
- {{$.locale.Tr "repo.pulls.tab_files"}}
- <span class="ui small label">{{if .NumFiles}}{{.NumFiles}}{{else}}-{{end}}</span>
- </a>
- <span class="item gt-ml-auto gt-pr-0 gt-font-bold gt-df gt-ac gt-gap-3">
- <span><span class="text green">{{if .Diff.TotalAddition}}+{{.Diff.TotalAddition}}{{end}}</span> <span class="text red">{{if .Diff.TotalDeletion}}-{{.Diff.TotalDeletion}}{{end}}</span></span>
- <span class="diff-stats-bar">
- <div class="diff-stats-add-bar" style="width: {{Eval 100 "*" .Diff.TotalAddition "/" "(" .Diff.TotalAddition "+" .Diff.TotalDeletion "+" 0.0 ")"}}%"></div>
+<div class="ui pull tabs container">
+ <div class="ui top attached pull tabular menu">
+ <a class="item {{if .PageIsPullConversation}}active{{end}}" href="{{.Issue.Link}}">
+ {{svg "octicon-comment-discussion"}}
+ {{$.locale.Tr "repo.pulls.tab_conversation"}}
+ <span class="ui small label">{{.Issue.NumComments}}</span>
+ </a>
+ <a class="item {{if .PageIsPullCommits}}active{{end}}" {{if .NumCommits}}href="{{.Issue.Link}}/commits"{{end}}>
+ {{svg "octicon-git-commit"}}
+ {{$.locale.Tr "repo.pulls.tab_commits"}}
+ <span class="ui small label">{{if .NumCommits}}{{.NumCommits}}{{else}}-{{end}}</span>
+ </a>
+ <a class="item {{if .PageIsPullFiles}}active{{end}}" href="{{.Issue.Link}}/files">
+ {{svg "octicon-diff"}}
+ {{$.locale.Tr "repo.pulls.tab_files"}}
+ <span class="ui small label">{{if .NumFiles}}{{.NumFiles}}{{else}}-{{end}}</span>
+ </a>
+ <span class="item gt-ml-auto gt-pr-0 gt-font-bold gt-df gt-ac gt-gap-3">
+ <span><span class="text green">{{if .Diff.TotalAddition}}+{{.Diff.TotalAddition}}{{end}}</span> <span class="text red">{{if .Diff.TotalDeletion}}-{{.Diff.TotalDeletion}}{{end}}</span></span>
+ <span class="diff-stats-bar">
+ <div class="diff-stats-add-bar" style="width: {{Eval 100 "*" .Diff.TotalAddition "/" "(" .Diff.TotalAddition "+" .Diff.TotalDeletion "+" 0.0 ")"}}%"></div>
+ </span>
</span>
- </span>
+ </div>
+ <div class="ui tabs divider"></div>
</div>
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index ff539228f5..877f0d9c17 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -747,8 +747,15 @@
right: 1px;
}
+.repository.view.issue .pull.tabs.container {
+ width: 100%;
+ max-width: 100%;
+}
+
.repository.view.issue .pull.tabular.menu {
- margin-bottom: 1rem;
+ margin-bottom: 0;
+ overflow-x: auto;
+ overflow-y: hidden;
}
.repository.view.issue .pull.tabular.menu .svg {