diff --git a/src/components/atoms/Tags.module.css b/src/components/atoms/Tags.module.css index d60b604d7..5ba88e004 100644 --- a/src/components/atoms/Tags.module.css +++ b/src/components/atoms/Tags.module.css @@ -7,14 +7,13 @@ .tag { color: var(--color-secondary); font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); - padding: 0.2rem 1.2rem 0.2rem 1.2rem; - margin-left: calc(var(--spacer) / 16); - margin-right: calc(var(--spacer) / 16); - margin-bottom: calc(var(--spacer) / 8); + padding: 0.1rem 1.2rem 0.1rem 1.2rem; + margin-left: calc(var(--spacer) / 8); + margin-right: calc(var(--spacer) / 8); + margin-bottom: calc(var(--spacer) / 4); text-align: center; border-radius: var(--border-radius); - border: 1px solid var(--brand-grey-light); + border: 1px solid var(--brand-grey-lighter); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -25,10 +24,6 @@ color: var(--color-primary); } -.tag:first-of-type { - margin-left: 0; -} - .more { font-size: var(--font-size-mini); margin-left: calc(var(--spacer) / 8); diff --git a/src/components/molecules/AssetTeaser.module.css b/src/components/molecules/AssetTeaser.module.css index b473ff6d8..cfaff46ec 100644 --- a/src/components/molecules/AssetTeaser.module.css +++ b/src/components/molecules/AssetTeaser.module.css @@ -30,6 +30,7 @@ .foot { font-weight: var(--font-weight-bold); + margin-top: calc(var(--spacer) / 2); } .foot p { diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index a371f33b3..3c0a07c0a 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -2,7 +2,6 @@ import React from 'react' import { Link } from 'gatsby' import Dotdotdot from 'react-dotdotdot' import { MetaDataMarket } from '../../@types/MetaData' -import Tags from '../atoms/Tags' import Price from '../atoms/Price' import styles from './AssetTeaser.module.css' @@ -16,14 +15,7 @@ const AssetTeaser: React.FC = ({ metadata }: AssetTeaserProps) => { const { name, price } = metadata.main - - const { - description, - copyrightHolder, - tags, - categories, - access - } = metadata.additionalInformation + const { description, access } = metadata.additionalInformation return (
@@ -37,14 +29,10 @@ const AssetTeaser: React.FC = ({ {description || ''} - - {tags && ( - - )}
- +
diff --git a/src/components/organisms/AssetContent/MetaFull.tsx b/src/components/organisms/AssetContent/MetaFull.tsx index 8ef196e6a..6a2af5e3b 100644 --- a/src/components/organisms/AssetContent/MetaFull.tsx +++ b/src/components/organisms/AssetContent/MetaFull.tsx @@ -12,35 +12,14 @@ export default function MetaFull({ metadata: MetaDataMarket }): ReactElement { const { dateCreated, datePublished, author, license } = metadata.main - let dateRange - if (metadata && metadata.additionalInformation) { - ;({ dateRange } = metadata.additionalInformation) - } - - // In practice dateRange will always be defined, but in the rare case it isn't - // we put something to prevent errors - if (!dateRange) { - dateRange = [dateCreated, dateCreated] - } + const { categories } = metadata.additionalInformation return (
- -
)} + + {tags && tags.length > 0 && } ) } diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx index f3c72f7e7..b51baabe9 100644 --- a/src/components/organisms/AssetContent/index.tsx +++ b/src/components/organisms/AssetContent/index.tsx @@ -3,7 +3,6 @@ import React, { ReactElement } from 'react' import Time from '../../atoms/Time' import { Link } from 'gatsby' import Markdown from '../../atoms/Markdown' -import Tags from '../../atoms/Tags' import MetaFull from './MetaFull' import MetaSecondary from './MetaSecondary' import styles from './index.module.css' @@ -20,7 +19,7 @@ export default function AssetContent({ did }: AssetContentProps): ReactElement { const { datePublished } = metadata.main - const { description, categories, tags } = metadata.additionalInformation + const { description, categories } = metadata.additionalInformation return (
@@ -38,8 +37,6 @@ export default function AssetContent({ - {tags && tags.length > 0 && } - diff --git a/src/components/templates/Search/index.module.css b/src/components/templates/Search/index.module.css index 19fc42c30..04086e20e 100644 --- a/src/components/templates/Search/index.module.css +++ b/src/components/templates/Search/index.module.css @@ -10,17 +10,21 @@ @media (min-width: 55rem) { .grid { grid-column-gap: calc(var(--spacer) * 3); - grid-template-columns: minmax(0, 1fr) 3fr; + grid-template-columns: minmax(0, 3fr) 1fr; grid-template-areas: - 'side search' - 'side results'; + 'search side' + 'results side'; } + .search { grid-area: search; } + .side { grid-area: side; + margin-top: calc(var(--spacer) * 2.5); } + .results { grid-area: results; } diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx index 3ea8d04ce..2a1a3122e 100644 --- a/src/components/templates/Search/index.tsx +++ b/src/components/templates/Search/index.tsx @@ -7,6 +7,7 @@ import { SearchPriceFilter } from '../../molecules/SearchPriceFilter' import styles from './index.module.css' import queryString from 'query-string' import { getResults } from './utils' +import Loader from '../../atoms/Loader' export declare type SearchPageProps = { text: string | string[] @@ -22,14 +23,16 @@ export default function SearchPage({ const parsed = queryString.parse(location.search) const { text, tag } = parsed const [queryResult, setQueryResult] = useState() + const [loading, setLoading] = useState(true) useEffect(() => { async function initSearch() { const queryResult = await getResults(parsed) setQueryResult(queryResult) + setLoading(false) } initSearch() - }, [parsed]) + }, []) return (
@@ -42,7 +45,9 @@ export default function SearchPage({
- {queryResult && queryResult.results.length > 0 ? ( + {loading ? ( + + ) : queryResult && queryResult.results.length > 0 ? ( ) : (
No results found.