knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[search][s]: improve layout/design in the search page.

Browse Source
This commit is contained in:
anuveyatsu 2020-06-12 17:56:16 +06:00
parent 322dd49309
commit 3f8a755d25
5 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/search/Input.tsx
View File

@ -27,6 +27,7 @@ export default function Input({ query }) {
onChange={handleChange}
placeholder='Search'
aria-label='Search'
className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
/>
</form>
)

4
components/search/Item.tsx
View File

@ -2,8 +2,8 @@ import Link from 'next/link'
export default function Item({ datapackage }) {
return (
<div>
<h3 className="text-2xl font-semibold">
<div className="mb-6">
<h3 className="text-xl font-semibold">
<Link href={`/@${datapackage.organization ? datapackage.organization.name : 'dataset'}/${datapackage.name}`}>
<a className="text-primary">{ datapackage.title || datapackage.name }</a>
</Link>

2
components/search/Sort.tsx
View File

@ -1,6 +1,6 @@
export default function Sort({ selected }) {
return (
<div>
<div className="inline-block my-6 float-right">
<label htmlFor="field-order-by">Order by:</label>
<select className="bg-white" id="field-order-by" name="sort">
<option value="score:desc">Relevance</option>

6
components/search/Total.tsx
View File

@ -1,3 +1,7 @@
export default function Total({ total }) {
return <h1 className="text-4xl font-semibold text-primary">{ total } results found</h1>
return (
<h1 className="text-3xl font-semibold text-primary my-6 inline-block">
{ total } results found
</h1>
)
}

13
pages/search.tsx
View File

@ -2,6 +2,8 @@ import { GetServerSideProps } from 'next'
import querystring from 'querystring'
import config from '../config'
import utils from '../utils'
import Head from 'next/head'
import Nav from '../components/Nav'
import Input from '../components/search/Input'
import Total from '../components/search/Total'
import Sort from '../components/search/Sort'
@ -9,12 +11,19 @@ import List from '../components/search/List'
function Search({ ckanResult, datapackages, query }) {
return (
<div>
<>
<Head>
<title>Portal | Search</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<main className="p-6">
<Input query={query} />
<Total total={ckanResult.count} />
<Sort sort={query.sort} />
<List datapackages={datapackages} />
</div>
</main>
</>
)
}