diff options
| author | Terry Truong <terry06890@gmail.com> | 2023-01-07 20:19:43 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2023-01-07 20:19:43 +1100 |
| commit | 10673fcdbc6a000249df4dd5e4eeff8ca713aa13 (patch) | |
| tree | 872f76b0e4159c3417d0477f822a488e58741d11 /src | |
| parent | 4b323024f51a8de755e4fb6cab301c36d52132a3 (diff) | |
Mark search results with box-shadow
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/TimeLine.vue | 4 | ||||
| -rw-r--r-- | src/store.ts | 2 |
2 files changed, 5 insertions, 1 deletions
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index 9e0a48c..41cd9fe 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -1290,14 +1290,16 @@ function eventStyles(eventId: number){ function eventImgStyles(eventId: number){ const event = idToEvent.value.get(eventId)!; let isSearchResult = searchEvent.value != null && searchEvent.value.id == eventId; + let color = event.ctg == 'discovery' ? store.color.accent : store.color.altDark; return { width: store.eventImgSz + 'px', height: store.eventImgSz + 'px', //backgroundImage: `url(${getImagePath(event.imgId)})`, backgroundColor: 'black', backgroundSize: 'cover', - borderColor: isSearchResult ? 'red' : (event.ctg == 'discovery' ? '#2563eb' : store.color.altDark), + borderColor: color, borderWidth: '1px', + boxShadow: isSearchResult ? '0 0 4px 2px ' + color : 'none', }; } function eventLineStyles(eventId: number){ diff --git a/src/store.ts b/src/store.ts index 19a184b..a366894 100644 --- a/src/store.ts +++ b/src/store.ts @@ -57,6 +57,7 @@ export type StoreState = { altBg: string, bgAlt: string, bgAltDark: string, + accent: string, }, borderRadius: number, // px transitionDuration: number, // ms @@ -77,6 +78,7 @@ function getDefaultState(): StoreState { altBg: '#6a5e2e', bgAlt: '#f5f5f4', // stone-100 bgAltDark: '#d6d3d1', // stone-300 + accent: '#2563eb', // blue-600 }; return { // Device info |