Add border to file tree 'sub-items' and add padding to 'item-file' (#27593)

lng2020 · silverwind · web-flow · commit 3602a1987db5 · 2023-10-25T18:00:53.000+08:00
## Add border to file tree 'sub-items' close #24766 view in `gitea-light` <img width="275" alt="image" src="https://github.com/go-gitea/gitea/assets/70063547/f1bf8736-2db3-454f-86f5-d050a2fae3eb"> view in `gitea-dark` <img width="296" alt="image" src="https://github.com/go-gitea/gitea/assets/70063547/053e2e6e-28f7-41d2-a139-1dae4df45929"> ## Change the 'item-file' padding Before that the 'item-file' only have padding when they in 'item-directory', which is too compact when 'item-file' after 'item-directory' <details> ![)RW`SDJ_UQL@$}0 PL(3DS7](https://github.com/go-gitea/gitea/assets/70063547/5fa523a4-44c3-4cb9-a882-a3ea6d944673) --------- Co-authored-by: silverwind <me@silverwind.io>
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
@@ -61,11 +61,12 @@ a, a:hover {
   display: flex;
   flex-direction: column;
   gap: 1px;
-  padding-left: 8px;
+  margin-left: 13px;
+  border-left: 1px solid var(--color-secondary);
 }
 
 .sub-items .item-file {
-  padding-left: 24px;
+  padding-left: 18px;
 }
 
 .item-file.selected {

Original file line number	Diff line number	Diff line change
`@@ -61,11 +61,12 @@ a, a:hover {`
`61`	`61`	`display: flex;`
`62`	`62`	`flex-direction: column;`
`63`	`63`	`gap: 1px;`
`64`		`- padding-left: 8px;`
	`64`	`+ margin-left: 13px;`
	`65`	`+ border-left: 1px solid var(--color-secondary);`
`65`	`66`	`}`
`66`	`67`
`67`	`68`	`.sub-items .item-file {`
`68`		`- padding-left: 24px;`
	`69`	`+ padding-left: 18px;`
`69`	`70`	`}`
`70`	`71`
`71`	`72`	`.item-file.selected {`