mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 14:01:56 +08:00
style: update sttyle of config cover
This commit is contained in:
rutik wankhade
parent
a424eb2fe3
commit
e673d157e2
@ -14,8 +14,8 @@
|
||||
<meta property="twitter:image"
|
||||
content="https://user-images.githubusercontent.com/47467468/138584874-34311571-5fc7-40db-93f2-759edb68635d.png">
|
||||
<link rel="apple-touch-icon" href="./favicon.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 rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
|
||||
|
||||
<!--
|
||||
|
||||
@ -5,8 +5,8 @@ class App extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="content bg-slate-400">
|
||||
<Navbar />
|
||||
<div className="content ">
|
||||
{/* <Navbar /> */}
|
||||
<ConfigCover />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,31 +2,9 @@ body {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.tagline {
|
||||
max-width: 300px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
.config-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding:35px;
|
||||
width: 600px;
|
||||
background-color: #ffffff;
|
||||
margin-right:10px;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.card{
|
||||
text-align: center;
|
||||
color:#676683;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
details{
|
||||
font-size: 1rem;
|
||||
@ -64,21 +42,11 @@ details{
|
||||
label{
|
||||
margin: 5px;
|
||||
}
|
||||
input {
|
||||
margin: 4px;
|
||||
background-color: #f2f2f2;
|
||||
|
||||
}
|
||||
|
||||
.input-title{
|
||||
margin:5px;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.input-author{
|
||||
background-color: #f2f2f2;
|
||||
|
||||
}
|
||||
|
||||
.input-color{
|
||||
padding:1px;
|
||||
width:40px;
|
||||
|
||||
@ -41,55 +41,118 @@ class ConfigCover extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="main-container">
|
||||
<div className="config-container card ">
|
||||
<p className="tagline"><span role="img" aria-label="tool"> 🛠 </span> Creating cover images for your blogs is now super easy</p>
|
||||
<textarea
|
||||
type="text"
|
||||
placeholder="Enter title here"
|
||||
className="input-title form-control"
|
||||
onChange={(e) => this.setState({ title: e.target.value })}
|
||||
/>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Author"
|
||||
className="input-author form-control"
|
||||
onChange={(e) => this.setState({ author: e.target.value })}
|
||||
></input>
|
||||
<div className="flex ">
|
||||
<div className="bg-white p-4 flex flex-col md:w-1/4">
|
||||
{/* <p className="tagline"><span role="img" aria-label="tool"> 🛠 </span> Creating cover images for your blogs is now super easy</p> */}
|
||||
|
||||
|
||||
<div className=" rounded my-2 ml-2 p-1">
|
||||
<div className="m-2 flex flex-col">
|
||||
<span className="font-medium">Blog Title</span>
|
||||
<textarea
|
||||
type="text"
|
||||
value={this.state.title}
|
||||
placeholder="Enter title here"
|
||||
className="border text-gray-700 text-xl rounded p-2 h-24"
|
||||
onChange={(e) => this.setState({ title: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <h6 className="">Background</h6> */}
|
||||
<div className="flex flex-col m-2 ">
|
||||
<span className="font-medium">Author</span>
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.author}
|
||||
placeholder="Author"
|
||||
className="border text-gray-700 text-xl rounded bg-white p-2"
|
||||
onChange={(e) => this.setState({ author: e.target.value })}
|
||||
></input>
|
||||
</div>
|
||||
|
||||
<div className="flex-card">
|
||||
<div className=" border rounded p-1 flex-row ">
|
||||
<span>{ this.state.bgColor}</span>
|
||||
|
||||
|
||||
<div className="flex items-center">
|
||||
|
||||
<div className="flex flex-col m-2 w-1/2">
|
||||
<span className="font-medium">Font</span>
|
||||
|
||||
<select className=" text-gray-700 text-xl p-2 rounded border">
|
||||
<option>Serif</option>
|
||||
<option>Sans</option>
|
||||
<option>mono</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex flex-col m-2 ">
|
||||
<span className="font-medium">Color</span>
|
||||
<div className="border rounded flex items-center p-2">
|
||||
|
||||
<span className="text-sm text-gray-700 font-semibold mx-2">{this.state.bgColor}</span>
|
||||
<input type="color" value={this.state.bgColor}
|
||||
onChange={(e) => this.setState({ bgColor: e.target.value })}
|
||||
className="input-color form-control"
|
||||
className="h-8 w-8 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-row">
|
||||
<span>Font size</span>
|
||||
<input type="number" className="font-size" min="20"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mx-4 my-1">
|
||||
<h6>Dev Icon</h6>
|
||||
|
||||
|
||||
|
||||
<div className="flex flex-col m-2 ">
|
||||
<span className="font-medium">Icon</span>
|
||||
<Select value={this.state.icon}
|
||||
onChange={(selectedOption) => this.setState({ icon: selectedOption })}
|
||||
options={this.state.devIconOptions}
|
||||
className="input"
|
||||
className="text-xl text-gray-700"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="flex flex-col m-2">
|
||||
<span className="font-medium">Pattern</span>
|
||||
<select
|
||||
onChange={(e) => this.setState({ pattern: e.target.value })}
|
||||
className="border text-xl p-2 rounded"
|
||||
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>
|
||||
</div>
|
||||
|
||||
{/* <div className="flex flex-col m-2 ">
|
||||
<span className="font-medium">Theme</span>
|
||||
|
||||
<select className="text-gray-700 text-xl p-2 rounded border">
|
||||
<option>Basic</option>
|
||||
<option>Theme 2</option>
|
||||
<option>Theme 3</option>
|
||||
</select>
|
||||
</div> */}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <div className="mx-4 my-1">
|
||||
<h6>Download As</h6>
|
||||
<select onChange={(e) => this.setState({ download: e.target.value })}
|
||||
@ -107,7 +170,7 @@ class ConfigCover extends React.Component {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="d-flex flex-column">
|
||||
<div className="m-2 items-center justify-center flex">
|
||||
<RandomTheme onThemeChange={this.getRandomTheme} />
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user