diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-03-09 14:07:51 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-03-09 16:32:39 +1100 |
| commit | 97f30117298686cb0b49df2e6633ba017b3e2547 (patch) | |
| tree | 63473b8280635b544d8018a32f572361ab7eb11c /src/components | |
| parent | 1eb0012e9eec96b4e5469361ddfd59164bf8c9fd (diff) | |
Add basic code allowing sweep-layout to use leftover space from parent sweep
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Tile.vue | 15 |
1 files changed, 9 insertions, 6 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 9830a69..50f43ce 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -4,6 +4,7 @@ export default { data(){ return { zIdx: 0, + overFlow: 'visible', } }, props: { @@ -12,18 +13,20 @@ export default { methods: { onImgClick(){ this.$emit('tile-clicked', [this.tree]); - //increase z-index during transition + //increase z-index and hide overflow during transition this.zIdx = 1; - setTimeout(() => this.zIdx = 0, 300); + this.overFlow = 'hidden'; + setTimeout(() => {this.zIdx = 0; this.overFlow = 'visible'}, 300); }, onInnerTileClicked(nodeList){ this.$emit('tile-clicked', [...nodeList, this.tree]); }, onHeaderClick(){ this.$emit('header-clicked', [this.tree]); - //increase z-index during transition + //increase z-index and hide overflow during transition this.zIdx = 1; - setTimeout(() => this.zIdx = 0, 300); + this.overFlow = 'hidden'; + setTimeout(() => {this.zIdx = 0; this.overFlow = 'visible'}, 300); }, onInnerHeaderClicked(nodeList){ this.$emit('header-clicked', [...nodeList, this.tree]); @@ -35,8 +38,8 @@ export default { <template> <div :style="{position: 'absolute', left: tree.x+'px', top: tree.y+'px', - width: tree.w+'px', height: tree.h+'px', zIndex: zIdx}" - class="transition-[left,top,width,height] duration-300 ease-out border border-stone-900 bg-white overflow-hidden"> + width: tree.w+'px', height: tree.h+'px', zIndex: zIdx, overflow: overFlow}" + class="transition-[left,top,width,height] duration-300 ease-out border border-stone-900 bg-white"> <div v-if="tree.children.length == 0" :style="{backgroundImage: 'url(\'/src/assets/' + tree.tolNode.name + '.jpg\')'}" class="hover:cursor-pointer w-full h-full bg-cover" @click="onImgClick" |