oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(ui): show repo size on mobile (#6344)

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6344
Reviewed-by: Gusted <gusted@noreply.codeberg.org>

0ko 4e820ff7 54255688

+16 -5
+2 -2
templates/repo/sub_menu.tmpl
··· 1 1 {{if and (not .HideRepoInfo) (not .IsBlame)}} 2 2 <div class="ui segments repository-summary tw-mt-1 tw-mb-0"> 3 - <div class="ui segment sub-menu repository-menu"> 3 + <div class="ui segment repository-menu"> 4 4 {{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}} 5 5 <a class="item muted {{if .PageIsCommits}}active{{end}}" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}"> 6 6 {{svg "octicon-history"}} {{ctx.Locale.TrN .CommitsCount "repo.n_commit_one" "repo.n_commit_few" (printf "<b>%d</b>" .CommitsCount | SafeHTML)}} ··· 13 13 {{svg "octicon-tag"}} {{ctx.Locale.TrN .NumTags "repo.n_tag_one" "repo.n_tag_few" (printf "<b>%d</b>" .NumTags | SafeHTML)}} 14 14 </a> 15 15 {{end}} 16 - <span class="item not-mobile" {{if not (eq .Repository.Size 0)}}data-tooltip-content="{{.Repository.SizeDetailsString ctx.Locale}}"{{end}}> 16 + <span class="item" {{if not (eq .Repository.Size 0)}}data-tooltip-content="{{.Repository.SizeDetailsString ctx.Locale}}"{{end}}> 17 17 {{$fileSizeFields := ctx.Locale.TrSize .Repository.Size}} 18 18 {{svg "octicon-database"}} <b>{{$fileSizeFields.PrettyNumber}}</b> {{$fileSizeFields.TranslatedUnit}} 19 19 </span>
+14 -3
web_src/css/repo.css
··· 2013 2013 box-shadow: none; 2014 2014 } 2015 2015 2016 + .repository .repository-summary .repository-menu { 2017 + display: grid; 2018 + grid-template-columns: repeat(4, 1fr); 2019 + padding: 0 0.5em; 2020 + } 2021 + 2022 + @media (max-width: 767.98px) { 2023 + .repository .repository-summary .repository-menu { 2024 + grid-template-rows: repeat(2, 1fr); 2025 + grid-template-columns: repeat(2, 1fr); 2026 + } 2027 + } 2028 + 2016 2029 .repository .repository-summary .segment.sub-menu { 2017 2030 border: none; 2018 2031 display: flex; 2019 2032 align-items: center; 2020 2033 padding: 0; 2021 - overflow: hidden; 2022 2034 } 2023 2035 2024 - .repository .repository-summary .sub-menu .item { 2036 + .repository .repository-summary .item { 2025 2037 flex: 1; 2026 2038 height: 30px; 2027 2039 line-height: var(--line-height-default); ··· 2029 2041 align-items: center; 2030 2042 justify-content: center; 2031 2043 gap: 0.25em; 2032 - padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */ 2033 2044 text-decoration: none; 2034 2045 } 2035 2046