Backport #27714 by @silverwind
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: silverwind <me@silverwind.io>
Co-authored-by: 6543 <m.huber@kithara.com>
};
</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">
</div>
</div>
</template>
+<style scoped>
+.diff-file-tree-items {
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ margin-right: .5rem;
+}
+</style>
}
.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 {
display: flex;
align-items: center;
gap: 0.25em;
- padding: 2px;
+ padding: 3px 6px;
}
.item-file:hover,