diff --git a/apps/client/src/views/editor/finder/Finder.module.scss b/apps/client/src/views/editor/finder/Finder.module.scss index d1b28e3b1..99c2a318e 100644 --- a/apps/client/src/views/editor/finder/Finder.module.scss +++ b/apps/client/src/views/editor/finder/Finder.module.scss @@ -54,17 +54,51 @@ } .footer { + width: 100%; + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 1rem; font-size: calc(1rem - 2px); color: $label-gray; } +.filterHint { + text-align: right; +} + .em { color: $ui-white; margin-inline: 0.25rem; } +.hints { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1rem; + color: $label-gray; + font-size: calc(1rem - 3px); +} + +.hintItem { + display: inline-flex; + align-items: center; + gap: 0.25rem; +} + .scrollContainer { max-height: 70vh; overflow: auto; padding-top: 1rem; } + +@media (max-width: 680px) { + .footer { + align-items: flex-start; + flex-direction: column; + } + + .filterHint { + text-align: left; + } +} diff --git a/apps/client/src/views/editor/finder/Finder.tsx b/apps/client/src/views/editor/finder/Finder.tsx index 3a04ff89c..a3717b097 100644 --- a/apps/client/src/views/editor/finder/Finder.tsx +++ b/apps/client/src/views/editor/finder/Finder.tsx @@ -3,6 +3,7 @@ import { SupportedEntry } from 'ontime-types'; import { KeyboardEvent, useState } from 'react'; import Input from '../../../common/components/input/input/Input'; +import Kbd from '../../../common/components/kbd/Kbd'; import Modal from '../../../common/components/modal/Modal'; import useFinder from './useFinder'; @@ -96,8 +97,25 @@ export default function Finder({ isOpen, onClose }: FinderProps) { } footerElements={
- Use the keywords cue, index or - title to filter search. +
+ + + + Navigate + + + Enter + Go + + + Esc + Close + +
+
+ Filter by cue, index, or + title +
} />