1
0
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:
Jernej Pregelj 2019-05-03 16:10:01 +02:00
parent a691ee1259
commit 4bed11c7ee
4 changed files with 39 additions and 19 deletions

View File

@ -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 {

View File

@ -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}>
<div className={styles.areaButton} onClick={action}>
<div>
<img src="https://placeimg.com/150/150/any" alt="{title}"/>
<div className="text">
<h1>{title}</h1>
<p>{description}</p>
<>{description}</>
</div>
</div>
</div>
)

View File

@ -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 {
@media (min-width: $break-point--small) {
& > div:first-child {
grid-column: 1 / span 2;
height: 100%;
min-height: 235px;
img {
width: 200px;
}
}
}
@media (max-width: $break-point--small) {
& > div {
grid-column: 1 / span 2;
}
}
@media (max-width: $break-point--small) {
.typeGrid > div {
grid-column: 1 / span 2;
}
}

View File

@ -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>
)}