mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Desktop styling for search bar

This commit is contained in:
viktorstrate 2021-06-10 21:40:48 +02:00
parent 358a2cf3e4
commit db792a5a35
No known key found for this signature in database
GPG Key ID: 3F855605109C1E8A
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/App.tsx
View File

@ -1,14 +1,23 @@
import React from 'react'
import React, { useEffect } from 'react'
import { Helmet } from 'react-helmet'
import Routes from './components/routes/Routes'
import Messages from './components/messages/Messages'
import { useTranslation } from 'react-i18next'
import { loadTranslations } from './localization'
import { useLocation } from 'react-router'
const App = () => {
const { t } = useTranslation()
const { pathname } = useLocation()
loadTranslations()
useEffect(() => {
window.scrollTo(0, 0)
if (document.activeElement != document.body)
(document.activeElement as HTMLInputElement).blur()
}, [pathname])
return (
<>
<Helmet>

17
ui/src/components/header/Searchbar.tsx
View File

@ -39,7 +39,9 @@ const SEARCH_QUERY = gql`
}
`
const SearchWrapper = styled.div.attrs({ className: 'w-full max-w-xs' })``
const SearchWrapper = styled.div.attrs({
className: 'w-full max-w-xs lg:relative',
})``
const SearchBar = () => {
const { t } = useTranslation()
@ -173,7 +175,7 @@ const SearchBar = () => {
selectedItemId ? `search-item-${selectedItemId}` : ''
}
aria-expanded={expanded}
className="w-full py-2 px-3 rounded-md bg-gray-50 focus:bg-white border border-gray-50 focus:border-blue-400 outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
className="w-full py-2 px-3 z-10 relative rounded-md bg-gray-50 focus:bg-white border border-gray-50 focus:border-blue-400 outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
type="search"
placeholder={t('header.search.placeholder', 'Search')}
onChange={fetchEvent}
@ -185,7 +187,7 @@ const SearchBar = () => {
}
const ResultTitle = styled.h1.attrs({
className: 'uppercase text-gray-700 font-semibold mt-4 mb-2 mx-1',
className: 'uppercase text-gray-700 text-sm font-semibold mt-4 mb-2 mx-1',
})``
type SearchResultsProps = {
@ -241,7 +243,8 @@ const SearchResults = ({
id="search-results"
role="listbox"
className={classNames(
'absolute bg-white left-0 right-0 top-[72px] overflow-y-auto h-[calc(100vh-152px)] border px-4',
'absolute bg-white left-0 right-0 top-[72px] overflow-y-auto h-[calc(100vh-152px)] border px-4 z-0',
'lg:top-[40px] lg:shadow-md lg:rounded-b lg:max-h-[560px]',
{ hidden: !expanded }
)}
tabIndex={-1}
@ -324,7 +327,7 @@ const SearchRow = ({
>
<NavLink to={link} className="flex items-center" tabIndex={-1}>
{preview}
<span className="flex-grow pl-2">{label}</span>
<span className="flex-grow pl-2 text-sm">{label}</span>
</NavLink>
</li>
)
@ -345,7 +348,7 @@ const PhotoRow = ({ query, media, selected, setSelected }: PhotoRowArgs) => (
preview={
<ProtectedImage
src={media?.thumbnail?.url}
className="w-16 h-16 object-cover"
className="w-14 h-14 object-cover"
/>
}
label={searchHighlighted(query, media.title)}
@ -369,7 +372,7 @@ const AlbumRow = ({ query, album, selected, setSelected }: AlbumRowArgs) => (
preview={
<ProtectedImage
src={album?.thumbnail?.thumbnail?.url}
className="w-16 h-16 rounded object-cover"
className="w-14 h-14 rounded object-cover"
/>
}
label={searchHighlighted(query, album.title)}