Design improvement.

This commit is contained in:
Daniel 2022-06-06 09:51:21 +04:30
parent ac73f4fe09
commit 9fddd7ab5b
7 changed files with 27 additions and 13 deletions

View File

@ -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;

View File

@ -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 &#xf067;</button>
</div>

View File

@ -43,11 +43,11 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch}) => {
<button className="edit-btn delete" onClick={deleteItem}>&#xf2ed;</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 &#xf303;</button>
</div>

View File

@ -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)
}
}

View File

@ -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{

View File

@ -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);
}

View File

@ -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;
}