mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 14:01:56 +08:00
feat : added dev icons
This commit is contained in:
parent
35c95e9b94
commit
b50d6f0a85
@ -11,6 +11,7 @@
|
|||||||
/>
|
/>
|
||||||
<link rel="apple-touch-icon" href="./favicon.png" />
|
<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://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
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
|
@ -60,6 +60,7 @@ input[type=number]{
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
box-shadow: 4px 4px #676683;
|
box-shadow: 4px 4px #676683;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
padding:6px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -14,7 +14,8 @@ const defaultSettings = {
|
|||||||
foregroundColor: "#ffffff",
|
foregroundColor: "#ffffff",
|
||||||
textColor: "#676683",
|
textColor: "#676683",
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
author: 'Rutik Wankhade'
|
author: 'Rutik Wankhade',
|
||||||
|
icon: 'react'
|
||||||
};
|
};
|
||||||
|
|
||||||
class ConfigCover extends React.Component {
|
class ConfigCover extends React.Component {
|
||||||
@ -121,6 +122,29 @@ class ConfigCover extends React.Component {
|
|||||||
<option>sun</option>
|
<option>sun</option>
|
||||||
</select>
|
</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">
|
<div className="d-flex flex-row mt-2">
|
||||||
<label>Download As</label>
|
<label>Download As</label>
|
||||||
<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control input-md ml-2" value={this.state.download}>
|
<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control input-md ml-2" value={this.state.download}>
|
||||||
|
@ -22,6 +22,7 @@
|
|||||||
font-size:35px;
|
font-size:35px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border:none;
|
border:none;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card{
|
.card{
|
||||||
@ -32,15 +33,24 @@
|
|||||||
margin:10px;
|
margin:10px;
|
||||||
/* border:1px solid #676683; */
|
/* border:1px solid #676683; */
|
||||||
}
|
}
|
||||||
|
i{
|
||||||
|
font-size: 32px;
|
||||||
|
float:left;
|
||||||
|
margin-left:2vw;
|
||||||
|
}
|
||||||
.author{
|
.author{
|
||||||
|
float:right;
|
||||||
|
margin-right:3vw;
|
||||||
|
}
|
||||||
|
.meta{
|
||||||
float:bottom;
|
float:bottom;
|
||||||
background-color: #676683;
|
background-color: #676683;
|
||||||
color:#ffffff;
|
color:#ffffff;
|
||||||
height:40px;
|
height:42px;
|
||||||
padding :4px;
|
padding :4px;
|
||||||
text-align:center;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1{
|
h1{
|
||||||
@ -72,4 +82,10 @@ button{
|
|||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.meta{
|
||||||
|
height:5vh;
|
||||||
|
font-size: 2vh;
|
||||||
|
}
|
||||||
|
i{font-size:3.5vh;}
|
||||||
|
|
||||||
}
|
}
|
@ -17,7 +17,7 @@ class CoverImage extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
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 = {
|
const styleToApply = {
|
||||||
borderTop: `${borderSize}px ${borderType} ${borderColor}`,
|
borderTop: `${borderSize}px ${borderType} ${borderColor}`,
|
||||||
backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
|
backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
|
||||||
@ -33,7 +33,9 @@ class CoverImage extends React.Component {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user