From 3b8f07a6b9801f804098058e599c2ce6c744a897 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 21 Jun 2022 09:40:19 +0430 Subject: [PATCH] Minor UI improvements. --- README.md | 4 ++-- api/Dockerfile | 2 +- api/server.js | 1 - src/App.js | 4 ++-- src/componets/Filters.js | 12 ++++++------ src/componets/SideBar.js | 9 ++++----- src/modules/sortList.js | 12 ++++++------ src/styles/App.css | 2 +- src/styles/List.css | 4 ++-- src/styles/SideBar.css | 17 +++++++++++++++++ 10 files changed, 41 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index ffaf867..f509bcb 100644 --- a/README.md +++ b/README.md @@ -42,11 +42,11 @@ The objective is to have a self-hosted place to keep useful links in one place, 2. Clone this repository. -4. [Optional] If you want to use this app across the network change `REACT_APP_API_HOST` in docker-compose.yml with the computer IP address. +4. [Optional] If you want to use this app across the network change `REACT_APP_API_HOST` in docker-compose.yml with the computer IP and port. 3. head to the main folder and run `docker compose up`. -### Manual Setup (Linux/MacOS) +### Manual Setup (Unstable for now.) 1. Make sure your MongoDB database and collection is up and running. diff --git a/api/Dockerfile b/api/Dockerfile index e1acea5..e949dff 100644 --- a/api/Dockerfile +++ b/api/Dockerfile @@ -19,7 +19,7 @@ RUN apk add --no-cache \ COPY . . RUN npm ci && mkdir -p /media -# The collowing command fails when attempting to chown the node_modules directory. +# The following command fails when attempting to chown the node_modules directory. # Running it in its own layer allows it to modify the volume. RUN chown -R node:node /home/node /media diff --git a/api/server.js b/api/server.js index b74c279..e836f75 100644 --- a/api/server.js +++ b/api/server.js @@ -153,4 +153,3 @@ app.listen(port, () => { console.log(`Success! running on port ${port}.`); client.connect(); }); - diff --git a/src/App.js b/src/App.js index 47e4626..a44d548 100644 --- a/src/App.js +++ b/src/App.js @@ -136,8 +136,6 @@ function App() {

{numberOfResults} Bookmarks found

) : null} - {numberOfResults === 0 ? : null} - {filterBox ? ( ) : null} + {numberOfResults === 0 ? : null} + {newBox ? ( { - + }> -

Show Everything

+

All

 #} + icon={

} suffix={{sortedTags.length}} - defaultOpen={true} - title="Tags" + title={

Tags

} > {sortedTags.map((e, i) => { const path = `/tags/${e}`; diff --git a/src/modules/sortList.js b/src/modules/sortList.js index 0c52c43..9722820 100644 --- a/src/modules/sortList.js +++ b/src/modules/sortList.js @@ -1,14 +1,14 @@ const sortList = (data, sortBy) => { let sortedData = data; - if (sortBy == 1) { + if (sortBy.toString() === '1') { sortedData.sort((a, b) => { return new Date(b.date) - new Date(a.date); }); - } else if (sortBy == 2) { + } else if (sortBy.toString() === '2') { sortedData.sort((a, b) => { return new Date(a.date) - new Date(b.date); }); - } else if (sortBy == 3) { + } else if (sortBy.toString() === '3') { sortedData.sort((a, b) => { const A = a.name.toLowerCase(), B = b.name.toLowerCase(); @@ -16,7 +16,7 @@ const sortList = (data, sortBy) => { if (A > B) return 1; return 0; }); - } else if (sortBy == 4) { + } else if (sortBy.toString() === '4') { sortedData.sort((a, b) => { const A = a.name.toLowerCase(), B = b.name.toLowerCase(); @@ -24,7 +24,7 @@ const sortList = (data, sortBy) => { if (A < B) return 1; return 0; }); - } else if (sortBy == 5) { + } else if (sortBy.toString() === '5') { sortedData.sort((a, b) => { const A = a.title.toLowerCase(), B = b.title.toLowerCase(); @@ -32,7 +32,7 @@ const sortList = (data, sortBy) => { if (A > B) return 1; return 0; }); - } else if (sortBy == 6) { + } else if (sortBy.toString() === '6') { sortedData.sort((a, b) => { const A = a.title.toLowerCase(), B = b.title.toLowerCase(); diff --git a/src/styles/App.css b/src/styles/App.css index 83d2460..246dafd 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -86,7 +86,7 @@ input:focus { } .results { - margin: 20px 20px 0px 5px; + margin: 20px 20px 0px 0px; display: inline-block; } diff --git a/src/styles/List.css b/src/styles/List.css index a0f6897..9544082 100644 --- a/src/styles/List.css +++ b/src/styles/List.css @@ -19,7 +19,7 @@ } .list-row { - margin-top: 20px; + margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; @@ -47,7 +47,7 @@ } .list-row { - margin-top: 20px; + margin-bottom: 20px; display: flex; flex-direction: column; justify-content: space-between; diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css index 42800e4..219396e 100644 --- a/src/styles/SideBar.css +++ b/src/styles/SideBar.css @@ -30,3 +30,20 @@ border-radius: 14px; background-color: rgb(52, 121, 181); } + +.sidebar-icon { + font-family: "Font Awesome 5 Free"; + font-size: 1rem; +} + +.menu-item { + color: rgb(255, 255, 255); +} + +.menu-item:hover { + color: rgb(255, 255, 255); +} + +.pro-inner-item { + margin-bottom: 10px; +} \ No newline at end of file