mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
finished, still missing texts, images
This commit is contained in:
parent
a691ee1259
commit
4bed11c7ee
@ -12,9 +12,10 @@
|
||||
border: 1px solid $brand-grey-lighter;
|
||||
border-radius: $border-radius;
|
||||
background: $brand-white;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: .85rem;
|
||||
color: #41474e;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@ -22,6 +23,16 @@
|
||||
border-color: $brand-pink;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 110px;
|
||||
padding-right: $spacer;
|
||||
float: left;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
@ -4,10 +4,13 @@ import styles from './AreaButton.module.scss'
|
||||
const AreaButton = ({ title, description, action }: { title: string; description: string, action: any }) => {
|
||||
|
||||
return (
|
||||
<div className={styles.areaButton}>
|
||||
<div onClick={action}>
|
||||
<h1>{title}</h1>
|
||||
<p>{description}</p>
|
||||
<div className={styles.areaButton} onClick={action}>
|
||||
<div>
|
||||
<img src="https://placeimg.com/150/150/any" alt="{title}"/>
|
||||
<div className="text">
|
||||
<h1>{title}</h1>
|
||||
<>{description}</>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
@ -2,19 +2,25 @@
|
||||
|
||||
.typeGrid {
|
||||
display: grid;
|
||||
grid-template-rows: 2fr 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: $spacer/4;
|
||||
}
|
||||
|
||||
@media (min-width: $break-point--small) {
|
||||
.typeGrid > div:first-child {
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
}
|
||||
@media (min-width: $break-point--small) {
|
||||
& > div:first-child {
|
||||
grid-column: 1 / span 2;
|
||||
height: 100%;
|
||||
min-height: 235px;
|
||||
|
||||
@media (max-width: $break-point--small) {
|
||||
.typeGrid > div {
|
||||
grid-column: 1 / span 2;
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $break-point--small) {
|
||||
& > div {
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -40,10 +40,10 @@ class Publish extends Component<{}, PublishState> {
|
||||
description="What do you want to publish?"
|
||||
>
|
||||
<div className={styles.typeGrid}>
|
||||
<AreaButton title={'Dataset'} description={'Datasets are xxx'} action={this.publishDataset}/>
|
||||
<AreaButton title={'Container'} description={'Container are xxx'} action={this.publishContainer}/>
|
||||
<AreaButton title={'Workflow'} description={'Workflow are xxx'} action={this.publishWorkflow}/>
|
||||
<AreaButton title={'Algorithm'} description={'Algorithm are xxx'} action={this.publishAlgorithm}/>
|
||||
<AreaButton title={'Dataset'} description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ipsum leo, posuere vitae sem vel, feugiat facilisis libero. Vestibulum eu elit sed lacus egestas laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.'} action={this.publishDataset}/>
|
||||
<AreaButton title={'Container'} description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ipsum leo, posuere vitae sem vel.'} action={this.publishContainer}/>
|
||||
<AreaButton title={'Workflow'} description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ipsum leo, posuere vitae sem vel.'} action={this.publishWorkflow}/>
|
||||
<AreaButton title={'Algorithm'} description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ipsum leo, posuere vitae sem vel.'} action={this.publishAlgorithm}/>
|
||||
</div>
|
||||
</Route>
|
||||
)}
|
||||
|
Loading…
Reference in New Issue
Block a user