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:responsive cover fixed

Browse Source
This commit is contained in:
rutik wankhade 2020-08-12 22:54:23 +05:30
parent 7bd539c840
commit 3ebf6368e3
4 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ComponentToImg.js
View File

@ -16,7 +16,7 @@ class ComponentToImg extends React.Component {
return ( return (
<React.Fragment> <React.Fragment>
<div ref={this.componentRef} style={{height:this.props.children.height}}> <div ref={this.componentRef} className=" img img-fluid">
{this.props.children} {this.props.children}
</div> </div>

2
src/components/ConfigCover.js
View File

@ -20,7 +20,7 @@ class ConfigCover extends React.Component {
<div className="inputData card"> <div className="inputData card">
<h1>CoverView</h1> <h1>CoverView</h1>
<p>Create blog covers for your next blog post</p> <p>Create awesome cover for your blogs</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>

16
src/components/CoverImage.css
View File

@ -22,7 +22,8 @@
align-items: center; align-items: center;
vertical-align: middle; vertical-align: middle;
padding:50px; padding:50px;
font-size:40px;
font-weight: 600;
} }
.card{margin:20px; .card{margin:20px;
@ -43,3 +44,16 @@ padding:10px;
margin:auto; margin:auto;
width:100px; width:100px;
text-align: center;} text-align: center;}
@media screen and (max-width:600px){
.cover{
width:100vw;
height:45vh;
padding:9vh 4vh 8vh 4vh;
}
.title-card{
padding:2.5vw 3vw 2.5vw 3vw;
font-size: 1.7rem;
}
}

4
src/components/CoverImage.js
View File

@ -7,12 +7,12 @@ class CoverImage extends React.Component {
render() { render() {
return ( return (
<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="title-card" <div className="title-card"
style={{ borderTop: `15px solid ${this.props.border}`}}> style={{ borderTop: `15px solid ${this.props.border}`}}>
<h1>{this.props.title}</h1> <p>{this.props.title}</p>
</div> </div>
</div> </div>
</div> </div>