Fix repo home UI when there is no repo description (#30552)

Fix #30502 by a new approach.


![image](https://github.com/go-gitea/gitea/assets/2114189/22f48bca-82d1-45cc-b1b7-ee2344b81a76)

Author: wxiaoguang

options/locale/locale_en-US.ini

@@ -1193,7 +1193,6 @@ action.blocked_user = Cannot perform action because you are blocked by the repos
 download_archive = Download Repository
 more_operations = More Operations
 
-no_desc = No Description
 quick_guide = Quick Guide
 clone_this_repo = Clone this repository
 cite_this_repo = Cite this repository

templates/repo/home.tmpl

@@ -5,18 +5,10 @@
 		{{template "base/alert" .}}
 		{{template "repo/code/recently_pushed_new_branches" .}}
 		{{if and (not .HideRepoInfo) (not .IsBlame)}}
-		<div class="repo-description">
-			<div id="repo-desc" class="gt-word-break tw-text-16">
-				{{$description := .Repository.DescriptionHTML $.Context}}
-				{{if $description}}<span class="description">{{$description | RenderCodeBlock}}</span>{{else if .IsRepositoryAdmin}}<span class="no-description text-italic">{{ctx.Locale.Tr "repo.no_desc"}}</span>{{end}}
-				<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
-			</div>
-			<form class="ignore-dirty" action="{{.RepoLink}}/search" method="get">
-				<div class="ui small action input">
-					<input name="q" value="{{.Keyword}}" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
-					{{template "shared/search/button"}}
-				</div>
-			</form>
+		<div class="repo-description gt-word-break">
+			{{- $description := .Repository.DescriptionHTML ctx -}}
+			{{if $description}}{{$description | RenderCodeBlock}}{{end}}
+			{{if .Repository.Website}}<a href="{{.Repository.Website}}">{{.Repository.Website}}</a>{{end}}
 		</div>
 		<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-my-2" id="repo-topics">
 			{{/* it should match the code in issue-home.js */}}
@@ -54,7 +46,7 @@
 		{{$l := Eval $n "-" 1}}
 		{{$isHomepage := (eq $n 0)}}
 		<div class="repo-button-row">
-			<div class="tw-flex tw-items-center tw-gap-y-2">
+			<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-y-2">
 				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
 				{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
 					{{$cmpBranch := ""}}
@@ -111,6 +103,13 @@
 						{{- end -}}
 					</span>
 				{{end}}
+
+				<form class="ignore-dirty" action="{{.RepoLink}}/search" method="get">
+					<div class="ui small action input">
+						<input name="q" value="{{.Keyword}}" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
+						{{template "shared/search/button"}}
+					</div>
+				</form>
 			</div>
 			<div class="tw-flex tw-items-center">
 				<!-- Only show clone panel in repository home page -->

tests/integration/repo_test.go

@@ -28,11 +28,9 @@ func TestViewRepo(t *testing.T) {
 	resp := session.MakeRequest(t, req, http.StatusOK)
 
 	htmlDoc := NewHTMLParser(t, resp.Body)
-	noDescription := htmlDoc.doc.Find("#repo-desc").Children()
 	repoTopics := htmlDoc.doc.Find("#repo-topics").Children()
 	repoSummary := htmlDoc.doc.Find(".repository-summary").Children()
 
-	assert.True(t, noDescription.HasClass("no-description"))
 	assert.True(t, repoTopics.HasClass("repo-topic"))
 	assert.True(t, repoSummary.HasClass("repository-menu"))
 
@@ -177,30 +175,6 @@ func TestViewRepoWithSymlinks(t *testing.T) {
 	assert.Equal(t, "link_link: svg octicon-file-symlink-file", items[4])
 }
 
-// TestViewAsRepoAdmin tests PR #2167
-func TestViewAsRepoAdmin(t *testing.T) {
-	for user, expectedNoDescription := range map[string]bool{
-		"user2": true,
-		"user4": false,
-	} {
-		defer tests.PrepareTestEnv(t)()
-
-		session := loginUser(t, user)
-
-		req := NewRequest(t, "GET", "/user2/repo1.git")
-		resp := session.MakeRequest(t, req, http.StatusOK)
-
-		htmlDoc := NewHTMLParser(t, resp.Body)
-		noDescription := htmlDoc.doc.Find("#repo-desc").Children()
-		repoTopics := htmlDoc.doc.Find("#repo-topics").Children()
-		repoSummary := htmlDoc.doc.Find(".repository-summary").Children()
-
-		assert.Equal(t, expectedNoDescription, noDescription.HasClass("no-description"))
-		assert.True(t, repoTopics.HasClass("repo-topic"))
-		assert.True(t, repoSummary.HasClass("repository-menu"))
-	}
-}
-
 // TestViewFileInRepo repo description, topics and summary should not be displayed when viewing a file
 func TestViewFileInRepo(t *testing.T) {
 	defer tests.PrepareTestEnv(t)()
@@ -211,7 +185,7 @@ func TestViewFileInRepo(t *testing.T) {
 	resp := session.MakeRequest(t, req, http.StatusOK)
 
 	htmlDoc := NewHTMLParser(t, resp.Body)
-	description := htmlDoc.doc.Find("#repo-desc")
+	description := htmlDoc.doc.Find(".repo-description")
 	repoTopics := htmlDoc.doc.Find("#repo-topics")
 	repoSummary := htmlDoc.doc.Find(".repository-summary")
 
@@ -230,7 +204,7 @@ func TestBlameFileInRepo(t *testing.T) {
 	resp := session.MakeRequest(t, req, http.StatusOK)
 
 	htmlDoc := NewHTMLParser(t, resp.Body)
-	description := htmlDoc.doc.Find("#repo-desc")
+	description := htmlDoc.doc.Find(".repo-description")
 	repoTopics := htmlDoc.doc.Find("#repo-topics")
 	repoSummary := htmlDoc.doc.Find(".repository-summary")
 
@@ -249,7 +223,7 @@ func TestViewRepoDirectory(t *testing.T) {
 	resp := session.MakeRequest(t, req, http.StatusOK)
 
 	htmlDoc := NewHTMLParser(t, resp.Body)
-	description := htmlDoc.doc.Find("#repo-desc")
+	description := htmlDoc.doc.Find(".repo-description")
 	repoTopics := htmlDoc.doc.Find("#repo-topics")
 	repoSummary := htmlDoc.doc.Find(".repository-summary")
 

web_src/css/repo.css

@@ -157,21 +157,11 @@
   left: auto !important;
 }
 
-.repository.file.list .repo-description {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 5px;
+.repository .repo-description {
+  font-size: 16px;
   margin-bottom: 5px;
 }
 
-@media (max-width: 767.98px) {
-  .repository.file.list .repo-description {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-
 .commit-summary {
   flex: 1;
   overflow-wrap: anywhere;