wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix:layout fix

Browse Source
This commit is contained in:
rutik wankhade 2020-08-12 16:28:30 +05:30
parent b4145c6fce
commit 41f71d2dc7
5 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/App.css
View File

@ -1,4 +1,5 @@
.navbar{ .navbar{
color:#ffffff; color:#ffffff;
padding-left:40px; padding-left:40px;
background-color: #6272a4;
} }

27
src/components/ConfigCover.css
View File

@ -1,20 +1,35 @@
.container{ .main-container{
width:auto; width:auto;
display:flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display:flex;
flex-direction: row;
} }
body{background-color: #f2f2f2;}
.inputData{ .inputData{
margin:60px 0px 20px 0px; display:flex;
flex-direction: column;
align-items: center;
padding:15px;
} }
.blog-cover{display: flex;
flex-direction: column;}
label{margin:5px;} label{margin:5px;}
input{margin:4px;} input{margin:4px;}
.inputTitle{ .inputTitle{
height:40px; height:40px;
width:350px; width:auto;
border-radius:4px; border-radius:4px;
padding-left:20px; padding-left:20px;
}
@media screen and (max-width:600px){
.main-container{
display:flex;
flex-direction:column;
}
} }

17
src/components/ConfigCover.js
View File

@ -15,9 +15,12 @@ class ConfigCover extends React.Component {
render() { render() {
return ( return (
<div className="container"> <div className="main-container">
<div className="inputData"> <div className="inputData card">
<h1>CoverView</h1>
<p>Create blog covers for your next blog post</p>
<input type="text" placeholder="Enter title here" className="inputTitle form-control" <input type="text" placeholder="Enter title here" className="inputTitle form-control"
onChange={e => this.setState({ title: e.target.value })}></input> onChange={e => this.setState({ title: e.target.value })}></input>
@ -30,7 +33,7 @@ class ConfigCover extends React.Component {
onChange={e=>this.setState({height: e.target.value})}></input> onChange={e=>this.setState({height: e.target.value})}></input>
</div> */} </div> */}
<div>
<label>Background</label> <label>Background</label>
<input type="color" defaultValue="#c5a8ff" <input type="color" defaultValue="#c5a8ff"
onChange={e => this.setState({ bgcolor: e.target.value })} /> onChange={e => this.setState({ bgcolor: e.target.value })} />
@ -38,11 +41,11 @@ class ConfigCover extends React.Component {
<label>border</label> <label>border</label>
<input type="color" defaultValue="#8c52ff" <input type="color" defaultValue="#8c52ff"
onChange={e => this.setState({ border: e.target.value })} /> onChange={e => this.setState({ border: e.target.value })} />
</div>
<label>Background Pattern</label> <label>Background Pattern</label>
<select onChange={e => this.setState({ pattern: e.target.value })} <select onChange={e => this.setState({ pattern: e.target.value })}
className="form-control"> className="form-control">
<option>none</option> <option>None</option>
<option>pattern-grid-md</option> <option>pattern-grid-md</option>
<option>pattern-grid-lg</option> <option>pattern-grid-lg</option>
@ -66,7 +69,7 @@ class ConfigCover extends React.Component {
</select> </select>
</div> </div>
<div className="blog-cover">
<ComponentToImg> <ComponentToImg>
<CoverImage <CoverImage
@ -80,7 +83,7 @@ class ConfigCover extends React.Component {
/> />
</ComponentToImg> </ComponentToImg>
</div>

16
src/components/CoverImage.css
View File

@ -7,10 +7,12 @@
height:420px; height:420px;
width:800px; width:800px;
padding:90px; padding:90px;
margin:30px 0px 15px 0px;
} }
.card{ .title-card{
border-radius: 10px; border-radius: 10px;
background-color: #ffffff; background-color: #ffffff;
@ -23,11 +25,19 @@
} }
.card{margin:20px;
border-radius: 8px;
text-align: center;
color:#676683;
padding:50px 25px 50px 25px;}
h1{height:auto;} h1{height:auto;}
button{background-color: #8c52ff; button{background-color: #282a36;
color:#ffffff; color:#ffffff;
border:none; border:none;
border-radius:4px; border-radius:4px;
padding:10px; padding:10px;
margin:20px;} margin:auto;
width:100px;
text-align: center;}

2
src/components/CoverImage.js
View File

@ -10,7 +10,7 @@ class CoverImage extends React.Component {
<div className={` cover ${this.props.pattern}`} <div className={` cover ${this.props.pattern}`}
style={{ backgroundColor:this.props.bgcolor }}> style={{ backgroundColor:this.props.bgcolor }}>
<div className={`${this.props.pattern}`}> <div className={`${this.props.pattern}`}>
<div className="card" <div className="title-card"
style={{ borderTop: `15px solid ${this.props.border}`}}> style={{ borderTop: `15px solid ${this.props.border}`}}>
<h1>{this.props.title}</h1> <h1>{this.props.title}</h1>
</div> </div>