From 751bd895ed307a0c79fa37f1552256010aafd7dc Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 16 Jun 2022 13:28:12 +0430 Subject: [PATCH] Clickable tags + Improvements. --- src/App.js | 2 +- src/componets/AddItem.js | 26 ++++++++++++++------------ src/componets/EditItem.js | 30 ++++++++++++++++-------------- src/componets/Filters.js | 14 ++++++++------ src/componets/List.js | 24 +++++++++++++++++++++--- src/componets/SideBar.js | 12 ++++++++++-- src/componets/Sort.js | 20 +++++++++++--------- src/componets/ViewArchived.js | 4 ++-- src/styles/Filters.css | 7 ++++++- src/styles/List.css | 14 +++++++------- src/styles/SendItem.css | 6 ++++-- src/styles/Sort.css | 11 ++++++++--- src/styles/index.css | 4 ++-- 13 files changed, 110 insertions(+), 64 deletions(-) diff --git a/src/App.js b/src/App.js index de4f994..c0cd014 100644 --- a/src/App.js +++ b/src/App.js @@ -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); diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js index 4687ba5..56136d4 100644 --- a/src/componets/AddItem.js +++ b/src/componets/AddItem.js @@ -35,18 +35,20 @@ const AddItem = ({onExit, reFetch, tags, SetLoader, lightMode}) => { return ( <>
-
- New bookmark -
-

* Link:

- -

Name: (Optional)

- -

Tags: (Optional)

- - -
-
+
+
+ New bookmark +
+

* Link:

+ +

Name: (Optional)

+ +

Tags: (Optional)

+ + +
+
+
) } diff --git a/src/componets/EditItem.js b/src/componets/EditItem.js index 4a1b11c..5878296 100644 --- a/src/componets/EditItem.js +++ b/src/componets/EditItem.js @@ -38,20 +38,22 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch, lightMode }) => { return ( <>
-
- Edit bookmark - -
-

Link: {url.hostname}

-

{item.title}

- -

Name: (Optional)

- -

Tags: (Optional)

- - -
-
+
+
+ Edit bookmark + +
+

Link: {url.hostname}

+

{item.title}

+ +

Name: (Optional)

+ +

Tags: (Optional)

+ + +
+
+
) } diff --git a/src/componets/Filters.js b/src/componets/Filters.js index 96c7b5d..1c496b1 100644 --- a/src/componets/Filters.js +++ b/src/componets/Filters.js @@ -10,12 +10,14 @@ const Filters = ({nameChecked, handleNameCheckbox, descriptionChecked, handleDes return ( <>
-
- Filter by - - - -
+
+
+ Filter by + + + +
+
) } diff --git a/src/componets/List.js b/src/componets/List.js index c408671..88a933b 100644 --- a/src/componets/List.js +++ b/src/componets/List.js @@ -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 (
+ {editBox ? 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}) => {
- {i + 1}. {e.name} ({url.hostname}) + {i + 1}. + {e.name} + + ({url.hostname}) +
{e.title}
{e.tag.map((e, i) => { - return (
{e}
) + const tagPath = `/tags/${e}`; + return ({e}) })}
{new Date(e.date).toDateString()}
@@ -51,7 +70,6 @@ const List = ({data, tags, reFetch, SetLoader, lightMode}) => { console.log(e); } })} - {editBox ? tags} onExit={exitEditing} SetLoader={SetLoader} reFetch={reFetch} item={data[editIndex]} /> : null}
) } diff --git a/src/componets/SideBar.js b/src/componets/SideBar.js index 35a2aae..012e1ca 100644 --- a/src/componets/SideBar.js +++ b/src/componets/SideBar.js @@ -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 ( {

Show Everything

 - {tags.map((e, i) => { - const path = `/tags/${e}` + {sortedTags.map((e, i) => { + const path = `/tags/${e}`; return {e} })} diff --git a/src/componets/Sort.js b/src/componets/Sort.js index 7c8be1b..f8e828e 100644 --- a/src/componets/Sort.js +++ b/src/componets/Sort.js @@ -14,15 +14,17 @@ const Sort = ({ sortBy, onExit }) => { return ( <>
-
- Sort by - - - - - - -
+
+
+ Sort by + + + + + + +
+
) } diff --git a/src/componets/ViewArchived.js b/src/componets/ViewArchived.js index d995e52..c64ab80 100644 --- a/src/componets/ViewArchived.js +++ b/src/componets/ViewArchived.js @@ -7,9 +7,9 @@ const ViewArchived = ({ id }) => { return (
- Screenshot + Screenshot
- PDF + PDF
) } diff --git a/src/styles/Filters.css b/src/styles/Filters.css index 916ea17..290b3f8 100644 --- a/src/styles/Filters.css +++ b/src/styles/Filters.css @@ -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 { diff --git a/src/styles/List.css b/src/styles/List.css index edba6ea..f95cd38 100644 --- a/src/styles/List.css +++ b/src/styles/List.css @@ -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: "# "; } diff --git a/src/styles/SendItem.css b/src/styles/SendItem.css index 158029c..ac13811 100644 --- a/src/styles/SendItem.css +++ b/src/styles/SendItem.css @@ -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; diff --git a/src/styles/Sort.css b/src/styles/Sort.css index 70bb939..a4a57d6 100644 --- a/src/styles/Sort.css +++ b/src/styles/Sort.css @@ -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 { diff --git a/src/styles/index.css b/src/styles/index.css index 5f4bd02..e6d1519 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -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); }