Split the original repo/home.tmpl into two templates: home and view.

routers/web/repo/blame.go

@@ -95,9 +95,9 @@ func RefBlame(ctx *context.Context) {
 
 	var tplName templates.TplName
 	if ctx.FormBool("only_content") {
-		tplName = tplRepoHomeContent
+		tplName = tplRepoViewContent
 	} else {
-		tplName = tplRepoHome
+		tplName = tplRepoView
 	}
 
 	if fileSize >= setting.UI.MaxDisplayFileSize {

routers/web/repo/view.go

@@ -49,7 +49,8 @@ import (
 const (
 	tplRepoEMPTY       templates.TplName = "repo/empty"
 	tplRepoHome        templates.TplName = "repo/home"
-	tplRepoHomeContent templates.TplName = "repo/home_content"
+	tplRepoView        templates.TplName = "repo/view"
+	tplRepoViewContent templates.TplName = "repo/view_content"
 	tplRepoViewList    templates.TplName = "repo/view_list"
 	tplWatchers        templates.TplName = "repo/watchers"
 	tplForks           templates.TplName = "repo/forks"

routers/web/repo/view_home.go

@@ -430,7 +430,9 @@ func Home(ctx *context.Context) {
 	}
 
 	if ctx.FormBool("only_content") {
-		ctx.HTML(http.StatusOK, tplRepoHomeContent)
+		ctx.HTML(http.StatusOK, tplRepoViewContent)
+	} else if len(treeNames) != 0 {
+		ctx.HTML(http.StatusOK, tplRepoView)
 	} else {
 		ctx.HTML(http.StatusOK, tplRepoHome)
 	}

templates/repo/home.tmpl

@@ -17,13 +17,9 @@
 
 		{{template "repo/code/recently_pushed_new_branches" .}}
 
-		<div class="{{Iif $showSidebar "repo-grid-filelist-sidebar" (Iif .RepoPreferences.ShowFileViewTreeSidebar "repo-grid-tree-sidebar" "repo-grid-filelist-only")}}">
+		<div class="{{Iif $showSidebar "repo-grid-filelist-sidebar" "repo-grid-filelist-only"}}">
-			{{if .TreeNames}}
-				<div class="repo-view-file-tree-sidebar not-mobile {{if not .RepoPreferences.ShowFileViewTreeSidebar}}tw-hidden{{end}}" {{if .IsSigned}} data-is-signed {{end}}>{{template "repo/view_file_tree_sidebar" .}}</div>
-			{{end}}
-
 			<div class="repo-home-filelist">
-				{{template "repo/home_content" .}}
+				{{template "repo/view_content" .}}
 			</div>
 
 			{{if $showSidebar}}

templates/repo/view.tmpl

@@ -0,0 +1,27 @@
+{{template "base/head" .}}
+<div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
+	{{template "repo/header" .}}
+	<div class="ui container {{if or .TreeNames .IsBlame}}fluid padded{{end}}">
+		{{template "base/alert" .}}
+
+		{{if .Repository.IsArchived}}
+			<div class="ui warning message tw-text-center">
+				{{if .Repository.ArchivedUnix.IsZero}}
+					{{ctx.Locale.Tr "repo.archive.title"}}
+				{{else}}
+					{{ctx.Locale.Tr "repo.archive.title_date" (DateUtils.AbsoluteLong .Repository.ArchivedUnix)}}
+				{{end}}
+			</div>
+		{{end}}
+
+		{{template "repo/code/recently_pushed_new_branches" .}}
+
+		<div class="{{Iif .RepoPreferences.ShowFileViewTreeSidebar "repo-view-with-sidebar" "repo-view-content-only"}}">
+			<div class="repo-view-file-tree-sidebar not-mobile {{if not .RepoPreferences.ShowFileViewTreeSidebar}}tw-hidden{{end}}" {{if .IsSigned}} data-is-signed {{end}}>{{template "repo/view_file_tree_sidebar" .}}</div>
+			<div class="repo-view-content">
+				{{template "repo/view_content" .}}
+			</div>
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}

web_src/css/repo/home.css

@@ -49,13 +49,19 @@
   }
 }
 
-.repo-grid-tree-sidebar {
+.repo-view-with-sidebar {
   display: grid;
   grid-template-columns: 300px auto;
   grid-template-rows: auto auto 1fr;
 }
 
-.repo-grid-tree-sidebar .repo-home-filelist {
+.repo-view-content {
+  min-width: 0;
+  grid-column: 1;
+  grid-row: 1 / 4;
+}
+
+.repo-view-with-sidebar .repo-view-content {
   min-width: 0;
   grid-column: 2;
   grid-row: 1 / 4;
@@ -66,7 +72,7 @@
   aspect-ratio: 5.415; /* the size is about 790 x 145 */
 }
 
-.repo-grid-tree-sidebar .repo-view-file-tree-sidebar {
+.repo-view-with-sidebar .repo-view-file-tree-sidebar {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -77,15 +83,19 @@
   z-index: 8;
 }
 
-.repo-grid-tree-sidebar .repo-button-row {
+.repo-view-with-sidebar .repo-button-row {
   margin-top: 0 !important;
 }
 
 @media (max-width: 767.98px) {
-  .repo-grid-tree-sidebar {
+  .repo-view-with-sidebar {
     grid-template-columns: auto;
     grid-template-rows: auto auto auto;
   }
+  .repo-view-content {
+    grid-column: 1;
+    grid-row: 2;
+  }
 }
 
 .language-stats {

web_src/js/features/repo-view-file-tree-sidebar.ts

@@ -9,8 +9,8 @@ const {appSubUrl} = window.config;
 async function toggleSidebar(sidebarEl: HTMLElement, shouldShow: boolean) {
   const showBtnEl = sidebarEl.parentElement.querySelector('.show-tree-sidebar-button');
   const containerClassList = sidebarEl.parentElement.classList;
-  containerClassList.toggle('repo-grid-tree-sidebar', shouldShow);
+  containerClassList.toggle('repo-view-with-sidebar', shouldShow);
-  containerClassList.toggle('repo-grid-filelist-only', !shouldShow);
+  containerClassList.toggle('repo-view-content-only', !shouldShow);
   toggleElem(sidebarEl, shouldShow);
   toggleElem(showBtnEl, !shouldShow);
 
@@ -49,7 +49,7 @@ function childrenLoader(sidebarEl: HTMLElement) {
 async function loadContent(sidebarEl: HTMLElement) {
   // load content by path (content based on home_content.tmpl)
   const response = await GET(`${window.location.href}?only_content=true`);
-  const contentEl = sidebarEl.parentElement.querySelector('.repo-home-filelist');
+  const contentEl = sidebarEl.parentElement.querySelector('.repo-view-content');
   contentEl.innerHTML = await response.text();
   reloadContentScript(sidebarEl, contentEl);
 }
@@ -67,7 +67,7 @@ export async function initViewFileTreeSidebar() {
   sidebarEl.querySelector('.hide-tree-sidebar-button').addEventListener('click', () => {
     toggleSidebar(sidebarEl, false);
   });
-  sidebarEl.parentElement.querySelector('.repo-home-filelist .show-tree-sidebar-button').addEventListener('click', () => {
+  sidebarEl.parentElement.querySelector('.repo-view-content .show-tree-sidebar-button').addEventListener('click', () => {
     toggleSidebar(sidebarEl, true);
   });