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 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" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Web Marker</title> <title>Web Marker</title>

5
webmarker/src/App.js
View File

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

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

@ -55,7 +55,7 @@ const AddModal = ({onExit}) => {
} }
else { 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/"/> <input onChange={SetLink} className="modal-input" type="search" placeholder="e.g. https://example.com/"/>
<h3>Tag:</h3> <h3>Tag:</h3>
<input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials"/> <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> <button className="cancel-btn">Cancel</button>
</div> </div>
</div> </div>

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

@ -43,7 +43,7 @@ const List = ({data}) => {
<td>{e.title}</td> <td>{e.title}</td>
<td><a href={e.link}>{url.hostname}</a></td> <td><a href={e.link}>{url.hostname}</a></td>
<td>{e.tag}</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> </tr>
} catch (e) { } catch (e) {
console.log(e) console.log(e)

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

@ -10,32 +10,42 @@
} }
.search { .search {
border-radius: 10px; font-family: 'Font Awesome 5 Free';
font-size: 1.5rem; font-size: 1.5rem;
padding-left: 10px; 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 { .settings-btn:active, .add-btn:active {
border-top-right-radius: 10px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
border-bottom-right-radius: 10px;
color: #1f2c38b6;
} }
.settings-btn { .search:focus {
border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
color: #1f2c38b6;
} }
.add-btn { .add-btn {
border-radius: 10px; font-family: 'Font Awesome 5 Free';
color: #1f2c38b6; 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-left: auto;
margin-right: 10px; margin-right: 10px;
transition: background-color 0.1s;
}
.add-btn:hover {
background-color: rgb(76, 117, 170);
} }
textarea:focus, input:focus{ textarea:focus, input:focus{
outline: none; outline: none;
} }
.material-icons-outlined.md-36 { font-size: 36px; }

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

@ -13,7 +13,6 @@
.table th { .table th {
font-size: 1.6rem; font-size: 1.6rem;
padding: 5px;
} }
.table tbody tr:nth-of-type(2n-1) { .table tbody tr:nth-of-type(2n-1) {
@ -32,9 +31,18 @@
} }
.delete { .delete {
background-color: rgb(255, 123, 123);
color: white; color: white;
cursor: pointer; 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 { .number {

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

@ -2,19 +2,19 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
background-color: rgba(49, 64, 73, 0.781); background-color: rgba(39, 60, 78, 0.781);
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
.box { .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%; top: 20%;
left: 20%; left: 20%;
background-color: #1b2e3f; background-color: #1b2e3f;
width: 60%; width: 60%;
height: 60%; height: 60%;
border-radius: 10px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
@ -29,28 +29,57 @@
} }
.modal-input { .modal-input {
border-radius: 10px;
padding: 10px;
font-size: 1.3rem; font-size: 1.3rem;
padding: 10px;
border: none;
width: 100%; 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 { .upload-btn {
padding: 5px; font-family: 'Font Awesome 5 Free';
border-radius: 10px; font-size: 2rem;
color: #1f2c38b6; padding: 10px;
margin-top: 60px; 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; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
transition: background-color 0.1s;
}
.upload-btn:hover {
background-color: rgb(76, 117, 170);
} }
.cancel-btn { .cancel-btn {
padding: 5px; padding: 5px;
border-radius: 10px; cursor: pointer;
color: #1f2c38b6; 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;
margin-top: 25px; color: #ffffffb6;
background-color:#273949;
border: none;
margin-top: 5px;
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: 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;
} }