mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
style & layout tweaks
This commit is contained in:
parent
1905e5b869
commit
2163ab643b
@ -0,0 +1,8 @@
|
||||
.feedback {
|
||||
width: 100%;
|
||||
min-height: 20vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
import { DataTokenOptions, useOcean, usePricing } from '@oceanprotocol/react'
|
||||
import { useOcean, usePricing } from '@oceanprotocol/react'
|
||||
import PriceUnit from '../../../../atoms/Price/PriceUnit'
|
||||
import React, { ReactElement, useEffect, useState } from 'react'
|
||||
import { useSiteMetadata } from '../../../../../hooks/useSiteMetadata'
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import Tooltip from '../../../../atoms/Tooltip'
|
||||
import styles from './Fees.module.css'
|
||||
import { useField } from 'formik'
|
||||
import { useField, useFormikContext } from 'formik'
|
||||
import Input from '../../../../atoms/Input'
|
||||
import Error from './Error'
|
||||
|
||||
|
@ -1,8 +1,3 @@
|
||||
.price {
|
||||
margin-top: -2rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0;
|
||||
}
|
||||
|
@ -48,7 +48,7 @@ export default function FormPricing({
|
||||
]
|
||||
|
||||
return (
|
||||
<div className={styles.price}>
|
||||
<>
|
||||
<Tabs
|
||||
items={tabs}
|
||||
handleTabChange={handleTabChange}
|
||||
@ -69,6 +69,6 @@ export default function FormPricing({
|
||||
<code>{JSON.stringify(values, null, 2)}</code>
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
@ -1,16 +1,11 @@
|
||||
.pricing {
|
||||
margin-bottom: var(--spacer);
|
||||
composes: box from '../../../atoms/Box.module.css';
|
||||
padding: 0;
|
||||
padding-bottom: var(--spacer);
|
||||
border-bottom: 1px solid var(--brand-grey-lighter);
|
||||
margin-left: -2rem;
|
||||
margin-right: -2rem;
|
||||
margin-top: var(--spacer);
|
||||
}
|
||||
|
||||
.feedback {
|
||||
width: 100%;
|
||||
min-height: 20vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.pricing [class*='alert'] {
|
||||
margin: var(--spacer);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
@ -104,27 +104,25 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
|
||||
setSubmitting(false)
|
||||
}}
|
||||
>
|
||||
{() =>
|
||||
hasFeedback ? (
|
||||
<Feedback success={success} pricingStepText={pricingStepText} />
|
||||
) : showPricing ? (
|
||||
<FormPricing
|
||||
ddo={ddo}
|
||||
setShowPricing={setShowPricing}
|
||||
content={content}
|
||||
/>
|
||||
) : (
|
||||
<Alert
|
||||
state="info"
|
||||
title={content.empty.title}
|
||||
text={content.empty.info}
|
||||
action={{
|
||||
name: content.empty.action,
|
||||
handleAction: handleShowPricingForm
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{hasFeedback ? (
|
||||
<Feedback success={success} pricingStepText={pricingStepText} />
|
||||
) : showPricing ? (
|
||||
<FormPricing
|
||||
ddo={ddo}
|
||||
setShowPricing={setShowPricing}
|
||||
content={content}
|
||||
/>
|
||||
) : (
|
||||
<Alert
|
||||
state="info"
|
||||
title={content.empty.title}
|
||||
text={content.empty.info}
|
||||
action={{
|
||||
name: content.empty.action,
|
||||
handleAction: handleShowPricingForm
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
)
|
||||
|
@ -1,7 +1,3 @@
|
||||
.pricing {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: calc(var(--spacer) * 1.5);
|
||||
@ -9,6 +5,10 @@
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
||||
.grid > div {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
composes: box from '../../atoms/Box.module.css';
|
||||
margin-top: var(--spacer);
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
.grid {
|
||||
grid-template-columns: 1.5fr minmax(0, 1fr);
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
|
@ -33,44 +33,47 @@ export default function AssetContent({
|
||||
|
||||
return (
|
||||
<article className={styles.grid}>
|
||||
<div className={styles.content}>
|
||||
<div>
|
||||
{showPricing && <Pricing ddo={ddo} />}
|
||||
|
||||
<aside className={styles.meta}>
|
||||
<p>{datePublished && <Time date={datePublished} />}</p>
|
||||
{metadata?.additionalInformation?.categories?.length && (
|
||||
<p>
|
||||
<Link
|
||||
to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
|
||||
>
|
||||
{metadata?.additionalInformation?.categories[0]}
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
</aside>
|
||||
<div className={styles.content}>
|
||||
<aside className={styles.meta}>
|
||||
<p>{datePublished && <Time date={datePublished} />}</p>
|
||||
{metadata?.additionalInformation?.categories?.length && (
|
||||
<p>
|
||||
<Link
|
||||
to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
|
||||
>
|
||||
{metadata?.additionalInformation?.categories[0]}
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
</aside>
|
||||
|
||||
<Markdown text={metadata?.additionalInformation?.description || ''} />
|
||||
<Markdown text={metadata?.additionalInformation?.description || ''} />
|
||||
|
||||
<MetaSecondary metadata={metadata} />
|
||||
<MetaSecondary metadata={metadata} />
|
||||
|
||||
<MetaFull ddo={ddo} metadata={metadata} />
|
||||
<MetaFull ddo={ddo} metadata={metadata} />
|
||||
|
||||
<div className={styles.buttonGroup}>
|
||||
{/* <EditAction
|
||||
<div className={styles.buttonGroup}>
|
||||
{/* <EditAction
|
||||
ddo={ddo}
|
||||
ocean={ocean}
|
||||
account={account}
|
||||
refetchMetadata={refetchMetadata}
|
||||
/> */}
|
||||
{/* <DeleteAction ddo={ddo} /> */}
|
||||
</div>
|
||||
{/* <DeleteAction ddo={ddo} /> */}
|
||||
</div>
|
||||
|
||||
{debug === true && (
|
||||
<pre>
|
||||
<code>{JSON.stringify(ddo, null, 2)}</code>
|
||||
</pre>
|
||||
)}
|
||||
{debug === true && (
|
||||
<pre>
|
||||
<code>{JSON.stringify(ddo, null, 2)}</code>
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className={styles.sticky}>
|
||||
<AssetActions ddo={ddo} />
|
||||
|
@ -10,7 +10,7 @@ export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
|
||||
weightOnDataToken: Yup.string().required('Required'),
|
||||
swapFee: Yup.number()
|
||||
.min(0.1, 'Must be more or equal to 0.1')
|
||||
.max(0.9, 'Must be less or equal to 0.9')
|
||||
.max(10, 'Maximum is 10%')
|
||||
.required('Required')
|
||||
.nullable()
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user