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

Bug fix + UI improvements.

This commit is contained in:
Daniel 2022-06-24 00:57:23 +04:30
parent 73173a603e
commit 9328654489
9 changed files with 76 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
package-lock.json generated
View File

@ -20,6 +20,7 @@
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"react-select": "^5.3.2",
"sass": "^1.53.0",
"web-vitals": "^2.1.4"
}
},
@ -8448,6 +8449,11 @@
"url": "https://opencollective.com/immer"
}
},
"node_modules/immutable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -14030,6 +14036,22 @@
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
},
"node_modules/sass": {
"version": "1.53.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
"integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/sass-loader": {
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@ -22432,6 +22454,11 @@
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz",
"integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA=="
},
"immutable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
"integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
},
"import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -26292,6 +26319,16 @@
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
},
"sass": {
"version": "1.53.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
"integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
"requires": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
}
},
"sass-loader": {
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"react-select": "^5.3.2",
"sass": "^1.53.0",
"web-vitals": "^2.1.4"
},
"scripts": {

4
src/componets/EditItem.js
View File

@ -64,10 +64,12 @@ const EditItem = ({
<div className="add-overlay" onClick={abort}></div>
<div className="send-box">
<div className="box">
<h2>Edit bookmark</h2>
<div className="title-delete-group">
<h2 className="edit-title">Edit bookmark</h2>
<button className="delete" onClick={deleteItem}>
&#xf2ed;
</button>
</div>
<div className="AddItem-content">
<h3>
Link:{" "}

16
src/componets/SideBar.js
View File

@ -7,7 +7,8 @@ import {
MenuItem,
SubMenu,
} from "react-pro-sidebar";
import "react-pro-sidebar/dist/css/styles.css";
// import "react-pro-sidebar/dist/css/styles.css";
import "../styles/SideBar_S.scss";
import "../styles/SideBar.css";
import { Link } from "react-router-dom";
@ -44,20 +45,23 @@ const SideBar = ({ tags, collections, handleToggleSidebar, toggle }) => {
</SidebarHeader>
<SidebarContent className="sidebar-content">
<Menu iconShape="circle">
<MenuItem icon={<h2 className="sidebar-icon">&#xf015;</h2>}>
<MenuItem icon={<h2 className="sidebar-icon">&#xf49e;</h2>}>
<Link to="/">
<div className="menu-item">All</div>
</Link>
</MenuItem>
<MenuItem icon={<h2 className="sidebar-icon">&#xf01c;</h2>}>
<Link to="/collections/Unsorted">
<div className="menu-item">Unsorted</div>
</Link>
</MenuItem>
<SubMenu
icon={<h2 className="sidebar-icon">&#xf5fd;</h2>}
suffix={<span className="badge">{sortedCollections.length + 1}</span>}
suffix={<span className="badge">{sortedCollections.length}</span>}
title={<div className="menu-item">Collections</div>}
>
<MenuItem prefix={<div className="sidebar-item-prefix">&#xf07b;</div>}>
<Link className="sidebar-entity" to="/collections/Unsorted">Unsorted</Link>
</MenuItem>
{sortedCollections.map((e, i) => {
const path = `/collections/${e}`;
return (

4
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, lists, SetLoader, lightMode, reFetch }) => {
const Tags = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
const { tagId } = useParams();
const dataWithMatchingTag = data.filter((e) => {
return e.tag.includes(tagId);
@ -13,7 +13,7 @@ const Tags = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => {
lightMode={lightMode}
data={dataWithMatchingTag}
tags={tags}
lists={lists}
collections={collections}
SetLoader={SetLoader}
reFetch={reFetch}
/>

24
src/styles/List.css
View File

@ -172,9 +172,9 @@
}
.delete {
margin: 20px 20px 20px 0px;
background-color: #273949;
float: right;
margin-top: 20px;
margin-left: 10px;
display: inline;
font-size: 1.1rem;
width: 40px;
height: 40px;
@ -188,17 +188,13 @@
cursor: pointer;
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;
background-color: #273949;
background-color: rgba(255, 75, 75, 0.8);
color: white;
border: none;
transition: background-color 0.1s;
transition: box-shadow 0.1s;
}
.delete:hover {
background-color: rgba(255, 75, 75, 0.8);
color: #d8d8d8;
}
.delete:active {
box-shadow: 0px 0px 10px rgb(255, 83, 140);
}
@ -216,4 +212,12 @@
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;
margin-top: 10px;
}
.edit-title {
display: inline;
}
.title-delete-group {
text-align: center;
}

12
src/styles/SideBar.css
View File

@ -17,18 +17,11 @@
text-decoration: underline;
}
.pro-sidebar-layout {
background: #384952;
text-shadow: none;
color: white;
}
.badge {
padding: 3px 10px;
font-size: 0.8rem;
letter-spacing: 1px;
border-radius: 14px;
background-color: rgb(52, 121, 181);
}
.sidebar-icon {
@ -55,3 +48,8 @@
.sidebar-item-prefix {
font-family: "Font Awesome 5 Free";
}
.pro-sidebar-layout * {
color: white;
text-shadow: none;
}

4
src/styles/SideBar_S.scss Normal file
View File

@ -0,0 +1,4 @@
$sidebar-bg-color: #373737;
$submenu-bg-color: #373737;
@import '~react-pro-sidebar/dist/scss/styles.scss';

10
src/styles/index.css
View File

@ -23,11 +23,6 @@ body {
content: "";
}
.delete {
background-color: #1f2c38;
color: #ffffffb6;
}
.no-results {
background-color: #1f2c38;
}
@ -111,11 +106,6 @@ body {
color: gray;
}
.light .delete {
background-color: lightyellow;
color: rgb(176, 176, 176);
}
.light input {
background-color: lightyellow;
color: black;