diff --git a/client/src/components/molecules/Asset.module.scss b/client/src/components/molecules/Asset.module.scss index 855b840..6bbcd08 100644 --- a/client/src/components/molecules/Asset.module.scss +++ b/client/src/components/molecules/Asset.module.scss @@ -29,6 +29,28 @@ } } +.assetList { + > a { + display: block; + color: $brand-grey-dark; + border-bottom: 1px solid $brand-grey-lighter; + padding-top: $spacer / 2; + padding-bottom: $spacer / 2; + + &:hover, + &:focus { + color: $brand-pink; + transform: none; + } + } + + h1 { + font-size: $font-size-base; + color: inherit; + margin: 0; + } +} + .assetFooter { border-top: 1px solid $brand-grey-lighter; padding-top: $spacer / 2; diff --git a/client/src/components/molecules/Asset.tsx b/client/src/components/molecules/Asset.tsx index fd2555b..dec576a 100644 --- a/client/src/components/molecules/Asset.tsx +++ b/client/src/components/molecules/Asset.tsx @@ -2,11 +2,17 @@ import React from 'react' import { Link } from 'react-router-dom' import styles from './Asset.module.scss' -const AssetLink = ({ asset }: { asset: any }) => { +const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => { const { metadata } = asset.findServiceByType('Metadata') const { base } = metadata - return ( + return list ? ( +
+ +

{base.name}

+ +
+ ) : (

{base.name}

diff --git a/client/src/components/molecules/AssetsUser.module.scss b/client/src/components/molecules/AssetsUser.module.scss index 1266f66..7456609 100644 --- a/client/src/components/molecules/AssetsUser.module.scss +++ b/client/src/components/molecules/AssetsUser.module.scss @@ -5,25 +5,11 @@ margin-bottom: $spacer; > div { - text-align: center; - margin-top: $spacer; margin-bottom: $spacer; } } .assets { - display: grid; - grid-template-columns: 1fr; - grid-gap: $spacer; - max-width: 100%; - - @media (min-width: $break-point--small) { - grid-template-columns: 2fr 2fr; - } - - @media (min-width: $break-point--medium) { - grid-template-columns: 2fr 2fr 2fr; - } } .subTitle { @@ -31,4 +17,5 @@ color: $brand-grey-light; border-bottom: 1px solid $brand-grey-lighter; padding-bottom: $spacer / 2; + margin-bottom: 0; } diff --git a/client/src/components/molecules/AssetsUser.tsx b/client/src/components/molecules/AssetsUser.tsx index c5611c8..318b246 100644 --- a/client/src/components/molecules/AssetsUser.tsx +++ b/client/src/components/molecules/AssetsUser.tsx @@ -51,8 +51,8 @@ export default class AssetsUser extends PureComponent { {this.state.results .filter(asset => !!asset) .map((asset: any) => ( - - ))} + + ))} ) : (