Improve diff tree spacing (go-gitea#27714)

1. Un-indent top-level items, matching GitHub rendering 2. Increase item padding and add 1px gap between items Before and After: <img width="247" alt="Screenshot 2023-10-20 at 18 37 32" src="https://github.com/go-gitea/gitea/assets/115237/43c1ce86-1814-4a8a-9dd2-0c4a82a2be7c"> <img width="241" alt="Screenshot 2023-10-20 at 18 40 46" src="https://github.com/go-gitea/gitea/assets/115237/b541b85b-c428-4903-becd-773ae5807495"> --------- Co-authored-by: 6543 <[email protected]>
GiteaBot · Oct 21, 2023 · 258affc · 258affc
1 parent 8885108
commit 258affc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
@@ -126,11 +126,19 @@ export default {
 };
 </script>
 <template>
-  <div v-if="store.fileTreeIsVisible" class="gt-mr-3">
+  <div v-if="store.fileTreeIsVisible" class="diff-file-tree-items">
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
     <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
     <div v-if="store.isIncomplete" class="gt-pt-2">
       <a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a>
     </div>
   </div>
 </template>
+<style scoped>
+.diff-file-tree-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-right: .5rem;
+}
+</style>
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
@@ -58,11 +58,14 @@ a, a:hover {
 }
 
 .sub-items {
-  padding-left: 9px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-left: 8px;
 }
 
-.item-file {
-  margin-left: 20px;
+.sub-items .item-file {
+  padding-left: 24px;
 }
 
 .item-file.selected {
@@ -80,7 +83,7 @@ a, a:hover {
   display: flex;
   align-items: center;
   gap: 0.25em;
-  padding: 2px;
+  padding: 3px 6px;
 }
 
 .item-file:hover,