diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-03-19 10:29:36 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-03-19 10:29:36 +1100 |
| commit | 5e3aafa82d1984abc3f8908c325dfa7c18f26437 (patch) | |
| tree | b8211ff415c4acfd73680b145dfeef1d23a71a76 /src/components/Tile.vue | |
| parent | 726b6cecaf67e37e18331e4a667c8af8f74124be (diff) | |
Test putting image labels in boxtest-img-label-box
Diffstat (limited to 'src/components/Tile.vue')
| -rw-r--r-- | src/components/Tile.vue | 15 |
1 files changed, 5 insertions, 10 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 9cf36d3..3ff4353 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -17,7 +17,7 @@ export default defineComponent({ return { borderRadius: '5px', leafHeaderHorzSpc: 4, - leafHeaderVertSpc: 2, + leafHeaderVertSpc: 4, leafHeaderColor: 'white', expandableLeafHeaderColor: 'greenyellow', //yellow, turquoise, // Used during transitions and to emulate/show an apparently-joined div @@ -68,9 +68,12 @@ export default defineComponent({ position: 'absolute', left: this.leafHeaderHorzSpc + 'px', top: this.leafHeaderVertSpc + 'px', + padding: '2px', maxWidth: (this.layoutNode.dims[0] - this.leafHeaderHorzSpc*2) + 'px', - height: this.headerSz + 'px', + height: (this.headerSz + 4) + 'px', lineHeight: this.headerSz + 'px', + backgroundColor: 'rgba(0,0,0,0.4)', + borderRadius: this.borderRadius, color: this.isExpandable ? this.expandableLeafHeaderColor : this.leafHeaderColor, // For ellipsis overflow: 'hidden', @@ -167,7 +170,6 @@ export default defineComponent({ <template> <div :style="tileStyles"> <div v-if="isLeaf" :style="leafStyles" :class="isExpandable ? 'hover:cursor-pointer' : ''" @click="onLeafClick"> - <div :style="{borderRadius: this.borderRadius}" class="upper-scrim"/> <div :style="leafHeaderStyles">{{layoutNode.tolNode.name}}</div> </div> <div v-else :style="nonLeafStyles"> @@ -207,11 +209,4 @@ export default defineComponent({ width: 101%; height: 1px; } -.upper-scrim { - position: absolute; - top: 0; - height: 50%; - width: 100%; - background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.4)); -} </style> |