Design improvement.
This commit is contained in:
parent
ac73f4fe09
commit
9fddd7ab5b
|
@ -6,7 +6,6 @@ const config = require('../src/config.js');
|
|||
const getData = require('./modules/getData.js');
|
||||
const fs = require('fs');
|
||||
const fetch = require('cross-fetch');
|
||||
const { dirname } = require('path');
|
||||
|
||||
const port = config.API.PORT;
|
||||
|
||||
|
|
|
@ -40,9 +40,9 @@ const AddItem = ({onExit, reFetch, tags, SetLoader}) => {
|
|||
<div className='AddItem-content'>
|
||||
<h3><span style={{color:"red"}}>* </span>Link:</h3>
|
||||
<input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
|
||||
<h3>Name:</h3>
|
||||
<h3>Name: <span className='optional'>(Optional)</span></h3>
|
||||
<input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
|
||||
<h3>Tags:</h3>
|
||||
<h3>Tags: <span className='optional'>(Optional)</span></h3>
|
||||
<TagSelection setTags={SetTags} tags={tags} />
|
||||
<button onClick={newItem} className="send-btn">Add </button>
|
||||
</div>
|
||||
|
|
|
@ -43,11 +43,11 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch}) => {
|
|||
<button className="edit-btn delete" onClick={deleteItem}></button>
|
||||
<div className='AddItem-content'>
|
||||
<h3>Link: <a target="_blank" rel="noreferrer" href={item.link}>{url.hostname}</a></h3>
|
||||
<h3>{item.title}</h3>
|
||||
<h3 className='title'><b>{item.title}</b></h3>
|
||||
|
||||
<h3>Name:</h3>
|
||||
<h3>Name: <span className='optional'>(Optional)</span></h3>
|
||||
<input onChange={SetName} className="AddItem-input" type="search" value={name} placeholder={"e.g. Example Tutorial"} />
|
||||
<h3>Tags:</h3>
|
||||
<h3>Tags: <span className='optional'>(Optional)</span></h3>
|
||||
<TagSelection setTags={SetTags} tags={tags} tag={tag} />
|
||||
<button onClick={EditItem} className="send-btn">Update </button>
|
||||
</div>
|
||||
|
|
|
@ -34,12 +34,11 @@ const addItem = async (name, link, tag, reFetch, onExit, SetLoader, method, id=n
|
|||
.then(() => {SetLoader(false)});
|
||||
|
||||
onExit();
|
||||
} else if(name === '' && link === '') {
|
||||
onExit()
|
||||
SetLoader(false)
|
||||
} else {
|
||||
} else if(!isValidHttpUrl(link) && link !== '') {
|
||||
SetLoader(false)
|
||||
alert('Please make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
|
||||
} else {
|
||||
SetLoader(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
}
|
||||
|
||||
.btn:active {
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
|
||||
box-shadow: 0px 0px 10px rgb(83, 143, 255);
|
||||
}
|
||||
|
||||
textarea:focus, input:focus{
|
||||
|
|
|
@ -87,7 +87,7 @@
|
|||
}
|
||||
|
||||
.edit-btn:active {
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
|
||||
box-shadow: 0px 0px 10px rgb(83, 143, 255);
|
||||
}
|
||||
|
||||
.row-name {
|
||||
|
@ -123,6 +123,7 @@
|
|||
}
|
||||
|
||||
.delete {
|
||||
background-color:#273949;
|
||||
float: right;
|
||||
font-size: 1.1rem;
|
||||
width: 40px;
|
||||
|
@ -131,4 +132,8 @@
|
|||
|
||||
.delete:hover {
|
||||
background-color: rgba(255, 65, 65, 0.8);
|
||||
}
|
||||
|
||||
.delete:active {
|
||||
box-shadow: 0px 0px 10px rgb(255, 83, 140);
|
||||
}
|
|
@ -72,10 +72,21 @@
|
|||
}
|
||||
|
||||
.send-btn:active {
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
|
||||
box-shadow: 0px 0px 10px rgb(83, 143, 255);
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from { opacity: 0%; }
|
||||
to { }
|
||||
}
|
||||
|
||||
.optional {
|
||||
color: gray;
|
||||
font-size: 0.8em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: darkgray;
|
||||
font-size: 0.9em;
|
||||
}
|
Ŝarĝante…
Reference in New Issue