search result tweaks

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.1rem 1.2rem 0.1rem 1.2rem;
-  padding: 0.2rem 1.2rem 0.2rem 1.2rem;
+  margin-left: calc(var(--spacer) / 8);
-  margin-left: calc(var(--spacer) / 16);
+  margin-right: calc(var(--spacer) / 8);
-  margin-right: calc(var(--spacer) / 16);
+  margin-bottom: calc(var(--spacer) / 4);
-  margin-bottom: calc(var(--spacer) / 8);
   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);

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 {

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<AssetTeaserProps> = ({
   metadata
 }: AssetTeaserProps) => {
   const { name, price } = metadata.main
-
+  const { description, access } = metadata.additionalInformation
-  const {
-    description,
-    copyrightHolder,
-    tags,
-    categories,
-    access
-  } = metadata.additionalInformation
 
   return (
     <article className={styles.teaser}>
@@ -37,14 +29,10 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
           <Dotdotdot tagName="p" clamp={3}>
             {description || ''}
           </Dotdotdot>
-
-          {tags && (
-            <Tags className={styles.tags} items={tags} max={3} noLinks />
-          )}
         </div>
 
         <footer className={styles.foot}>
-          <Price price={price} small />
+          <Price price={price} />
         </footer>
       </Link>
     </article>

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
+  const { categories } = metadata.additionalInformation
-  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]
-  }
 
   return (
     <div className={styles.metaFull}>
       <MetaItem title="Author" content={author} />
       <MetaItem title="License" content={license} />
-      <MetaItem
+      <MetaItem title="Category" content={categories[0]} />
-        title="Data Created"
+      <MetaItem title="Data Created" content={<Time date={dateCreated} />} />
-        content={
-          dateRange && dateRange[0] !== dateRange[1] ? (
-            <>
-              <Time date={dateRange[0]} />
-              {' –⁠ '}
-              <Time date={dateRange[1]} />
-            </>
-          ) : (
-            <Time date={dateRange[0]} />
-          )
-        }
-      />
 
       <MetaItem
         title="Data Published"

src/components/organisms/AssetContent/MetaItem.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import styles from './MetaItem.module.css'
 
 export default function MetaItem({
@@ -6,7 +6,7 @@ export default function MetaItem({
   content
 }: {
   title: string
-  content: any
+  content: ReactNode
 }): ReactElement {
   return (
     <div className={styles.metaItem}>

src/components/organisms/AssetContent/MetaSecondary.module.css

@@ -12,6 +12,5 @@
 }
 
 .samples {
-  composes: box from '../../atoms/Box.module.css';
   margin-top: calc(var(--spacer) / 2);
 }

src/components/organisms/AssetContent/MetaSecondary.tsx

@@ -4,16 +4,14 @@ import { ListItem } from '../../atoms/Lists'
 import MetaItem from './MetaItem'
 import styles from './MetaSecondary.module.css'
 import { MetaDataMarket } from '../../../@types/MetaData'
+import Tags from '../../atoms/Tags'
 
 export default function MetaSecondary({
   metadata
 }: {
   metadata: MetaDataMarket
 }): ReactElement {
-  let links
+  const { links, tags } = metadata.additionalInformation
-  if (metadata && metadata.additionalInformation) {
-    ;({ links } = metadata.additionalInformation)
-  }
 
   return (
     <aside className={styles.metaSecondary}>
@@ -33,6 +31,8 @@ export default function MetaSecondary({
           />
         </div>
       )}
+
+      {tags && tags.length > 0 && <Tags items={tags} />}
     </aside>
   )
 }

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 (
     <article className={styles.grid}>
@@ -38,8 +37,6 @@ export default function AssetContent({
 
         <Markdown text={description || ''} />
 
-        {tags && tags.length > 0 && <Tags items={tags} />}
-
         <MetaSecondary metadata={metadata} />
 
         <MetaFull did={did} metadata={metadata} />

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'
+      'search side'
-      'side results';
+      'results side';
   }
+
   .search {
     grid-area: search;
   }
+
   .side {
     grid-area: side;
+    margin-top: calc(var(--spacer) * 2.5);
   }
+
   .results {
     grid-area: results;
   }

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<QueryResult>()
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     async function initSearch() {
       const queryResult = await getResults(parsed)
       setQueryResult(queryResult)
+      setLoading(false)
     }
     initSearch()
-  }, [parsed])
+  }, [])
 
   return (
     <section className={styles.grid}>
@@ -42,7 +45,9 @@ export default function SearchPage({
       </aside>
 
       <div className={styles.results}>
-        {queryResult && queryResult.results.length > 0 ? (
+        {loading ? (
+          <Loader />
+        ) : queryResult && queryResult.results.length > 0 ? (
           <AssetList queryResult={queryResult} />
         ) : (
           <div className={styles.empty}>No results found.</div>