From 4e820ff795a60c3f61bc3647bddb19bc609fe1b4 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Sun, 22 Dec 2024 17:05:27 +0000
Subject: [PATCH] feat(ui): show repo size on mobile (#6344)

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6344
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
---
 templates/repo/sub_menu.tmpl |  4 ++--
 web_src/css/repo.css         | 17 ++++++++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index ddf01b33ed..598cfc5c80 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -1,6 +1,6 @@
 {{if and (not .HideRepoInfo) (not .IsBlame)}}
 <div class="ui segments repository-summary tw-mt-1 tw-mb-0">
-	<div class="ui segment sub-menu repository-menu">
+	<div class="ui segment repository-menu">
 		{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}}
 			<a class="item muted {{if .PageIsCommits}}active{{end}}" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}">
 				{{svg "octicon-history"}} {{ctx.Locale.TrN .CommitsCount "repo.n_commit_one" "repo.n_commit_few" (printf "<b>%d</b>" .CommitsCount | SafeHTML)}}
@@ -13,7 +13,7 @@
 					{{svg "octicon-tag"}} {{ctx.Locale.TrN .NumTags "repo.n_tag_one" "repo.n_tag_few" (printf "<b>%d</b>" .NumTags | SafeHTML)}}
 				</a>
 			{{end}}
-			<span class="item not-mobile" {{if not (eq .Repository.Size 0)}}data-tooltip-content="{{.Repository.SizeDetailsString ctx.Locale}}"{{end}}>
+			<span class="item" {{if not (eq .Repository.Size 0)}}data-tooltip-content="{{.Repository.SizeDetailsString ctx.Locale}}"{{end}}>
 				{{$fileSizeFields :=  ctx.Locale.TrSize .Repository.Size}}
 				{{svg "octicon-database"}} <b>{{$fileSizeFields.PrettyNumber}}</b> {{$fileSizeFields.TranslatedUnit}}
 			</span>
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 1b3ee51e91..484cdf1c85 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2013,15 +2013,27 @@ details.repo-search-result summary::marker {
   box-shadow: none;
 }
 
+.repository .repository-summary .repository-menu {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  padding: 0 0.5em;
+}
+
+@media (max-width: 767.98px) {
+  .repository .repository-summary .repository-menu {
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
 .repository .repository-summary .segment.sub-menu {
   border: none;
   display: flex;
   align-items: center;
   padding: 0;
-  overflow: hidden;
 }
 
-.repository .repository-summary .sub-menu .item {
+.repository .repository-summary .item {
   flex: 1;
   height: 30px;
   line-height: var(--line-height-default);
@@ -2029,7 +2041,6 @@ details.repo-search-result summary::marker {
   align-items: center;
   justify-content: center;
   gap: 0.25em;
-  padding: 0 0.5em; /* make the UI look better for narrow (mobile) view */
   text-decoration: none;
 }