fix: layout fix of input data

This commit is contained in:
rutik wankhade 2020-08-18 23:00:51 +05:30
parent c5b75bca95
commit 4a599e5778
6 changed files with 55 additions and 33 deletions

View File

@ -20,6 +20,5 @@ footer{
margin-top:40px;
padding:10px;
font-size: 14px;
border-top:1px solid #cccccc
;
border-top:1px solid #cccccc;
}

View File

@ -11,6 +11,7 @@ class ComponentToImg extends React.Component {
render() {
console.log(this.props.children);
let downloadButton;
// eslint-disable-next-line default-case
switch (this.props.downloadAs) {
case "PNG":
downloadButton = <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button>;

View File

@ -29,16 +29,29 @@ input {
margin: 4px;
}
input[type=number]{
width:40px;
}
.custom-range::-webkit-slider-thumb{
background-color: #00cc7a;
}
.input-sm{
width:80px;
}
.input-md{
width:120px;
}
.inputTitle {
height: 40px;
width: auto;
border-radius: 4px;
padding-left: 20px;
}
.reset-btn {
background-color: #fc5c65;
background-color: #00e68a;
margin-top: 10px;
box-shadow: 4px 4px #676683;
}
@media screen and (max-width: 600px) {

View File

@ -6,7 +6,7 @@ import ComponentToImg from "./ComponentToImg";
const defaultSettings = {
title: "How I built my first project with react",
bgColor: "#00ff99",
borderColor: "#8c52ff",
borderColor: "#676683",
borderSize: "18",
borderType: "solid",
pattern: "",
@ -42,7 +42,9 @@ class ConfigCover extends React.Component {
<label>Border</label>
<input type="color" value={this.state.borderColor} onChange={(e) => this.setState({ borderColor: e.target.value })} />
</div>
<div>
<label>Foreground</label>
<input
@ -50,10 +52,10 @@ class ConfigCover extends React.Component {
value={this.state.foregroundColor}
onChange={(e) => this.setState({ foregroundColor: e.target.value })}
/>
<label>Text</label>
<input type="color" value={this.state.textColor} onChange={(e) => this.setState({ textColor: e.target.value })} />
</div>
<label>Opacity</label>
<input
type="range"
@ -61,27 +63,31 @@ class ConfigCover extends React.Component {
max="1"
step="0.1"
value={this.state.opacity}
className="custom-range"
onChange={(e) => this.setState({ opacity: e.target.value })}
></input>
<label>Border size</label>
<input type="number" value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
<label>Border type</label>
<select
onChange={(e) => this.setState({ borderType: e.target.value })}
className="form-control"
value={this.state.borderType}
>
<option>dotted</option>
<option>dashed</option>
<option>solid</option>
<option>double</option>
<option>groove</option>
<option>ridge</option>
<option>inset</option>
<option>outset</option>
<option>none</option>
</select>
<div className="d-flex flex-row">
<label>Border size</label>
<input type="number" value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
<label>Type</label>
<select
onChange={(e) => this.setState({ borderType: e.target.value })}
className="form-control input-sm"
value={this.state.borderType}
>
<option>dotted</option>
<option>dashed</option>
<option>solid</option>
<option>double</option>
<option>groove</option>
<option>ridge</option>
<option>inset</option>
<option>outset</option>
<option>none</option>
</select>
</div>
<label>Background Pattern</label>
<select onChange={(e) => this.setState({ pattern: e.target.value })} className="form-control" value={this.state.pattern}>
@ -105,11 +111,14 @@ class ConfigCover extends React.Component {
<option>jupiter</option>
<option>sun</option>
</select>
<label>Dowload As</label>
<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control" value={this.state.download}>
<option>PNG</option>
<option>JPEG</option>
</select>
<div className="d-flex flex-row mt-2">
<label>Dowload As</label>
<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control input-md" value={this.state.download}>
<option>PNG</option>
<option>JPEG</option>
</select>
</div>
<button className="reset-btn" onClick={this.handleReset}>
Reset
</button>

View File

@ -7,7 +7,7 @@
height:420px;
width:800px;
padding:90px;
margin:30px 0px 15px 0px;
margin:00px 0px 15px 0px;
}
.title-card{
@ -42,7 +42,7 @@ button{
border-radius:4px;
padding:10px;
margin:auto ;
width:100px;
width:150px;
text-align: center;
box-shadow: 4px 4px #cccccc;
}

View File

@ -7,7 +7,7 @@ class CoverImage extends React.Component {
var c;
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c = hex.substring(1).split("");
if (c.length == 3) {
if (c.length === 3) {
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c = "0x" + c.join("");