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-06-26 00:08:37 +04:30
parent f5b7f872f0
commit 371eb3c181
12 changed files with 73 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/server.js
View File

@ -97,7 +97,7 @@ app.delete("/api", async (req, res) => {
await deleteDoc(id);
res.send(`Bookmark with _id:${id} deleted.`);
res.send(`Link with _id:${id} deleted.`);
});
async function updateDoc(id, updatedListing) {

4
public/manifest.json
View File

@ -1,6 +1,6 @@
{
"short_name": "Web Marker",
"name": "A bookmark manager",
"short_name": "LinkWarden",
"name": "LinkWarden",
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",

16
src/App.js
View File

@ -22,6 +22,7 @@ function App() {
[filterCheckbox, setFilterCheckbox] = useState([true, true, true]),
[sortBy, setSortBy] = useState(1),
[loader, setLoader] = useState(false),
[path, setPath] = useState("/"),
[lightMode, setLightMode] = useState(
localStorage.getItem("light-mode") === "true"
),
@ -55,6 +56,11 @@ function App() {
setToggle(!toggle);
}
function SetPath(pathname) {
setPath(pathname);
console.log(path)
}
const filteredData = filter(data, searchQuery, filterCheckbox);
async function fetchData() {
@ -71,6 +77,11 @@ function App() {
// eslint-disable-next-line
}, [sortBy, filterCheckbox]);
useEffect(() => {
const currentURL = new URL(window.location.href);
SetPath(currentURL.pathname);
})
useEffect(() => {
fetchData();
// eslint-disable-next-line
@ -107,7 +118,7 @@ function App() {
<input
className="search"
type="search"
placeholder="&#xf002; Search"
placeholder={` Search "${path}"`}
onChange={search}
/>
@ -159,6 +170,7 @@ function App() {
element={
<div className="content">
<List
SetPath={() => SetPath()}
lightMode={lightMode}
SetLoader={SetLoader}
data={filteredData}
@ -174,6 +186,7 @@ function App() {
path="tags/:tagId"
element={
<Tags
SetPath={() => SetPath()}
lightMode={lightMode}
SetLoader={SetLoader}
data={filteredData}
@ -188,6 +201,7 @@ function App() {
path="collections/:collectionId"
element={
<Collections
SetPath={() => SetPath()}
lightMode={lightMode}
SetLoader={SetLoader}
data={filteredData}

2
src/componets/AddItem.js
View File

@ -49,7 +49,7 @@ const AddItem = ({
<div className="add-overlay" onClick={abort}></div>
<div className="send-box">
<div className="box">
<h2>New bookmark</h2>
<h2>New Link</h2>
<div className="AddItem-content">
<h3>
<span style={{ color: "red" }}>* </span>Link:

2
src/componets/EditItem.js
View File

@ -66,7 +66,7 @@ const EditItem = ({
<div className="send-box">
<div className="box">
<div className="title-delete-group">
<h2 className="edit-title">Edit bookmark</h2>
<h2 className="edit-title">Edit Link</h2>
<button className="delete" onClick={deleteItem}>
&#xf2ed;
</button>

4
src/componets/Filters.js
View File

@ -33,11 +33,11 @@ const Filters = ({
<div className="filter-overlay" onClick={abort}></div>
<div className="filter-box">
<div className="filter">
<h2>Filter search</h2>
<h2>Filter Results</h2>
<div className="filter-groups">
<div className="section">
<h3>Sort by</h3>
<h3>Sort By</h3>
<label>
<input
name="sort"

22
src/componets/List.js
View File

@ -6,11 +6,16 @@ import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import NoResults from "./NoResults";
const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
const List = ({ SetPath, data, tags, collections, reFetch, SetLoader, lightMode }) => {
const [editBox, setEditBox] = useState(false),
[editIndex, setEditIndex] = useState(0),
[numberOfResults, setNumberOfResults] = useState(0);
useEffect(() => {
const currentURL = new URL(window.location.href);
SetPath(currentURL.pathname);
})
function edit(index) {
setEditBox(true);
setEditIndex(index);
@ -24,10 +29,15 @@ const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
setNumberOfResults(data.length);
}, [data]);
let currentPATH = new URL(window.location.href).pathname
return (
<div className="list">
{numberOfResults > 0 ? (
<p className="results">{numberOfResults} Bookmarks found.</p>
<p>
{currentPATH === "/" ? null : <Link className="btn return-btn" to="/">Return to main page</Link>} {numberOfResults} {numberOfResults === 1 ? "Link " : "Links "}
found.
</p>
) : null}
{numberOfResults === 0 ? <NoResults /> : null}
@ -43,7 +53,7 @@ const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
item={data[editIndex]}
/>
) : null}
{/* eslint-disable-next-line */}
{data.map((e, i, array) => {
try {
@ -74,6 +84,9 @@ const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
{e.collection}
</Link>
</div>
<div className="date">
{new Date(e.date).toDateString()}
</div>
<div className="tags">
{e.tag.map((e, i) => {
const tagPath = `/tags/${e}`;
@ -84,9 +97,6 @@ const List = ({ data, tags, collections, reFetch, SetLoader, lightMode }) => {
);
})}
</div>
<div className="date">
{new Date(e.date).toDateString()}
</div>
</div>
</div>
<div className="etc">

3
src/routes/Collections.js
View File

@ -1,7 +1,7 @@
import { useParams } from "react-router-dom";
import List from "../componets/List";
const Collections = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
const Collections = ({ SetPath, data, tags, collections, SetLoader, lightMode, reFetch }) => {
const { collectionId } = useParams();
const dataWithMatchingTag = data.filter((e) => {
return e.collection.includes(collectionId);
@ -10,6 +10,7 @@ const Collections = ({ data, tags, collections, SetLoader, lightMode, reFetch })
return (
<div className="content">
<List
SetPath={() => SetPath()}
lightMode={lightMode}
data={dataWithMatchingTag}
tags={tags}

3
src/routes/Tags.js
View File

@ -1,7 +1,7 @@
import { useParams } from "react-router-dom";
import List from "../componets/List";
const Tags = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
const Tags = ({ SetPath, data, tags, collections, SetLoader, lightMode, reFetch }) => {
const { tagId } = useParams();
const dataWithMatchingTag = data.filter((e) => {
return e.tag.includes(tagId);
@ -10,6 +10,7 @@ const Tags = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
return (
<div className="content">
<List
SetPath={() => SetPath()}
lightMode={lightMode}
data={dataWithMatchingTag}
tags={tags}

6
src/styles/App.css
View File

@ -2,6 +2,7 @@
.search {
width: 35%;
min-width: 300px;
font-size: 1rem;
}
}
@ -14,6 +15,8 @@
@media (width <= 400px) {
.search {
width: 120px;
font-size: 0.6rem;
font-weight: 600;
}
}
@ -43,7 +46,6 @@
.search {
padding: 10px;
font-family: "Font Awesome 5 Free";
font-size: 1.2rem;
padding-left: 10px;
border: none;
border-radius: 0;
@ -93,4 +95,4 @@ input:focus {
.select {
font-family: "Font Awesome 5 Free"
}
}

41
src/styles/List.css
View File

@ -28,10 +28,6 @@
rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.list a {
text-decoration: none;
}
.list-row:hover img {
opacity: 90%;
}
@ -44,6 +40,7 @@
.tags {
margin: 10px auto 10px auto;
justify-content: center;
}
.list-row {
@ -68,10 +65,6 @@
align-items: center;
}
.link {
text-decoration: underline;
}
.date {
margin-left: auto;
}
@ -110,6 +103,10 @@
flex-direction: column;
}
.list a {
text-decoration: none;
}
.link {
white-space: nowrap;
font-family: "Font Awesome 5 Free";
@ -151,19 +148,24 @@
display: flex;
border-width: 1px;
width: fit-content;
font-size: 1rem;
font-size: 0.8rem;
border-radius: 5px;
flex-wrap: wrap;
}
.tags a {
margin-right: 10px;
color: #2b8add;
text-decoration: none;
padding: 10px;
background-color:rgb(49, 114, 204);
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;
text-shadow: none;
margin: 5px;
color: #ffffff;
}
.tags a::before {
color: rgb(42, 125, 172);
color: rgb(0, 162, 255);
content: "# ";
}
@ -202,6 +204,7 @@
font-size: 0.7rem;
opacity: 80%;
margin-right: auto;
margin-top: 10px;
}
.no-results {
@ -231,5 +234,15 @@
}
.list-collection-label a {
color: inherit;
color: rgb(166, 166, 166);
text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
}
.return-btn {
border-radius: 10px;
padding: 5px;
font-size: small;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin-right: 5px;
text-shadow: none;
}

8
src/styles/index.css
View File

@ -39,10 +39,6 @@ body {
background-color: rgb(76, 117, 170);
}
.tags div {
color: rgb(126, 208, 255);
}
.title {
color: white;
}
@ -120,10 +116,6 @@ body {
color: rgb(102, 102, 102);
}
.light .tags div {
color: rgb(9, 139, 214);
}
.light .filter {
background-color: rgb(233, 220, 179);
}