mirror of
https://github.com/go-gitea/gitea
synced 2024-08-22 02:05:10 +02:00
Improve diff tree spacing (#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 <m.huber@kithara.com>
This commit is contained in:
parent
b2f828db5e
commit
b39bb958cc
|
@ -126,7 +126,7 @@ 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">
|
||||
|
@ -134,3 +134,11 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.diff-file-tree-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue