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: added new background patterns

Browse Source
This commit is contained in:
rutik wankhade 2020-08-17 13:26:02 +05:30
parent f1bbb461ea
commit 083d585ea3
5 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -11,7 +11,6 @@
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.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 href="https://unpkg.com/pattern.css" rel="stylesheet">
<!-- <!--
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

31
src/assets/css/patterns.css Normal file
View File

File diff suppressed because one or more lines are too long

33
src/components/ConfigCover.js
View File

@ -2,7 +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 '../assets/css/patterns.css'
class ConfigCover extends React.Component { class ConfigCover extends React.Component {
state = { state = {
@ -39,22 +39,21 @@ class ConfigCover extends React.Component {
<select onChange={e => this.setState({ pattern: e.target.value })} <select onChange={e => this.setState({ pattern: e.target.value })}
className="form-control"> className="form-control">
<option>None</option> <option>None</option>
<option>graph-paper</option>
<option>pattern-grid-md</option> <option>jigsaw</option>
<option>pattern-grid-lg</option> <option>hideout</option>
<option>pattern-grid-xl</option> <option>dots</option>
<option>pattern-cross-dots-xl</option> <option>falling-triangles</option>
<option>pattern-dots-lg</option> <option>circuit-board</option>
<option>pattern-diagonal-lines-md</option> <option>temple</option>
<option>pattern-diagonal-lines-lg</option> <option>anchors</option>
<option>pattern-diagonal-lines-xl</option> <option>brickwall</option>
<option>pattern-vertical-lines-md</option> <option>overlapping-circles</option>
<option>pattern-vertical-lines-lg</option> <option>wiggle</option>
<option>pattern-vertical-lines-xl</option> <option>tic-tac-toe</option>
<option>pattern-horizontal-lines-md</option> <option>leaf</option>
<option>pattern-horizontal-lines-lg</option> <option>bubbles</option>
<option>pattern-horizontal-lines-xl</option> <option>squares</option>
</select> </select>

6
src/components/CoverImage.css
View File

@ -46,6 +46,12 @@ width:100px;
text-align: center;} text-align: center;}
.pattern1{
background-color: #DFDBE5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg fill='%239C92AC' fill-opacity='0.82'%3E%3Cpath d='M0 0h80v80H0V0zm20 20v40h40V20H20zm20 35a15 15 0 1 1 0-30 15 15 0 0 1 0 30z' opacity='.5'%3E%3C/path%3E%3Cpath d='M15 15h50l-5 5H20v40l-5 5V15zm0 50h50V15L80 0v80H0l15-15zm32.07-32.07l3.54-3.54A15 15 0 0 1 29.4 50.6l3.53-3.53a10 10 0 1 0 14.14-14.14zM32.93 47.07a10 10 0 1 1 14.14-14.14L32.93 47.07z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
@media screen and (max-width:600px){ @media screen and (max-width:600px){
.cover{ .cover{
width:100vw; width:100vw;

2
src/components/CoverImage.js
View File

@ -11,7 +11,7 @@ class CoverImage extends React.Component {
style={{ backgroundColor:this.props.bgcolor }}> style={{ backgroundColor:this.props.bgcolor }}>
<div className={`${this.props.pattern}`}> <div className={`${this.props.pattern}`}>
<div className="title-card" <div className="title-card"
style={{ borderTop: `15px solid ${this.props.border}`}}> style={{ borderTop: `18px solid ${this.props.border}`}}>
<p>{this.props.title}</p> <p>{this.props.title}</p>
</div> </div>
</div> </div>