oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

more truncation with react-dotdotdot

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-04-10 17:34:35 +02:00
parent fddb630908
commit 686ff8e8bd
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/molecules/AccountStatus/Popover.module.scss
View File

@ -46,7 +46,6 @@ $popoverWidth: 18rem;
} }
.address { .address {
width: 15rem;
display: block; display: block;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;

12
client/src/components/molecules/AccountStatus/Popover.tsx
View File

@ -1,4 +1,5 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import Dotdotdot from 'react-dotdotdot'
import { User } from '../../../context/User' import { User } from '../../../context/User'
import styles from './Popover.module.scss' import styles from './Popover.module.scss'
@ -40,12 +41,11 @@ export default class Popover extends PureComponent<{
<> <>
<div className={styles.popoverInfoline}> <div className={styles.popoverInfoline}>
{account ? ( {account ? (
<span <Dotdotdot clamp={1}>
className={styles.address} <span className={styles.address}>
title={account} {account}
> </span>
{account} </Dotdotdot>
</span>
) : ( ) : (
<em>No account selected</em> <em>No account selected</em>
)} )}

9
client/src/components/molecules/Asset.tsx
View File

@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import moment from 'moment' import moment from 'moment'
import Dotdotdot from 'react-dotdotdot'
import Markdown from '../../components/atoms/Markdown' import Markdown from '../../components/atoms/Markdown'
import styles from './Asset.module.scss' import styles from './Asset.module.scss'
import CategoryImage from '../atoms/CategoryImage' import CategoryImage from '../atoms/CategoryImage'
@ -28,10 +29,10 @@ const AssetLink = ({ asset, list }: { asset: any; list?: boolean }) => {
<CategoryImage category={base.categories[0]} /> <CategoryImage category={base.categories[0]} />
)} )}
<h1>{base.name}</h1> <h1>{base.name}</h1>
<Markdown
className={styles.description} <div className={styles.description}>
text={`${base.description.substring(0, 90)}...`} <Dotdotdot clamp={3}>{base.description}</Dotdotdot>
/> </div>
<footer className={styles.assetFooter}> <footer className={styles.assetFooter}>
{base.categories && <div>{base.categories[0]}</div>} {base.categories && <div>{base.categories[0]}</div>}

4
client/src/components/organisms/Web3message.module.scss
View File

@ -10,6 +10,10 @@
padding-top: $spacer / 2; padding-top: $spacer / 2;
padding-bottom: $spacer / 2; padding-bottom: $spacer / 2;
text-align: left; text-align: left;
> div {
display: inline-block;
}
} }
.account { .account {

10
client/src/components/organisms/Web3message.tsx
View File

@ -1,4 +1,5 @@
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import Dotdotdot from 'react-dotdotdot'
import Button from '../atoms/Button' import Button from '../atoms/Button'
import AccountStatus from '../molecules/AccountStatus' import AccountStatus from '../molecules/AccountStatus'
import styles from './Web3message.module.scss' import styles from './Web3message.module.scss'
@ -33,10 +34,11 @@ export default class Web3message extends PureComponent {
private haveAccount = (account: string) => ( private haveAccount = (account: string) => (
<div className={styles.message}> <div className={styles.message}>
<AccountStatus className={styles.status} /> Connected with account <AccountStatus className={styles.status} />
<code className={styles.account} title={account && account}> <Dotdotdot clamp={1}>
{`${account && account.substring(0, 20)}...`} Connected with account
</code> <code className={styles.account}>{account}</code>
</Dotdotdot>
</div> </div>
) )