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

Clickable tags + Improvements.

This commit is contained in:
Daniel 2022-06-16 13:28:12 +04:30
parent 781b64548a
commit 751bd895ed
13 changed files with 110 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -27,7 +27,7 @@ function App() {
[sortBy, setSortBy] = useState('Default'), [sortBy, setSortBy] = useState('Default'),
[loader, setLoader] = useState(false), [loader, setLoader] = useState(false),
[lightMode, setLightMode] = useState(localStorage.getItem('light-mode') === 'true'), [lightMode, setLightMode] = useState(localStorage.getItem('light-mode') === 'true'),
[toggle, setToggle] = useState(true); [toggle, setToggle] = useState(false);
function SetLoader(x) { function SetLoader(x) {
setLoader(x); setLoader(x);

26
src/componets/AddItem.js
View File

@ -35,18 +35,20 @@ const AddItem = ({onExit, reFetch, tags, SetLoader, lightMode}) => {
return ( return (
<> <>
<div className='add-overlay' onClick={abort}></div> <div className='add-overlay' onClick={abort}></div>
<fieldset className='box'> <div className='send-box'>
<legend>New bookmark</legend> <fieldset className='box'>
<div className='AddItem-content'> <legend>New bookmark</legend>
<h3><span style={{color:"red"}}>* </span>Link:</h3> <div className='AddItem-content'>
<input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/> <h3><span style={{color:"red"}}>* </span>Link:</h3>
<h3>Name: <span className='optional'>(Optional)</span></h3> <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
<input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/> <h3>Name: <span className='optional'>(Optional)</span></h3>
<h3>Tags: <span className='optional'>(Optional)</span></h3> <input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
<TagSelection setTags={SetTags} tags={tags} lightMode={lightMode} /> <h3>Tags: <span className='optional'>(Optional)</span></h3>
<button onClick={newItem} className="send-btn">Add &#xf067;</button> <TagSelection setTags={SetTags} tags={tags} lightMode={lightMode} />
</div> <button onClick={newItem} className="send-btn">Add &#xf067;</button>
</fieldset> </div>
</fieldset>
</div>
</> </>
) )
} }

30
src/componets/EditItem.js
View File

@ -38,20 +38,22 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch, lightMode }) => {
return ( return (
<> <>
<div className='add-overlay' onClick={abort}></div> <div className='add-overlay' onClick={abort}></div>
<fieldset className='box'> <div className='send-box'>
<legend >Edit bookmark</legend> <fieldset className='box'>
<button className="delete" onClick={deleteItem}>&#xf2ed;</button> <legend >Edit bookmark</legend>
<div className='AddItem-content'> <button className="delete" onClick={deleteItem}>&#xf2ed;</button>
<h3>Link: <a target="_blank" rel="noreferrer" href={item.link}>{url.hostname}</a></h3> <div className='AddItem-content'>
<h3 className='title'><b>{item.title}</b></h3> <h3>Link: <a className='link' target="_blank" rel="noreferrer" href={item.link}>{url.hostname}</a></h3>
<h3 className='title'><b>{item.title}</b></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>Name: <span className='optional'>(Optional)</span></h3>
<h3>Tags: <span className='optional'>(Optional)</span></h3> <input onChange={SetName} className="AddItem-input" type="search" value={name} placeholder={"e.g. Example Tutorial"} />
<TagSelection setTags={SetTags} tags={tags} tag={tag} lightMode={lightMode} /> <h3>Tags: <span className='optional'>(Optional)</span></h3>
<button onClick={EditItem} className="send-btn">Update &#xf303;</button> <TagSelection setTags={SetTags} tags={tags} tag={tag} lightMode={lightMode} />
</div> <button onClick={EditItem} className="send-btn">Update &#xf303;</button>
</fieldset> </div>
</fieldset>
</div>
</> </>
) )
} }

14
src/componets/Filters.js
View File

@ -10,12 +10,14 @@ const Filters = ({nameChecked, handleNameCheckbox, descriptionChecked, handleDes
return ( return (
<> <>
<div className='filter-overlay' onClick={abort}></div> <div className='filter-overlay' onClick={abort}></div>
<fieldset className='filter'> <div className='filter-box'>
<legend >Filter by</legend> <fieldset className='filter'>
<label><input type="checkbox" checked={nameChecked} onChange={handleNameCheckbox} />Name</label> <legend >Filter by</legend>
<label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Website title</label> <label><input type="checkbox" checked={nameChecked} onChange={handleNameCheckbox} />Name</label>
<label><input type="checkbox" checked={tagsChecked} onChange={handleTagsCheckbox} />Tags</label> <label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Website title</label>
</fieldset> <label><input type="checkbox" checked={tagsChecked} onChange={handleTagsCheckbox} />Tags</label>
</fieldset>
</div>
</> </>
) )
} }

24
src/componets/List.js
View File

@ -3,6 +3,7 @@ import LazyLoad from 'react-lazyload';
import ViewArchived from './ViewArchived'; import ViewArchived from './ViewArchived';
import EditItem from './EditItem'; import EditItem from './EditItem';
import { useState } from 'react' import { useState } from 'react'
import { Link } from "react-router-dom";
const List = ({data, tags, reFetch, SetLoader, lightMode}) => { const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
const [editBox, setEditBox] = useState(false) const [editBox, setEditBox] = useState(false)
@ -19,6 +20,14 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
return ( return (
<div className="list"> <div className="list">
{editBox ? <EditItem
lightMode={lightMode}
tags={() => tags}
onExit={exitEditing}
SetLoader={SetLoader}
reFetch={reFetch}
item={data[editIndex]}
/> : null}
{/* eslint-disable-next-line */} {/* eslint-disable-next-line */}
{data.map((e, i, array) => { {data.map((e, i, array) => {
try { try {
@ -30,12 +39,22 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
<img alt='' src={favicon} /> <img alt='' src={favicon} />
<div className="list-entity-content"> <div className="list-entity-content">
<div className='row-name'> <div className='row-name'>
<span className="num">{i + 1}.</span> {e.name} <a target="_blank" rel="noreferrer" href={e.link}>({url.hostname})</a> <span className="num">{i + 1}.</span>
{e.name}
<a
className='link'
target="_blank"
rel="noreferrer"
href={e.link}
>
({url.hostname})
</a>
</div> </div>
<div className='title'>{e.title}</div> <div className='title'>{e.title}</div>
<div className="tags"> <div className="tags">
{e.tag.map((e, i) => { {e.tag.map((e, i) => {
return (<div key={i}>{e}</div>) const tagPath = `/tags/${e}`;
return (<Link to={tagPath} key={i}>{e}</Link>)
})} })}
</div> </div>
<div className='date'>{new Date(e.date).toDateString()}</div> <div className='date'>{new Date(e.date).toDateString()}</div>
@ -51,7 +70,6 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
console.log(e); console.log(e);
} }
})} })}
{editBox ? <EditItem lightMode={lightMode} tags={() => tags} onExit={exitEditing} SetLoader={SetLoader} reFetch={reFetch} item={data[editIndex]} /> : null}
</div> </div>
) )
} }

12
src/componets/SideBar.js
View File

@ -4,6 +4,14 @@ import '../styles/SideBar.css';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
const SideBar = ({ tags, handleToggleSidebar, toggle }) => { const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
const sortedTags = tags.sort((a, b) => {
const A = a.toLowerCase(), B = b.toLowerCase();
if (A < B)
return -1;
if (A > B)
return 1;
return 0;
});
return ( return (
<ProSidebar <ProSidebar
toggled={toggle} toggled={toggle}
@ -19,8 +27,8 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
<MenuItem><Link to="/"><h3>Show Everything</h3></Link></MenuItem> <MenuItem><Link to="/"><h3>Show Everything</h3></Link></MenuItem>
<SubMenu icon='#' defaultOpen={true} title='Tags'> <SubMenu icon='#' defaultOpen={true} title='Tags'>
{tags.map((e, i) => { {sortedTags.map((e, i) => {
const path = `/tags/${e}` const path = `/tags/${e}`;
return <MenuItem key={i}><Link to={path}>{e}</Link></MenuItem> return <MenuItem key={i}><Link to={path}>{e}</Link></MenuItem>
})} })}
</SubMenu> </SubMenu>

20
src/componets/Sort.js
View File

@ -14,15 +14,17 @@ const Sort = ({ sortBy, onExit }) => {
return ( return (
<> <>
<div className='sort-overlay' onClick={abort}></div> <div className='sort-overlay' onClick={abort}></div>
<fieldset className='sort' onClick={sort}> <div className='sort-box'>
<legend>Sort by</legend> <fieldset className='sort' onClick={sort}>
<button className='sort-by-btn' value='Default'>&#xf271; Date (Newest first)</button> <legend>Sort by</legend>
<button className='sort-by-btn' value='Date (Oldest first)'>&#xf272; Date (Oldest first)</button> <button className='sort-by-btn' value='Default'>&#xf271; Date (Newest first)</button>
<button className='sort-by-btn' value='Name (A-Z)'>&#xf15d; Name (A-Z)</button> <button className='sort-by-btn' value='Date (Oldest first)'>&#xf272; Date (Oldest first)</button>
<button className='sort-by-btn' value='Name (Z-A)'>&#xf15e; Name (Z-A)</button> <button className='sort-by-btn' value='Name (A-Z)'>&#xf15d; Name (A-Z)</button>
<button className='sort-by-btn' value='Title (A-Z)'>&#xf15d; Website title (A-Z)</button> <button className='sort-by-btn' value='Name (Z-A)'>&#xf15e; Name (Z-A)</button>
<button className='sort-by-btn' value='Title (Z-A)'>&#xf15e; Website title (Z-A)</button> <button className='sort-by-btn' value='Title (A-Z)'>&#xf15d; Website title (A-Z)</button>
</fieldset> <button className='sort-by-btn' value='Title (Z-A)'>&#xf15e; Website title (Z-A)</button>
</fieldset>
</div>
</> </>
) )
} }

4
src/componets/ViewArchived.js
View File

@ -7,9 +7,9 @@ const ViewArchived = ({ id }) => {
return ( return (
<div className='view-archived'> <div className='view-archived'>
<a href={screenshotPath} target='_blank' rel="noreferrer">Screenshot</a> <a className='link' href={screenshotPath} target='_blank' rel="noreferrer">Screenshot</a>
<hr className='seperator' /> <hr className='seperator' />
<a href={pdfPath} target='_blank' rel="noreferrer">PDF</a> <a className='link' href={pdfPath} target='_blank' rel="noreferrer">PDF</a>
</div> </div>
) )
} }

7
src/styles/Filters.css
View File

@ -23,6 +23,11 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100vw; width: 100vw;
z-index: 1;
}
.filter-box {
position: relative;
} }
.filter { .filter {
@ -35,11 +40,11 @@
flex-direction: column; flex-direction: column;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
padding: 5px; padding: 5px;
top: 15%;
position: absolute; position: absolute;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
z-index: 2;
} }
.filter legend { .filter legend {

14
src/styles/List.css
View File

@ -60,7 +60,7 @@
align-items: center; align-items: center;
} }
.list a { .link {
text-decoration: underline; text-decoration: underline;
} }
@ -106,20 +106,20 @@
flex-direction: column; flex-direction: column;
} }
.list a { .link {
white-space: nowrap; white-space: nowrap;
font-family: 'Font Awesome 5 Free'; font-family: 'Font Awesome 5 Free';
pointer-events: all; pointer-events: all;
font-size: 1rem; font-size: 1rem;
} }
.list a::after { .link::after {
content: " "; content: " ";
opacity: 0%; opacity: 0%;
transition: opacity 0.1s; transition: opacity 0.1s;
} }
.list a:hover::after { .link:hover::after {
opacity: 100%; opacity: 100%;
} }
@ -153,12 +153,12 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.tags div { .tags a {
margin-right: 10px; margin-right: 10px;
color: #2b8add;
} }
.tags div::before { .tags a::before {
color: rgb(42, 125, 172); color: rgb(42, 125, 172);
content: "# "; content: "# ";
} }

6
src/styles/SendItem.css
View File

@ -14,7 +14,6 @@
} }
} }
.add-overlay { .add-overlay {
animation: fadein 0.2s; animation: fadein 0.2s;
background-color: black; background-color: black;
@ -26,6 +25,10 @@
width: 100vw; width: 100vw;
} }
.send-box {
position: relative;
}
.box { .box {
animation: fadein 0.3s; animation: fadein 0.3s;
border: solid; border: solid;
@ -34,7 +37,6 @@
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 15%;
background-color: #1f2c38; background-color: #1f2c38;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;

11
src/styles/Sort.css
View File

@ -1,7 +1,7 @@
@media (min-width: 800px) { @media (min-width: 800px) {
.sort { .sort {
left: 35%; left: 30%;
right: 35%; right: 30%;
min-width: 200px; min-width: 200px;
} }
} }
@ -23,6 +23,11 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100vw; width: 100vw;
z-index: 1;
}
.sort-box {
position: relative;
} }
.sort { .sort {
@ -35,11 +40,11 @@
flex-direction: column; flex-direction: column;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
padding: 5px; padding: 5px;
top: 15%;
position: absolute; position: absolute;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
z-index: 2;
} }
.sort legend { .sort legend {

4
src/styles/index.css
View File

@ -58,7 +58,7 @@ body {
color: darkgray; color: darkgray;
} }
.list a { .link {
color: rgb(194, 193, 193); color: rgb(194, 193, 193);
} }
@ -130,7 +130,7 @@ body {
color: rgb(105, 105, 105); color: rgb(105, 105, 105);
} }
.light .list a { .light .link {
color: rgb(102, 102, 102); color: rgb(102, 102, 102);
} }