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

feat: major UI changes

Browse Source
This commit is contained in:
rutik wankhade 2020-08-21 15:23:48 +05:30
parent b50d6f0a85
commit 25daf96ae8
8 changed files with 219 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/icons/github.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 KiB

16
src/components/App.css
View File

@ -5,20 +5,26 @@
padding:5px 5px 5px 35px; padding:5px 5px 5px 35px;
font-family:segoe ui; font-family:segoe ui;
} }
.logo{ .logo{
height:30px; height:30px;
width:30px; width:30px;
margin-right:10px; margin-right:10px;
}
a {
color:inherit;
}
a i:hover{
color:#f2f2f2;
} }
footer{ footer{
height:40px; height:40px;
text-align: center; text-align: center;
background-color:#ffffff; background-color:#ffffff;
margin-top:40px;
padding:10px; padding:10px;
font-size: 14px; font-size: 14px;
border-top:1px solid #cccccc; border-top:1px solid #cccccc;
} }
@media screen and (max-width:600px){
footer{margin-top:40px;}
}

12
src/components/ChevronDown.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import './ConfigCover.css';
const ChevronDown = () => {
return (
<svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-chevron-down" fill="currentColor" stroke-width="10" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
</svg>
);
}
export default ChevronDown;

84
src/components/ConfigCover.css
View File

@ -3,8 +3,8 @@ body {
} }
.main-container { .main-container {
/* width: auto;*/ /* width: auto;
/* justify-content: center; justify-content: center;
align-items: center; */ align-items: center; */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -18,34 +18,94 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding:35px; padding:35px;
}
.card{
border-radius: 8px;
text-align: center;
color:#676683;
margin:10px 10px 10px 20px;
/* border:1px solid #676683; */
}
details{
font-size: 1rem;
box-shadow: 0 10px 15px -5px #f2f2f2;
width: 100%;
background: #ffffff;
border-radius: 5px;
position: relative;
max-width: 400px;
padding:5px;
border: 2px solid #f2f2f2;
margin:4px;
justify-content: center;
align-items: center;
} }
.inputdata::-webkit-scrollbar {
summary{
align-items: center;
justify-content: center;
}
summary:focus{
outline:none;
}
summary::-webkit-details-marker {
display: none; display: none;
} }
summary:hover {
cursor: pointer;
}
.bi-chevron-down {
pointer-events: none;
position: absolute;
top:1em;
right:0.5em;
background: #ffffff;
opacity:0.5;
}
.bi-chevron-down:hover{
opacity:1;
}
svg {
display: block;
}
.icon{
width:20px;
height:20px;
left:1em;
position:absolute;
top:0.7em;
}
.blog-cover { .blog-cover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin:30px; margin:60px;
} }
label { label{
margin: 5px; margin: 5px;
} }
input { input {
margin: 4px; margin: 4px;
text-align: center;
} }
input[type=number]{ .custom-range{
width:40px; max-width:170px;
vertical-align: middle;
margin-left:15px;
} }
.custom-range::-webkit-slider-thumb{ .custom-range::-webkit-slider-thumb{
background-color: #00cc7a; background-color: #00cc7a;
} }
.input-sm{ .input-sm{
width:80px; width:120px;
margin:auto;
} }
.input-md{ .input-md{
width:120px; width:120px;
@ -70,6 +130,6 @@ input[type=number]{
flex-direction: column; flex-direction: column;
} }
.blog-cover{margin:0px;} .blog-cover{margin:0px;}
.card{margin:10px;}
} }

186
src/components/ConfigCover.js
View File

@ -2,6 +2,7 @@ import React from "react";
import "./ConfigCover.css"; import "./ConfigCover.css";
import CoverImage from "./CoverImage"; import CoverImage from "./CoverImage";
import ComponentToImg from "./ComponentToImg"; import ComponentToImg from "./ComponentToImg";
import ChevronDown from './ChevronDown';
const defaultSettings = { const defaultSettings = {
title: "How I built my first project with react", title: "How I built my first project with react",
@ -18,6 +19,7 @@ const defaultSettings = {
icon: 'react' icon: 'react'
}; };
class ConfigCover extends React.Component { class ConfigCover extends React.Component {
state = defaultSettings; state = defaultSettings;
@ -30,7 +32,7 @@ class ConfigCover extends React.Component {
<div className="main-container"> <div className="main-container">
<div className="inputData card"> <div className="inputData card">
<h1>CoverView</h1> <h1>CoverView</h1>
<p className="tagline">🛠 Create awesome cover images for your blog posts quickly</p> <p className="tagline">🛠 Creating cover images for your blogs is now super easy</p>
<input <input
type="text" type="text"
placeholder="Enter title here" placeholder="Enter title here"
@ -45,84 +47,128 @@ class ConfigCover extends React.Component {
onChange={(e) => this.setState({ author: e.target.value })} onChange={(e) => this.setState({ author: e.target.value })}
></input> ></input>
<div> <details>
<label>Background</label> <summary>
<input type="color" value={this.state.bgColor} onChange={(e) => this.setState({ bgColor: e.target.value })} /> <svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-droplet-half icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z" />
<path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z" />
</svg>
<label>Border</label> <label>Colors</label>
<input type="color" value={this.state.borderColor} onChange={(e) => this.setState({ borderColor: e.target.value })} /> <ChevronDown />
</summary>
<div>
<label>Background</label>
<input type="color" value={this.state.bgColor} onChange={(e) => this.setState({ bgColor: e.target.value })} />
</div> <label>Border</label>
<input type="color" value={this.state.borderColor} onChange={(e) => this.setState({ borderColor: e.target.value })} />
</div>
<div> <div>
<label>Foreground</label> <label>Foreground</label>
<input
type="color"
value={this.state.foregroundColor}
className="mr-4"
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 <input
type="color" type="range"
value={this.state.foregroundColor} min="0"
className="mr-4" max="1"
onChange={(e) => this.setState({ foregroundColor: e.target.value })} step="0.1"
/> value={this.state.opacity}
<label>Text</label> className="custom-range"
<input type="color" value={this.state.textColor} onChange={(e) => this.setState({ textColor: e.target.value })} /> onChange={(e) => this.setState({ opacity: e.target.value })}
</div> ></input>
<label>Opacity</label> </details>
<input
type="range"
min="0"
max="1"
step="0.1"
value={this.state.opacity}
className="custom-range"
onChange={(e) => this.setState({ opacity: e.target.value })}
></input>
<div className="d-flex flex-row"> <details>
<label>Border size</label> <summary>
<input type="number" value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} /> <svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-border-width icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3.5A.5.5 0 0 1 .5 3h15a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H.5a.5.5 0 0 1-.5-.5v-2zm0 5A.5.5 0 0 1 .5 8h15a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H.5a.5.5 0 0 1-.5-.5v-1zm0 4a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z" />
</svg>
<label>Border</label>
<ChevronDown />
</summary>
<label>Type</label> <div className="d-flex flex-row">
<select <div className="input-sm">
onChange={(e) => this.setState({ borderType: e.target.value })} <label>Size</label>
className="form-control input-sm" <input type="number" className="form-control " value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
value={this.state.borderType} </div>
>
<option>dotted</option> <div className="input-sm">
<option>dashed</option> <label>Type</label>
<option>solid</option> <select
<option>double</option> onChange={(e) => this.setState({ borderType: e.target.value })}
<option>groove</option> className="form-control mt-1"
<option>ridge</option> value={this.state.borderType}
<option>inset</option> >
<option>outset</option> <option>dotted</option>
<option>none</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>
</div>
</details>
<details>
<summary>
<svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-back icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z" />
</svg>
<label>Background Pattern</label>
<ChevronDown />
</summary>
<select onChange={(e) => this.setState({ pattern: e.target.value })} className="form-control" value={this.state.pattern}>
<option>None</option>
<option>graph-paper</option>
<option>jigsaw</option>
<option>hideout</option>
<option>dots</option>
<option>falling-triangles</option>
<option>circuit-board</option>
<option>temple</option>
<option>anchors</option>
<option>brickwall</option>
<option>overlapping-circles</option>
<option>wiggle</option>
<option>tic-tac-toe</option>
<option>leaf</option>
<option>bubbles</option>
<option>squares</option>
<option>explorer</option>
<option>jupiter</option>
<option>sun</option>
</select> </select>
</div> </details>
<label>Background Pattern</label> <details>
<select onChange={(e) => this.setState({ pattern: e.target.value })} className="form-control" value={this.state.pattern}> <summary>
<option>None</option> <svg width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-code-square icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<option>graph-paper</option> <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
<option>jigsaw</option> <path fill-rule="evenodd" d="M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0zm2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0z" />
<option>hideout</option> </svg>
<option>dots</option> <label>Dev Icon</label>
<option>falling-triangles</option> <ChevronDown />
<option>circuit-board</option> </summary>
<option>temple</option>
<option>anchors</option>
<option>brickwall</option>
<option>overlapping-circles</option>
<option>wiggle</option>
<option>tic-tac-toe</option>
<option>leaf</option>
<option>bubbles</option>
<option>squares</option>
<option>explorer</option>
<option>jupiter</option>
<option>sun</option>
</select>
<label>Dev Icon</label>
<select onChange={(e) => this.setState({ icon: e.target.value })} className="form-control" value={this.state.icon}> <select onChange={(e) => this.setState({ icon: e.target.value })} className="form-control" value={this.state.icon}>
<option>None</option> <option>None</option>
<option>javascript</option> <option>javascript</option>
@ -143,6 +189,7 @@ class ConfigCover extends React.Component {
<option>java</option> <option>java</option>
<option>android</option> <option>android</option>
</select> </select>
</details>
<div className="d-flex flex-row mt-2"> <div className="d-flex flex-row mt-2">
@ -156,6 +203,7 @@ class ConfigCover extends React.Component {
Reset Reset
</button> </button>
</div> </div>
<div className="blog-cover"> <div className="blog-cover">
<ComponentToImg downloadAs={this.state.download}> <ComponentToImg downloadAs={this.state.download}>
<CoverImage {...this.state} /> <CoverImage {...this.state} />

12
src/components/CoverImage.css
View File

@ -25,14 +25,6 @@
vertical-align: middle; vertical-align: middle;
} }
.card{
border-radius: 8px;
text-align: center;
color:#676683;
margin:10px;
/* border:1px solid #676683; */
}
i{ i{
font-size: 32px; font-size: 32px;
float:left; float:left;
@ -50,7 +42,6 @@ i{
padding :4px; padding :4px;
font-weight: 500; font-weight: 500;
vertical-align: middle; vertical-align: middle;
} }
h1{ h1{
@ -69,19 +60,16 @@ button{
box-shadow: 4px 4px #cccccc; box-shadow: 4px 4px #cccccc;
} }
@media screen and (max-width:600px){ @media screen and (max-width:600px){
.cover{ .cover{
width:100vw; width:100vw;
height:auto; height:auto;
padding:8vh; padding:8vh;
} }
.title-card{ .title-card{
padding:2.5vw 3vw 2.5vw 3vw; padding:2.5vw 3vw 2.5vw 3vw;
font-size: 1.2rem; font-size: 1.2rem;
} }
.meta{ .meta{
height:5vh; height:5vh;
font-size: 2vh; font-size: 2vh;

4
src/components/CoverImage.js
View File

@ -17,7 +17,7 @@ class CoverImage extends React.Component {
} }
render() { render() {
const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author,icon } = 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)}`,
@ -34,7 +34,7 @@ class CoverImage extends React.Component {
</div> </div>
</div> </div>
<div className="meta" style={{ backgroundColor: borderColor }}> <div className="meta" style={{ backgroundColor: borderColor }}>
<i className={`devicon-${icon}-plain icon`}></i> <i className={`devicon-${icon}-plain dev-icon`}></i>
<span className="author">A blog by ⚡ {author}</span></div> <span className="author">A blog by ⚡ {author}</span></div>
</div> </div>
); );

3
src/components/Navbar.js
View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import './App.css'; import './App.css';
import logo from '../assets/icons/favicon.png'; import logo from '../assets/icons/favicon.png';
import githubIcon from '../assets/icons/github.png';
const Navbar = () => { const Navbar = () => {
return ( return (
@ -9,7 +8,7 @@ const Navbar = () => {
<h4><img src={logo} alt="logo" className="logo"></img>CoverView</h4> <h4><img src={logo} alt="logo" className="logo"></img>CoverView</h4>
<a href="https://github.com/rutikwankhade/CoverView"> <a href="https://github.com/rutikwankhade/CoverView">
<img src={githubIcon} className="logo" alt="giticon"></img> <i className="devicon-github-plain mr-3"></i>
</a> </a>
</nav>); </nav>);