diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-04-30 13:24:26 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-04-30 13:24:26 +1000 |
| commit | d87bb9bc0991d7ce4eeb895da61c63a204edaa4d (patch) | |
| tree | 8a5e51817aba00f4d1a281749764805e2aee618a /src/components | |
| parent | 565495b1153c87cbf907de31d116c5f89bcffc2a (diff) | |
Add scripts for downloading/reviewing/cropping_and_resizing images
Also adjust client code to handle new format, and add
backend/data/README.md explaining image production process.
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Tile.vue | 10 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 10 |
2 files changed, 13 insertions, 7 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 1087a58..2ab1df1 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -88,11 +88,11 @@ export default defineComponent({ leafStyles(): Record<string,string> { return { // Image (and scrims) - //backgroundImage: - // 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' + - // 'url(\'/img/' + this.layoutNode.name.replaceAll('\'', '\\\'') + '.png\')', - backgroundImage: - 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%)', + backgroundImage: this.tolNode.imgFile != null ? + 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' + + 'url(\'/img/' + this.tolNode.imgFile.replaceAll('\'', '\\\'') + '\')' : + 'none', + backgroundColor: '#1c1917', backgroundSize: 'cover', // Other borderRadius: this.uiOpts.borderRadius + 'px', diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index 0e2fc94..9805b48 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -7,13 +7,19 @@ import {LayoutNode} from '../layout'; export default defineComponent({ props: { node: {type: Object as PropType<LayoutNode>, required: true}, + tolMap: {type: Object as PropType<TolMap>, required: true}, uiOpts: {type: Object, required: true}, }, computed: { + tolNode(): TolNode { + return this.tolMap.get(this.node.name)!; + }, imgStyles(): Record<string,string> { return { - //backgroundImage: 'url(\'/img/' + this.node.name.replaceAll('\'', '\\\'') + '.png\')', - background: 'black', + backgroundImage: this.tolNode.imgFile != null ? + 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' + + 'url(\'/img/' + this.tolNode.imgFile.replaceAll('\'', '\\\'') + '\')' : + 'none', width: this.uiOpts.infoModalImgSz + 'px', height: this.uiOpts.infoModalImgSz + 'px', backgroundSize: 'cover', |