xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

UI improvements

This commit is contained in:
Daniel 2022-04-27 00:42:56 +04:30
parent e4098d3d46
commit 13f80bfd4d
7 changed files with 80 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webmarker/public/index.html
View File

@ -11,7 +11,7 @@
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Web Marker</title>

5
webmarker/src/App.js
View File

@ -34,9 +34,8 @@ function App() {
return (
<div className="App">
<div className="head">
<input className="search" type="search" placeholder="Search for Name/Title/Tag" onChange={search}/>
<button className="add-btn"><span className="material-icons-outlined md-36" onClick={() => setIsAdding(true)}>add</span></button>
<button className="settings-btn"><span className="material-icons-outlined md-36">settings</span></button>
<input className="search" type="search" placeholder="&#xf002; Search for Name / Title / Tag" onChange={search}/>
<button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button>
</div>
<List data={filteredData} />
{isAdding ? <AddModal onExit={exitAdding} /> : null}

4
webmarker/src/componets/AddModal.js
View File

@ -55,7 +55,7 @@ const AddModal = ({onExit}) => {
}
else {
alert('Please fill all fields and make sure url is valid.\n\n(i.e. starts with http/https)');
alert('Please fill all fields and make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
}
}
@ -76,7 +76,7 @@ const AddModal = ({onExit}) => {
<input onChange={SetLink} className="modal-input" type="search" placeholder="e.g. https://example.com/"/>
<h3>Tag:</h3>
<input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials"/>
<button onClick={submitBookmark} className="upload-btn"><span className="material-icons-outlined md-36">upload</span></button>
<button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
<button className="cancel-btn">Cancel</button>
</div>
</div>

2
webmarker/src/componets/List.js
View File

@ -43,7 +43,7 @@ const List = ({data}) => {
<td>{e.title}</td>
<td><a href={e.link}>{url.hostname}</a></td>
<td>{e.tag}</td>
<td className="delete" onClick={() => deleteEntity(e._id)}><div>x</div></td>
<td className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</td>
</tr>
} catch (e) {
console.log(e)

36
webmarker/src/styles/App.css
View File

@ -10,32 +10,42 @@
}
.search {
border-radius: 10px;
font-family: 'Font Awesome 5 Free';
font-size: 1.5rem;
padding-left: 10px;
width: 40%;
border: none;
width: 50%;
color: white;
background-color:#273949;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.search-btn {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
color: #1f2c38b6;
.settings-btn:active, .add-btn:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.settings-btn {
border-radius: 10px;
color: #1f2c38b6;
.search:focus {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.add-btn {
border-radius: 10px;
color: #1f2c38b6;
font-family: 'Font Awesome 5 Free';
padding: 10px;
font-size: 1.5rem;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
color: #ffffffb6;
background-color:#273949;
border: none;
margin-left: auto;
margin-right: 10px;
transition: background-color 0.1s;
}
.add-btn:hover {
background-color: rgb(76, 117, 170);
}
textarea:focus, input:focus{
outline: none;
}
.material-icons-outlined.md-36 { font-size: 36px; }

12
webmarker/src/styles/List.css
View File

@ -13,7 +13,6 @@
.table th {
font-size: 1.6rem;
padding: 5px;
}
.table tbody tr:nth-of-type(2n-1) {
@ -32,9 +31,18 @@
}
.delete {
background-color: rgb(255, 123, 123);
color: white;
cursor: pointer;
transition: background-color 0.1s;
font-family: 'Font Awesome 5 Free';
}
.delete:hover {
background-color: rgb(255, 123, 123);
}
.delete:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.number {

53
webmarker/src/styles/Modal.css
View File

@ -2,19 +2,19 @@
position: fixed;
top: 0;
left: 0;
background-color: rgba(49, 64, 73, 0.781);
background-color: rgba(39, 60, 78, 0.781);
width: 100vw;
height: 100vh;
}
.box {
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; position: absolute;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
position: absolute;
top: 20%;
left: 20%;
background-color: #1b2e3f;
width: 60%;
height: 60%;
border-radius: 10px;
overflow-x: hidden;
overflow-y: auto;
}
@ -29,28 +29,57 @@
}
.modal-input {
border-radius: 10px;
padding: 10px;
font-size: 1.3rem;
padding: 10px;
border: none;
width: 100%;
color: white;
background-color:#273949;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.modal-input:focus {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.upload-btn {
padding: 5px;
border-radius: 10px;
color: #1f2c38b6;
margin-top: 60px;
font-family: 'Font Awesome 5 Free';
font-size: 2rem;
padding: 10px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
color: #ffffffb6;
background-color:#273949;
border: none;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
transition: background-color 0.1s;
}
.upload-btn:hover {
background-color: rgb(76, 117, 170);
}
.cancel-btn {
padding: 5px;
border-radius: 10px;
color: #1f2c38b6;
margin-top: 25px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
color: #ffffffb6;
background-color:#273949;
border: none;
margin-top: 5px;
display: block;
margin-left: auto;
margin-right: auto;
transition: background-color 0.1s;
}
.cancel-btn:hover {
background-color: rgb(255, 123, 123);
}
.upload-btn:active, .cancel-btn:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}