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

mobile tweaks for input group, select fixes

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-02-08 17:46:32 +01:00
parent e550cc1e9f
commit c6e84676c4
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/atoms/Content.module.scss
View File

@ -1,7 +1,7 @@
@import '../../styles/variables'; @import '../../styles/variables';
.content { .content {
padding: 0 $spacer / 2; padding: 0 $spacer / 1.5;
max-width: $break-point--small; max-width: $break-point--small;
margin: 0 auto; margin: 0 auto;

1
src/components/atoms/Form/Input.tsx
View File

@ -52,6 +52,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
return ( return (
<div className={this.inputWrapClasses()}> <div className={this.inputWrapClasses()}>
<select className={styles.select} {...props}> <select className={styles.select} {...props}>
<option value="none">---</option>
{props.options && {props.options &&
props.options.map( props.options.map(
(option: string, index: number) => ( (option: string, index: number) => (

32
src/components/atoms/Form/InputGroup.module.scss
View File

@ -1,21 +1,35 @@
@import '../../../styles/variables'; @import '../../../styles/variables';
.inputGroup { .inputGroup {
display: flex;
width: 100%; width: 100%;
@media screen and (min-width: $break-point--small) {
display: flex;
}
> input { > input {
width: 75%; @media screen and (min-width: $break-point--small) {
border-top-right-radius: 0; width: 75%;
border-bottom-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
} }
> button { > button {
width: 25%; width: 100%;
height: 100%; position: absolute;
border-top-left-radius: 0; left: 0;
border-bottom-left-radius: 0; bottom: -120%;
box-shadow: none;
@media screen and (min-width: $break-point--small) {
position: relative;
bottom: auto;
width: 25%;
height: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: none;
}
&:hover, &:hover,
&:focus { &:focus {

4
src/data/form-publish.json
View File

@ -38,14 +38,13 @@
"label": "Type", "label": "Type",
"type": "select", "type": "select",
"required": true, "required": true,
"options": ["", "Data set", "Algorithm", "Container", "Workflow", "Other"] "options": ["Data set", "Algorithm", "Container", "Workflow", "Other"]
}, },
"license": { "license": {
"label": "License", "label": "License",
"type": "select", "type": "select",
"required": true, "required": true,
"options": [ "options": [
"No License Specified",
"Public Domain", "Public Domain",
"CC BY: Attribution", "CC BY: Attribution",
"CC BY-SA: Attribution ShareAlike", "CC BY-SA: Attribution ShareAlike",
@ -66,7 +65,6 @@
"type": "select", "type": "select",
"required": true, "required": true,
"options": [ "options": [
"",
"Image Recognition", "Image Recognition",
"Dataset Of Datasets", "Dataset Of Datasets",
"Language", "Language",