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
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} onChange={handleChange}
placeholder='Search' placeholder='Search'
aria-label='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> </form>
) )

4
components/search/Item.tsx
View File

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

2
components/search/Sort.tsx
View File

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

6
components/search/Total.tsx
View File

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