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: layout fix and removed warnings

Browse Source
This commit is contained in:
rutik wankhade 2020-08-30 22:36:14 +05:30
parent e84f345a5c
commit 416a6dc92a
8 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/App.css
View File

@ -8,22 +8,19 @@ body,
padding-left: 40px;
background-color: #6272a4;
padding: 5px 5px 5px 35px;
font-family: segoe ui;
}
.navbar h4 {
margin-bottom: 0;
.outerContainer {
display: flex;
flex-direction: column;
height: 100%;
}
.logo {
height: 30px;
width: 30px;
margin-right: 10px;
}
.outerContainer {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
a {
color: inherit;
}

2
src/components/App.js
View File

@ -6,7 +6,7 @@ class App extends React.Component {
render() {
return (
<div className={"outerContainer"}>
<div className="outerContainer">
<Navbar />
<ConfigCover />
<Footer />

4
src/components/ChevronDown.js
View File

@ -3,8 +3,8 @@ 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 width="1em" height="1em" viewBox="0 0 16 16" className="bi bi-chevron-down" fill="currentColor" strokeWidth="10" xmlns="http://www.w3.org/2000/svg">
<path fillRule="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>
);
}

5
src/components/ComponentToImg.js
View File

@ -9,7 +9,7 @@ class ComponentToImg extends React.Component {
}
render() {
console.log(this.props.children);
// console.log(this.props.children);
let downloadButton;
// eslint-disable-next-line default-case
switch (this.props.downloadAs) {
@ -19,12 +19,11 @@ class ComponentToImg extends React.Component {
case "JPEG":
downloadButton = <button onClick={() => exportComponentAsJPEG(this.componentRef)}>Download</button>;
}
console.log(downloadButton);
// console.log(downloadButton);
return (
<React.Fragment>
<div ref={this.componentRef}>{this.props.children}</div>
{/* <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button> */}
{downloadButton}
</React.Fragment>
);

8
src/components/ConfigCover.css
View File

@ -8,7 +8,6 @@ body {
align-items: center; */
display: flex;
flex-direction: row;
align-items: center;
}
.tagline {
max-width: 300px;
@ -23,8 +22,9 @@ body {
border-radius: 8px;
text-align: center;
color:#676683;
margin:10px 10px 10px 20px;
/* border:1px solid #676683; */
margin:10px 10px 10px 20px;
box-shadow: 6px #e6e6e6;
}
details{
@ -85,7 +85,7 @@ svg {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 60px;
}
label{
margin: 5px;

10
src/components/ConfigCover.js
View File

@ -60,8 +60,8 @@ class ConfigCover extends React.Component {
<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" />
<path fillRule="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 fillRule="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>
@ -140,7 +140,7 @@ class ConfigCover extends React.Component {
<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" />
<path fillRule="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 />
@ -172,8 +172,8 @@ class ConfigCover extends React.Component {
<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" />
<path fillRule="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 fillRule="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 />

2
src/components/CoverImage.css
View File

@ -7,6 +7,8 @@
height:380px;
width:800px;
padding:90px;
border-radius:2px;
}

2
src/components/Navbar.js
View File

@ -4,7 +4,7 @@ import logo from '../assets/icons/favicon.png';
const Navbar = () => {
return (
<nav className="navbar bg-dark">
<nav className="navbar bg-dark shadow">
<h4><img src={logo} alt="logo" className="logo"></img>CoverView</h4>
<a href="https://github.com/rutikwankhade/CoverView">