diff options
Diffstat (limited to 'packages/client/src/components/RepositoryTreeTree.vue')
| -rw-r--r-- | packages/client/src/components/RepositoryTreeTree.vue | 62 |
1 files changed, 43 insertions, 19 deletions
diff --git a/packages/client/src/components/RepositoryTreeTree.vue b/packages/client/src/components/RepositoryTreeTree.vue index 376cafc..21f9570 100644 --- a/packages/client/src/components/RepositoryTreeTree.vue +++ b/packages/client/src/components/RepositoryTreeTree.vue @@ -10,7 +10,7 @@ <tbody> <tr v-if="path !== ''" @click="$router.push(`/${repository}/tree/${path.split('/').slice(0, -1).join('/') }`)"> <td - class="d-flex align-items-center"> + class="flex-center"> <div class="tree-entry-padding" /> .. </td> @@ -20,7 +20,7 @@ <tr v-for="(entry, entry_name, index) in tree" :key="index" @click="$router.push(`/${repository}/tree${path ? '/' + path : ''}/${entry_name}`)"> - <td class="d-flex align-items-center"> + <td class="flex-center"> <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" @@ -82,33 +82,57 @@ export default { <style lang="scss" scoped> @use "../scss/colors"; -@import "../scss/bootstrap"; -#tree { +table { border-spacing: 0; + width: 100%; + margin-bottom: 1rem; + tbody { + vertical-align: inherit; + tr { + &:hover { + background-color: lighten(colors.$background, 5%); + } + td { + padding-bottom: 1em; + &:nth-child(2) a, &:nth-child(3) { + font-weight: 300; + } + padding-top: 5px; + padding-bottom: 5px; + padding-right: 2vw; + } + } + } + thead { + vertical-align: bottom; + } th { - padding-bottom: 5px; - color: colors.$secondary; text-align: start; - padding-right: 20px; - } - tbody tr:hover { - background-color: lighten(colors.$background, 10%); + padding-bottom: 1em; + color: colors.$secondary; } - td { - padding-top: 5px; - padding-bottom: 5px; - padding-right: 2vw; - &:nth-child(2) a, &:nth-child(3) { - font-weight: 300; - } + > :not(caption) > * > * { + padding: 0.2rem 1rem; + border-bottom-width: 1px; } .tree-entry-padding, svg { width: 18px; padding-right: 5px; } - a { - padding-right: 18px; +} + +#log { + padding-left: 0; +} + +@media (max-width: 576px) { + table > :not(caption) > * > * { + padding: 0.1rem; } } +.flex-center { + display: flex; + align-items: center; +} </style> |