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

finished, still missing texts, images

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/atoms/AreaButton.module.scss
View File

@ -12,9 +12,10 @@
border: 1px solid $brand-grey-lighter; border: 1px solid $brand-grey-lighter;
border-radius: $border-radius; border-radius: $border-radius;
background: $brand-white; background: $brand-white;
color: inherit;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
font-size: .85rem;
color: #41474e;
&:hover, &:hover,
&:focus { &:focus {
@ -22,6 +23,16 @@
border-color: $brand-pink; border-color: $brand-pink;
transform: none; transform: none;
} }
img {
width: 110px;
padding-right: $spacer;
float: left;
}
> div {
display: inline;
}
} }
h1 { h1 {

11
client/src/components/atoms/AreaButton.tsx
View File

@ -4,10 +4,13 @@ import styles from './AreaButton.module.scss'
const AreaButton = ({ title, description, action }: { title: string; description: string, action: any }) => { const AreaButton = ({ title, description, action }: { title: string; description: string, action: any }) => {
return ( return (
<div className={styles.areaButton}> <div className={styles.areaButton} onClick={action}>
<div onClick={action}> <div>
<h1>{title}</h1> <img src="https://placeimg.com/150/150/any" alt="{title}"/>
<p>{description}</p> <div className="text">
<h1>{title}</h1>
<>{description}</>
</div>
</div> </div>
</div> </div>
) )

26
client/src/routes/Publish/index.module.scss
View File

@ -2,19 +2,25 @@
.typeGrid { .typeGrid {
display: grid; display: grid;
grid-template-rows: 2fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: $spacer/4; grid-gap: $spacer/4;
}
@media (min-width: $break-point--small) { @media (min-width: $break-point--small) {
.typeGrid > div:first-child { & > div:first-child {
grid-column: 1 / span 2; grid-column: 1 / span 2;
} height: 100%;
} min-height: 235px;
@media (max-width: $break-point--small) { img {
.typeGrid > div { width: 200px;
grid-column: 1 / span 2; }
}
} }
@media (max-width: $break-point--small) {
& > div {
grid-column: 1 / span 2;
}
}
} }

8
client/src/routes/Publish/index.tsx
View File

@ -40,10 +40,10 @@ class Publish extends Component<{}, PublishState> {
description="What do you want to publish?" description="What do you want to publish?"
> >
<div className={styles.typeGrid}> <div className={styles.typeGrid}>
<AreaButton title={'Dataset'} description={'Datasets are xxx'} action={this.publishDataset}/> <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={'Container are xxx'} action={this.publishContainer}/> <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={'Workflow are xxx'} action={this.publishWorkflow}/> <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={'Algorithm are xxx'} action={this.publishAlgorithm}/> <AreaButton title={'Algorithm'} description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ipsum leo, posuere vitae sem vel.'} action={this.publishAlgorithm}/>
</div> </div>
</Route> </Route>
)} )}