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: 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

14
src/components/App.css
View File

@ -5,20 +5,26 @@
padding:5px 5px 5px 35px;
font-family:segoe ui;
}
.logo{
height:30px;
width:30px;
margin-right:10px;
}
a {
color:inherit;
}
a i:hover{
color:#f2f2f2;
}
footer{
height:40px;
text-align: center;
background-color:#ffffff;
margin-top:40px;
padding:10px;
font-size: 14px;
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;

78
src/components/ConfigCover.css
View File

@ -3,8 +3,8 @@ body {
}
.main-container {
/* width: auto;*/
/* justify-content: center;
/* width: auto;
justify-content: center;
align-items: center; */
display: flex;
flex-direction: row;
@ -18,34 +18,94 @@ body {
flex-direction: column;
align-items: center;
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;
}
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 {
display: flex;
flex-direction: column;
align-items: center;
margin:30px;
margin:60px;
}
label{
margin: 5px;
}
input {
margin: 4px;
text-align: center;
}
input[type=number]{
width:40px;
.custom-range{
max-width:170px;
vertical-align: middle;
margin-left:15px;
}
.custom-range::-webkit-slider-thumb{
background-color: #00cc7a;
}
.input-sm{
width:80px;
width:120px;
margin:auto;
}
.input-md{
width:120px;
@ -70,6 +130,6 @@ input[type=number]{
flex-direction: column;
}
.blog-cover{margin:0px;}
.card{margin:10px;}
}

60
src/components/ConfigCover.js
View File

@ -2,6 +2,7 @@ import React from "react";
import "./ConfigCover.css";
import CoverImage from "./CoverImage";
import ComponentToImg from "./ComponentToImg";
import ChevronDown from './ChevronDown';
const defaultSettings = {
title: "How I built my first project with react",
@ -18,6 +19,7 @@ const defaultSettings = {
icon: 'react'
};
class ConfigCover extends React.Component {
state = defaultSettings;
@ -30,7 +32,7 @@ class ConfigCover extends React.Component {
<div className="main-container">
<div className="inputData card">
<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
type="text"
placeholder="Enter title here"
@ -45,13 +47,22 @@ class ConfigCover extends React.Component {
onChange={(e) => this.setState({ author: e.target.value })}
></input>
<details>
<summary>
<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>Colors</label>
<ChevronDown />
</summary>
<div>
<label>Background</label>
<input type="color" value={this.state.bgColor} onChange={(e) => this.setState({ bgColor: e.target.value })} />
<label>Border</label>
<input type="color" value={this.state.borderColor} onChange={(e) => this.setState({ borderColor: e.target.value })} />
</div>
<div>
@ -62,6 +73,7 @@ class ConfigCover extends React.Component {
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>
@ -77,14 +89,28 @@ class ConfigCover extends React.Component {
onChange={(e) => this.setState({ opacity: e.target.value })}
></input>
<div className="d-flex flex-row">
<label>Border size</label>
<input type="number" value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
</details>
<details>
<summary>
<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>
<div className="d-flex flex-row">
<div className="input-sm">
<label>Size</label>
<input type="number" className="form-control " value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
</div>
<div className="input-sm">
<label>Type</label>
<select
onChange={(e) => this.setState({ borderType: e.target.value })}
className="form-control input-sm"
className="form-control mt-1"
value={this.state.borderType}
>
<option>dotted</option>
@ -98,8 +124,18 @@ class ConfigCover extends React.Component {
<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>
@ -121,8 +157,18 @@ class ConfigCover extends React.Component {
<option>jupiter</option>
<option>sun</option>
</select>
</details>
<details>
<summary>
<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">
<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" />
<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" />
</svg>
<label>Dev Icon</label>
<ChevronDown />
</summary>
<select onChange={(e) => this.setState({ icon: e.target.value })} className="form-control" value={this.state.icon}>
<option>None</option>
<option>javascript</option>
@ -143,6 +189,7 @@ class ConfigCover extends React.Component {
<option>java</option>
<option>android</option>
</select>
</details>
<div className="d-flex flex-row mt-2">
@ -156,6 +203,7 @@ class ConfigCover extends React.Component {
Reset
</button>
</div>
<div className="blog-cover">
<ComponentToImg downloadAs={this.state.download}>
<CoverImage {...this.state} />

12
src/components/CoverImage.css
View File

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

2
src/components/CoverImage.js
View File

@ -34,7 +34,7 @@ class CoverImage extends React.Component {
</div>
</div>
<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>
</div>
);

3
src/components/Navbar.js
View File

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