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

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

File diff suppressed because one or more lines are too long

35
src/components/ConfigCover.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import './ConfigCover.css'
import CoverImage from './CoverImage';
import ComponentToImg from './ComponentToImg';
import '../assets/css/patterns.css'
class ConfigCover extends React.Component {
state = {
@ -24,7 +24,7 @@ class ConfigCover extends React.Component {
<input type="text" placeholder="Enter title here" className="inputTitle form-control"
onChange={e => this.setState({ title: e.target.value })}></input>
<div>
<label>Background</label>
@ -39,22 +39,21 @@ class ConfigCover extends React.Component {
<select onChange={e => this.setState({ pattern: e.target.value })}
className="form-control">
<option>None</option>
<option>pattern-grid-md</option>
<option>pattern-grid-lg</option>
<option>pattern-grid-xl</option>
<option>pattern-cross-dots-xl</option>
<option>pattern-dots-lg</option>
<option>pattern-diagonal-lines-md</option>
<option>pattern-diagonal-lines-lg</option>
<option>pattern-diagonal-lines-xl</option>
<option>pattern-vertical-lines-md</option>
<option>pattern-vertical-lines-lg</option>
<option>pattern-vertical-lines-xl</option>
<option>pattern-horizontal-lines-md</option>
<option>pattern-horizontal-lines-lg</option>
<option>pattern-horizontal-lines-xl</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>
</select>

6
src/components/CoverImage.css
View File

@ -46,6 +46,12 @@ width:100px;
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){
.cover{
width:100vw;

2
src/components/CoverImage.js
View File

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