Repo file list enhancements

Author: silverwind

templates/repo/view_list.tmpl

@@ -5,9 +5,9 @@
 		<div>{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}</div>
 	</div>
 	{{if .HasParentPath}}
-	<div class="repo-file-line">
-		{{svg "octicon-reply"}} <a class="muted" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">..</a>
-	</div>
+	<a class="repo-file-line parent-link muted" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">
+		{{svg "octicon-file-directory-fill"}} ..
+	</a>
 	{{end}}
 	{{range $item := .Files}}
 		<div class="repo-file-item">

web_src/css/repo/home-file-list.css

@@ -1,12 +1,23 @@
 #repo-files-table {
   width: 100%;
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: 2fr 3fr auto;
   border: 1px solid var(--color-light-border);
+  background: var(--color-box-body);
   border-radius: var(--border-radius);
   margin: 10px 0; /* match the "clone-panel-popup" margin to avoid "visual double-border" */
 }
 
+@media (max-width: 767.98px) {
+  #repo-files-table {
+    grid-template-columns: 1fr 1fr auto;
+  }
+}
+
+#repo-files-table .repo-file-cell.name .svg {
+  margin-right: 2px;
+}
+
 #repo-files-table .svg.octicon-file-directory-fill,
 #repo-files-table .svg.octicon-file-submodule {
   color: var(--color-primary);
@@ -22,18 +33,38 @@
   display: contents;
 }
 
-#repo-files-table .repo-file-item:hover > .repo-file-cell {
+#repo-files-table .repo-file-item:hover > .repo-file-cell,
+#repo-files-table .parent-link:hover {
   background: var(--color-hover);
 }
 
 #repo-files-table .repo-file-line,
 #repo-files-table .repo-file-cell {
-  border-top: 1px solid var(--color-light-border);
-  padding: 6px 10px;
+  border-top: .5px solid var(--color-light-border);
+  border-bottom: .5px solid var(--color-light-border);
+  padding: 8px 10px;
 }
 
 #repo-files-table .repo-file-line:first-child {
   border-top: none;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+#repo-files-table .repo-file-item:last-child .repo-file-line,
+#repo-files-table .repo-file-item:last-child .repo-file-cell {
+  border-bottom: none;
+}
+
+#repo-files-table .repo-file-item:last-child {
+  border-bottom: none;
+}
+
+#repo-files-table .repo-file-item:last-child .repo-file-cell:first-child {
+  border-bottom-left-radius: calc(var(--border-radius) - 1px);
+}
+
+#repo-files-table .repo-file-item:last-child .repo-file-cell:last-child {
+  border-bottom-right-radius: calc(var(--border-radius) - 1px);
 }
 
 #repo-files-table .repo-file-line {
@@ -49,12 +80,17 @@
 }
 
 #repo-files-table .repo-file-cell.name {
-  max-width: 300px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+@media (max-width: 767.98px) {
+  #repo-files-table .repo-file-cell.name {
+    max-width: 35vw;
+  }
+}
+
 #repo-files-table .repo-file-cell.message {
   white-space: nowrap;
   overflow: hidden;
@@ -68,8 +104,7 @@
   color: var(--color-text-light-1);
 }
 
-@media (max-width: 767.98px) {
-  #repo-files-table .repo-file-cell.name {
-    max-width: 150px;
-  }
+#repo-files-table .parent-link {
+  width: 100%;
+  text-decoration-line: none;
 }