From 3c5144ece678063ba3cd9d96dce98b9479d4205c Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Sat, 28 Jan 2023 20:28:59 +1100 Subject: Adjust info and help modal styling Fix minor typos in store.ts, App.vue, IconButton, etc --- src/App.vue | 2 +- src/README.md | 1 + src/components/HelpModal.vue | 10 +++++++--- src/components/IconButton.vue | 4 ++-- src/components/TileInfoModal.vue | 43 +++++++++++++++++++++++++--------------- src/components/TolTile.vue | 8 +++++--- src/index.css | 4 ++-- src/store.ts | 4 +++- 8 files changed, 48 insertions(+), 28 deletions(-) (limited to 'src') diff --git a/src/App.vue b/src/App.vue index 375882f..c3dbd04 100644 --- a/src/App.vue +++ b/src/App.vue @@ -65,7 +65,7 @@ diff --git a/src/README.md b/src/README.md index 5c88b2e..152904f 100644 --- a/src/README.md +++ b/src/README.md @@ -14,6 +14,7 @@ - **IconButton.vue**: Simple button component containing an SVG icon. - **SCollapsible.vue**: Simple collapsible-content component. - **icon**: Contains components that display SVG icons. +- **store.ts**: App global storage. - **tol.ts**: Holds types for tree-of-life data. - **layout.ts**: Holds code for laying out tiles. - **lib.ts**: Holds project-wide globals. diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue index 7eb2ea2..5ebc36e 100644 --- a/src/components/HelpModal.vue +++ b/src/components/HelpModal.vue @@ -182,9 +182,10 @@

Keyboard Shortcuts


Unusual Node Names

@@ -419,6 +420,9 @@ :disabled="tutOpen" @click.stop="onStartTutorial"> Start Tutorial +

+ Last updated 28/01/23 +

diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue index 9357e97..a897c6f 100644 --- a/src/components/IconButton.vue +++ b/src/components/IconButton.vue @@ -1,6 +1,6 @@ diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index 2d0e354..52dd1b2 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -18,16 +18,17 @@ {{getDisplayName(nodeName, tolNode)}}
-
Children: {{(tolNode.children.length).toLocaleString()}}
-
Tips: {{(tolNode.tips).toLocaleString()}}
+
Children: {{(tolNode.children.length).toLocaleString()}}
+
Tips: {{(tolNode.tips).toLocaleString()}}
IUCN: + target="_blank" title="IUCN Conservation Status" class="font-bold">IUCN: {{getDisplayIucn(tolNode.iucn)}}
OTOL + target="_blank" title="Look up in Open Tree of Life" class="font-bold">OTOL +
@@ -60,34 +61,35 @@ @@ -95,7 +97,7 @@
{{descInfos[idx]!.text}}
-
+
From Wikipedia @@ -260,6 +262,15 @@ function getImgStyles(tolNode: TolNode | null): Record { boxShadow: store.shadowNormal, }; } +const sourceLabelStyles = computed((): Record => { + return { + color: store.color.textDark, + fontWeight: 'bold', + }; +}); +const aStyles = computed((): Record => ({ + color: store.color.alt, +})); function iucnStyles(iucn: string): Record{ let col = 'currentcolor'; switch (iucn){ diff --git a/src/components/TolTile.vue b/src/components/TolTile.vue index 1f6e1d3..99aa4e1 100644 --- a/src/components/TolTile.vue +++ b/src/components/TolTile.vue @@ -32,7 +32,7 @@
- +
@@ -42,7 +42,7 @@ @leaf-click-held="onInnerLeafClickHeld" @nonleaf-click-held="onInnerNonleafClickHeld" @info-click="onInnerInfoIconClick"/>
- +
@@ -226,7 +226,9 @@ const pendingScrollHdlr = ref(0); // Used for throttling updating of scrollOffse function onScroll(): void { if (pendingScrollHdlr.value == 0){ pendingScrollHdlr.value = setTimeout(() => { - scrollOffset.value = rootRef.value!.scrollTop; + if (rootRef.value != null){ + scrollOffset.value = rootRef.value!.scrollTop; + } pendingScrollHdlr.value = 0; }, store.animationDelay); } diff --git a/src/index.css b/src/index.css index 8e8b70f..9ed4bc5 100644 --- a/src/index.css +++ b/src/index.css @@ -25,10 +25,10 @@ transition-duration: 1000ms; transition-timing-function: linear; } -.fadein-leave-to { +.fadeout-leave-to { opacity: 0; } -.fadein-leave-active { +.fadeout-leave-active { transition-property: opacity; transition-duration: 300ms; transition-timing-function: ease-out; diff --git a/src/store.ts b/src/store.ts index 00892b7..7cc8f55 100644 --- a/src/store.ts +++ b/src/store.ts @@ -26,6 +26,7 @@ export type StoreState = { // Coloring color: { text: string, // CSS color + textDark: string, textAlt: string, bg: string, bgLight: string, @@ -66,6 +67,7 @@ function getDefaultState(): StoreState { const tileSpacing = breakpoint == 'sm' ? 6 : 9; const color = { // Note: For scrollbar colors on chrome, edit ./index.css text: '#fafaf9', // stone-50 + textDark: '#a8a29e', // stone-400 textAlt: '#1c1917', // stone-900 bg: '#292524', // stone-800 bgLight: '#44403c', // stone-700 @@ -216,7 +218,7 @@ export const useStore = defineStore('store', { const defaultState = getDefaultState(); for (const key of STORE_COMP_KEYS){ const defaultVal = getStoreVal(defaultState, key); - if (getStoreVal(this, key) != defaultState && localStorage.getItem(key) == null){ + if (getStoreVal(this, key) != defaultVal && localStorage.getItem(key) == null){ setStoreVal(this, key, defaultVal) } } -- cgit v1.2.3