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'),
[loader, setLoader] = useState(false),
[lightMode, setLightMode] = useState(localStorage.getItem('light-mode') === 'true'),
[toggle, setToggle] = useState(true);
[toggle, setToggle] = useState(false);
function SetLoader(x) {
setLoader(x);

2
src/componets/AddItem.js
View File

@ -35,6 +35,7 @@ const AddItem = ({onExit, reFetch, tags, SetLoader, lightMode}) => {
return (
<>
<div className='add-overlay' onClick={abort}></div>
<div className='send-box'>
<fieldset className='box'>
<legend>New bookmark</legend>
<div className='AddItem-content'>
@ -47,6 +48,7 @@ const AddItem = ({onExit, reFetch, tags, SetLoader, lightMode}) => {
<button onClick={newItem} className="send-btn">Add &#xf067;</button>
</div>
</fieldset>
</div>
</>
)
}

4
src/componets/EditItem.js
View File

@ -38,11 +38,12 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch, lightMode }) => {
return (
<>
<div className='add-overlay' onClick={abort}></div>
<div className='send-box'>
<fieldset className='box'>
<legend >Edit bookmark</legend>
<button className="delete" onClick={deleteItem}>&#xf2ed;</button>
<div className='AddItem-content'>
<h3>Link: <a target="_blank" rel="noreferrer" href={item.link}>{url.hostname}</a></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>
@ -52,6 +53,7 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch, lightMode }) => {
<button onClick={EditItem} className="send-btn">Update &#xf303;</button>
</div>
</fieldset>
</div>
</>
)
}

2
src/componets/Filters.js
View File

@ -10,12 +10,14 @@ const Filters = ({nameChecked, handleNameCheckbox, descriptionChecked, handleDes
return (
<>
<div className='filter-overlay' onClick={abort}></div>
<div className='filter-box'>
<fieldset className='filter'>
<legend >Filter by</legend>
<label><input type="checkbox" checked={nameChecked} onChange={handleNameCheckbox} />Name</label>
<label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Website title</label>
<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 EditItem from './EditItem';
import { useState } from 'react'
import { Link } from "react-router-dom";
const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
const [editBox, setEditBox] = useState(false)
@ -19,6 +20,14 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
return (
<div className="list">
{editBox ? <EditItem
lightMode={lightMode}
tags={() => tags}
onExit={exitEditing}
SetLoader={SetLoader}
reFetch={reFetch}
item={data[editIndex]}
/> : null}
{/* eslint-disable-next-line */}
{data.map((e, i, array) => {
try {
@ -30,12 +39,22 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
<img alt='' src={favicon} />
<div className="list-entity-content">
<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 className='title'>{e.title}</div>
<div className="tags">
{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 className='date'>{new Date(e.date).toDateString()}</div>
@ -51,7 +70,6 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
console.log(e);
}
})}
{editBox ? <EditItem lightMode={lightMode} tags={() => tags} onExit={exitEditing} SetLoader={SetLoader} reFetch={reFetch} item={data[editIndex]} /> : null}
</div>
)
}

12
src/componets/SideBar.js
View File

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

2
src/componets/Sort.js
View File

@ -14,6 +14,7 @@ const Sort = ({ sortBy, onExit }) => {
return (
<>
<div className='sort-overlay' onClick={abort}></div>
<div className='sort-box'>
<fieldset className='sort' onClick={sort}>
<legend>Sort by</legend>
<button className='sort-by-btn' value='Default'>&#xf271; Date (Newest first)</button>
@ -23,6 +24,7 @@ const Sort = ({ sortBy, onExit }) => {
<button className='sort-by-btn' value='Title (A-Z)'>&#xf15d; Website title (A-Z)</button>
<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 (
<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' />
<a href={pdfPath} target='_blank' rel="noreferrer">PDF</a>
<a className='link' href={pdfPath} target='_blank' rel="noreferrer">PDF</a>
</div>
)
}

7
src/styles/Filters.css
View File

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

14
src/styles/List.css
View File

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

6
src/styles/SendItem.css
View File

@ -14,7 +14,6 @@
}
}
.add-overlay {
animation: fadein 0.2s;
background-color: black;
@ -26,6 +25,10 @@
width: 100vw;
}
.send-box {
position: relative;
}
.box {
animation: fadein 0.3s;
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;
position: absolute;
z-index: 2;
top: 15%;
background-color: #1f2c38;
overflow-x: hidden;
overflow-y: auto;

11
src/styles/Sort.css
View File

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

4
src/styles/index.css
View File

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