egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaner code with prettier.

Browse Source
This commit is contained in:
Daniel
2022-06-16 13:43:44 +04:30
parent e2db7e71ac
commit 10d3a05c1d
32 changed files with 1021 additions and 754 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/App.css
+17 -10
View File
@@ -35,14 +35,16 @@
.search {
padding: 10px;
font-family: 'Font Awesome 5 Free';
font-family: "Font Awesome 5 Free";
font-size: 1.2rem;
padding-left: 10px;
border: none;
border-radius: 0;
-webkit-appearance: none;
-webkit-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;
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;
-webkit-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;
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;
}
.search:focus {
@@ -52,28 +54,32 @@
.btn {
position: relative;
border-radius: 100%;
font-family: 'Font Awesome 5 Free';
font-family: "Font Awesome 5 Free";
width: 40px;
height: 40px;
padding: 10px;
font-size: 1.1rem;
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;
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;
border: none;
transition: background-color 0.1s;
}
.btn:active { box-shadow: 0px 0px 10px rgb(83, 143, 255); }
.btn:active {
box-shadow: 0px 0px 10px rgb(83, 143, 255);
}
.add-btn {
margin-left: auto;
}
textarea:focus, input:focus{
textarea:focus,
input:focus {
outline: none;
}
.results {
.results {
margin: 20px 20px 0px 5px;
display: inline-block;
}
@@ -82,11 +88,12 @@ textarea:focus, input:focus{
text-align: center;
padding-top: 5%;
padding-bottom: 5%;
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;
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;
}
.dark-light-btn {
margin-left: 10px;
font-size: 1.2em;
}
}
src/styles/Filters.css
+52 -48
View File
@@ -1,73 +1,77 @@
@media (min-width: 800px) {
.filter {
left: 35%;
right: 35%;
min-width: 200px;
}
.filter {
left: 35%;
right: 35%;
min-width: 200px;
}
}
@media (max-width: 800px) {
.filter {
left: 20%;
right: 20%;
min-width: 100px;
}
.filter {
left: 20%;
right: 20%;
min-width: 100px;
}
}
.filter-overlay {
animation: fadein 0.2s;
background-color: black;
opacity: 10%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
z-index: 1;
animation: fadein 0.2s;
background-color: black;
opacity: 10%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
z-index: 1;
}
.filter-box {
position: relative;
position: relative;
}
.filter {
animation: fadein 0.3s;
border: solid;
border-width: 1px;
font-weight: 300;
border-color: rgb(141, 141, 141);
display: flex;
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;
position: absolute;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
z-index: 2;
animation: fadein 0.3s;
border: solid;
border-width: 1px;
font-weight: 300;
border-color: rgb(141, 141, 141);
display: flex;
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;
position: absolute;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
z-index: 2;
}
.filter legend {
font-weight: 600;
font-weight: 600;
}
.filter > label {
margin: 5px;
text-align: left;
margin-bottom: 5px;
font-family: 'Font Awesome 5 Free';
padding: 10px;
font-size: 1.1rem;
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;
border: none;
margin: 5px;
text-align: left;
margin-bottom: 5px;
font-family: "Font Awesome 5 Free";
padding: 10px;
font-size: 1.1rem;
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;
border: none;
}
.filter label:active {
box-shadow: 0px 0px 10px rgb(83, 143, 255);
box-shadow: 0px 0px 10px rgb(83, 143, 255);
}
@keyframes fadein {
from { opacity: 0%; }
to { }
}
from {
opacity: 0%;
}
to {
}
}
src/styles/List.css
+13 -9
View File
@@ -23,7 +23,9 @@
display: flex;
justify-content: space-between;
align-items: center;
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;
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;
}
.list a {
@@ -39,7 +41,7 @@
.tags {
margin: 10px auto 10px auto;
}
.list-row {
margin-top: 20px;
display: flex;
@@ -47,7 +49,9 @@
justify-content: space-between;
align-items: center;
text-align: center;
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;
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;
}
.etc {
display: flex;
@@ -108,7 +112,7 @@
.link {
white-space: nowrap;
font-family: 'Font Awesome 5 Free';
font-family: "Font Awesome 5 Free";
pointer-events: all;
font-size: 1rem;
}
@@ -123,7 +127,6 @@
opacity: 100%;
}
.edit-btn {
margin: 20px 20px 20px 0px;
width: 50px;
@@ -169,21 +172,22 @@
.delete {
margin: 20px 20px 20px 0px;
background-color:#273949;
background-color: #273949;
float: right;
font-size: 1.1rem;
width: 40px;
height: 40px;
position: relative;
border-radius: 100%;
font-family: 'Font Awesome 5 Free';
font-family: "Font Awesome 5 Free";
width: 40px;
height: 40px;
padding: 10px;
font-size: 1.1rem;
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;
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;
border: none;
transition: background-color 0.1s;
}
src/styles/Loader.css
+6 -6
View File
@@ -1,7 +1,7 @@
.loader {
position: fixed;
bottom: 10%;
left: 30%;
right: 30%;
text-align: center;
}
position: fixed;
bottom: 10%;
left: 30%;
right: 30%;
text-align: center;
}
src/styles/SendItem.css
+69 -61
View File
@@ -1,103 +1,111 @@
@media (min-width: 800px) {
.box {
left: 30%;
right: 30%;
min-width: 300px;
}
.box {
left: 30%;
right: 30%;
min-width: 300px;
}
}
@media (max-width: 800px) {
.box {
left: 15%;
right: 15%;
min-width: 200px;
}
.box {
left: 15%;
right: 15%;
min-width: 200px;
}
}
.add-overlay {
animation: fadein 0.2s;
background-color: black;
opacity: 10%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
animation: fadein 0.2s;
background-color: black;
opacity: 10%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
}
.send-box {
position: relative;
position: relative;
}
.box {
animation: fadein 0.3s;
border: solid;
border-width: 1px;
border-color: rgb(141, 141, 141);
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;
background-color: #1f2c38;
overflow-x: hidden;
overflow-y: auto;
animation: fadein 0.3s;
border: solid;
border-width: 1px;
border-color: rgb(141, 141, 141);
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;
background-color: #1f2c38;
overflow-x: hidden;
overflow-y: auto;
}
.box legend {
font-weight: 600;
font-weight: 600;
}
.box h3 {
font-weight: 300;
font-weight: 300;
}
.AddItem-content {
padding: 20px;
padding: 20px;
}
.AddItem-input {
font-size: 1rem;
padding: 10px;
border: none;
width: 100%;
color: white;
background-color:#273949;
border-radius: 0;
-webkit-appearance: none;
-webkit-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;
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;
font-size: 1rem;
padding: 10px;
border: none;
width: 100%;
color: white;
background-color: #273949;
border-radius: 0;
-webkit-appearance: none;
-webkit-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;
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;
}
.AddItem-input:focus {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.send-btn {
font-family: 'Font Awesome 5 Free';
font-size: 1.2rem;
padding: 10px;
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;
border: none;
margin-top: 20px;
display: block;
margin-left: auto;
margin-right: auto;
transition: background-color 0.1s;
font-family: "Font Awesome 5 Free";
font-size: 1.2rem;
padding: 10px;
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;
border: none;
margin-top: 20px;
display: block;
margin-left: auto;
margin-right: auto;
transition: background-color 0.1s;
}
.send-btn:active { box-shadow: 0px 0px 10px rgb(83, 143, 255); }
.send-btn:active {
box-shadow: 0px 0px 10px rgb(83, 143, 255);
}
@keyframes fadein {
from { opacity: 0%; }
to { }
from {
opacity: 0%;
}
to {
}
}
.optional {
color: gray;
font-size: 0.8em;
float: right;
color: gray;
font-size: 0.8em;
float: right;
}
.title {
font-size: 0.9em;
font-size: 0.9em;
}
src/styles/SideBar.css
+14 -14
View File
@@ -1,27 +1,27 @@
.sidebar {
height: 100vh;
position: fixed;
border-right: solid;
border-width: 1px;
border-color: gray;
height: 100vh;
position: fixed;
border-right: solid;
border-width: 1px;
border-color: gray;
}
.sidebar h1 {
text-align: center;
text-align: center;
}
.credits {
text-align: center;
font-size: small;
text-align: center;
font-size: small;
}
.credits a {
color: inherit;
text-decoration: underline;
color: inherit;
text-decoration: underline;
}
.pro-sidebar-layout {
background: #384952;
text-shadow: none;
color: white;
}
background: #384952;
text-shadow: none;
color: white;
}
src/styles/Sort.css
+52 -48
View File
@@ -1,73 +1,77 @@
@media (min-width: 800px) {
.sort {
left: 30%;
right: 30%;
min-width: 200px;
}
.sort {
left: 30%;
right: 30%;
min-width: 200px;
}
}
@media (max-width: 800px) {
.sort {
left: 20%;
right: 20%;
min-width: 100px;
}
.sort {
left: 20%;
right: 20%;
min-width: 100px;
}
}
.sort-overlay {
animation: fadein 0.2s;
background-color: black;
opacity: 10%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
z-index: 1;
animation: fadein 0.2s;
background-color: black;
opacity: 10%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
z-index: 1;
}
.sort-box {
position: relative;
position: relative;
}
.sort {
animation: fadein 0.3s;
border: solid;
border-width: 1px;
font-weight: 300;
border-color: rgb(141, 141, 141);
display: flex;
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;
position: absolute;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
z-index: 2;
animation: fadein 0.3s;
border: solid;
border-width: 1px;
font-weight: 300;
border-color: rgb(141, 141, 141);
display: flex;
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;
position: absolute;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
z-index: 2;
}
.sort legend {
font-weight: 600;
font-weight: 600;
}
.sort-by-btn {
margin: 5px;
text-align: left;
font-family: 'Font Awesome 5 Free';
padding: 10px;
font-size: 1.1rem;
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;
border: none;
transition: background-color 0.1s;
margin: 5px;
text-align: left;
font-family: "Font Awesome 5 Free";
padding: 10px;
font-size: 1.1rem;
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;
border: none;
transition: background-color 0.1s;
}
.sort-by-btn:active {
box-shadow: 0px 0px 10px rgb(83, 143, 255);
box-shadow: 0px 0px 10px rgb(83, 143, 255);
}
@keyframes fadein {
from { opacity: 0%; }
to { }
}
from {
opacity: 0%;
}
to {
}
}
src/styles/ViewArchived.css
+6 -6
View File
@@ -1,10 +1,10 @@
.view-archived {
display: flex;
flex-direction: column;
text-align: left;
display: flex;
flex-direction: column;
text-align: left;
}
.seperator {
width: 100%;
color: #1f2c38;
}
width: 100%;
color: #1f2c38;
}
src/styles/index.css
+28 -21
View File
@@ -1,7 +1,7 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -20,7 +20,7 @@ body {
/* Dark Mode settings (Default) */
.dark-light-btn::before {
content: '';
content: "";
}
.delete {
@@ -30,10 +30,10 @@ body {
.no-results {
background-color: #1f2c38;
}
}
.send-btn {
background-color:#273949;
background-color: #273949;
color: #ffffffb6;
}
@@ -42,11 +42,13 @@ body {
}
.sort-by-btn {
background-color:#273949;
color: #ffffffb6;
background-color: #273949;
color: #ffffffb6;
}
.btn:hover, .sort-by-btn:hover, .send-btn:hover {
.btn:hover,
.sort-by-btn:hover,
.send-btn:hover {
background-color: rgb(76, 117, 170);
}
@@ -64,21 +66,22 @@ body {
.btn {
color: #ffffffb6;
background-color:#273949;
background-color: #273949;
}
.edit-btn {
background-color: #1f2c38;
}
.no-results, .list-row {
.no-results,
.list-row {
transition: background-color 0.1s;
background-color:#273949;
background-color: #273949;
}
.search {
transition: background-color 0.1s;
background-color:#273949;
background-color: #273949;
color: white;
}
@@ -87,19 +90,19 @@ body {
}
.filter > label {
background-color:#273949;
background-color: #273949;
color: #ffffffb6;
}
/* Light Mode settings */
.light .dark-light-btn::before {
content: '';
content: "";
}
.light {
text-shadow: 0px 1px 2px #ffffff;
background-color:rgb(233, 220, 179);
background-color: rgb(233, 220, 179);
color: rgb(64, 64, 64);
}
@@ -122,8 +125,9 @@ body {
color: black;
}
.light .box, .light .edit-btn {
background-color:rgb(233, 220, 179);
.light .box,
.light .edit-btn {
background-color: rgb(233, 220, 179);
}
.light .title {
@@ -138,7 +142,8 @@ body {
color: rgb(9, 139, 214);
}
.light .filter, .light .sort {
.light .filter,
.light .sort {
background-color: rgb(233, 220, 179);
}
@@ -148,7 +153,7 @@ body {
}
.light .sort-by-btn {
background-color:lightyellow;
background-color: lightyellow;
color: #4b4b4bb6;
}
@@ -157,11 +162,13 @@ body {
color: #717171b6;
}
.light .sort-by-btn:hover, .light .btn:hover, .light .send-btn:hover {
.light .sort-by-btn:hover,
.light .btn:hover,
.light .send-btn:hover {
background-color: rgb(55, 131, 237);
color: #d8d8d8;
}
.light .no-results {
background-color: lightyellow;
}
}