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

feat : added dev icons

Browse Source
This commit is contained in:
rutik wankhade 2020-08-20 17:36:30 +05:30
parent 35c95e9b94
commit b50d6f0a85
5 changed files with 51 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -11,6 +11,7 @@
/>
<link rel="apple-touch-icon" href="./favicon.png" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
<!--
manifest.json provides metadata used when your web app is installed on a

1
src/components/ConfigCover.css
View File

@ -60,6 +60,7 @@ input[type=number]{
margin-top: 10px;
box-shadow: 4px 4px #676683;
font-size: 18px;
padding:6px;
}

26
src/components/ConfigCover.js
View File

@ -14,7 +14,8 @@ const defaultSettings = {
foregroundColor: "#ffffff",
textColor: "#676683",
opacity: 1,
author: 'Rutik Wankhade'
author: 'Rutik Wankhade',
icon: 'react'
};
class ConfigCover extends React.Component {
@ -121,6 +122,29 @@ class ConfigCover extends React.Component {
<option>sun</option>
</select>
<label>Dev Icon</label>
<select onChange={(e) => this.setState({ icon: e.target.value })} className="form-control" value={this.state.icon}>
<option>None</option>
<option>javascript</option>
<option>react</option>
<option>angularjs</option>
<option>vuejs</option>
<option>typescript</option>
<option>nodejs</option>
<option>mongodb</option>
<option>docker</option>
<option>html5</option>
<option>css3</option>
<option>sass</option>
<option>git</option>
<option>github</option>
<option>visualstudio</option>
<option>cplusplus</option>
<option>java</option>
<option>android</option>
</select>
<div className="d-flex flex-row mt-2">
<label>Download As</label>
<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control input-md ml-2" value={this.state.download}>

24
src/components/CoverImage.css
View File

@ -21,7 +21,8 @@
padding:50px;
font-size:35px;
font-weight: 600;
border:none;
border:none;
vertical-align: middle;
}
.card{
@ -32,15 +33,24 @@
margin:10px;
/* border:1px solid #676683; */
}
i{
font-size: 32px;
float:left;
margin-left:2vw;
}
.author{
float:right;
margin-right:3vw;
}
.meta{
float:bottom;
background-color: #676683;
color:#ffffff;
height:40px;
height:42px;
padding :4px;
text-align:center;
font-weight: 500;
vertical-align: middle;
}
h1{
@ -71,5 +81,11 @@ button{
padding:2.5vw 3vw 2.5vw 3vw;
font-size: 1.2rem;
}
.meta{
height:5vh;
font-size: 2vh;
}
i{font-size:3.5vh;}
}

6
src/components/CoverImage.js
View File

@ -17,7 +17,7 @@ class CoverImage extends React.Component {
}
render() {
const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author } = this.props;
const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author,icon } = this.props;
const styleToApply = {
borderTop: `${borderSize}px ${borderType} ${borderColor}`,
backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
@ -33,7 +33,9 @@ class CoverImage extends React.Component {
</div>
</div>
<div className="author" style={{ backgroundColor: borderColor }}>A blog by {author}</div>
<div className="meta" style={{ backgroundColor: borderColor }}>
<i className={`devicon-${icon}-plain icon`}></i>
<span className="author">A blog by ⚡ {author}</span></div>
</div>
);
}