diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-07-03 16:39:12 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-07-03 16:39:12 +1000 |
| commit | 89fc34f82956f2410ee7f1d90e03945e10805dda (patch) | |
| tree | 41b615f4414cf47e1da70497e5bf8173faf3f7b8 /src/components/Tile.vue | |
| parent | b8694f56d687307c64ba6775f9f0d4c064a2669a (diff) | |
Add styling, mainly for TileInfoModal and Settings
Diffstat (limited to 'src/components/Tile.vue')
| -rw-r--r-- | src/components/Tile.vue | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 9b43467..ab1538f 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -17,14 +17,14 @@ @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/> </template> </div> - <div v-else :style="nonleafStyles" ref="nonleaf"> + <div v-else :style="nonleafStyles"> <div v-if="showNonleafHeader" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp"> <h1 :style="nonleafHeaderTextStyles" class="grow">{{displayName}}</h1> <info-icon v-if="infoIconDisabled" :style="infoIconStyles" :class="infoIconClasses" @click.stop="onInfoIconClick" @mousedown.stop @mouseup.stop/> </div> - <div :style="sepSweptAreaStyles" :class="sepSweptAreaHideEdgeClass" ref="sepSweptArea"> + <div :style="sepSweptAreaStyles" :class="sepSweptAreaHideEdgeClass"> <div v-if="layoutNode.sepSweptArea?.sweptLeft === false" :style="nonleafHeaderStyles" class="flex hover:cursor-pointer" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp"> @@ -162,7 +162,7 @@ export default defineComponent({ } }, fontSz(): number { - return 0.75 * this.lytOpts.headerSz; + return 0.8 * this.lytOpts.headerSz; }, styles(): Record<string,string> { let layoutStyles = { @@ -234,10 +234,11 @@ export default defineComponent({ break; } } + let screenSz = this.uiOpts.breakpoint; return { height: this.lytOpts.headerSz + 'px', - padding: ((this.lytOpts.headerSz - this.fontSz) / 2) + 'px', - lineHeight: this.fontSz + 'px', + padding: `0 ${(this.lytOpts.headerSz - this.fontSz)}px`, + lineHeight: this.lytOpts.headerSz + 'px', fontSize: this.fontSz + 'px', color: textColor, // For ellipsis @@ -288,8 +289,7 @@ export default defineComponent({ }, nonleafHeaderTextStyles(): Record<string,string> { return { - margin: 'auto 0', - lineHeight: this.fontSz + 'px', + lineHeight: this.lytOpts.headerSz + 'px', fontSize: this.fontSz + 'px', textAlign: 'center', color: this.uiOpts.textColor, |