+
@@ -87,15 +87,15 @@
| # |
- Uzytkownik |
- Tytuł |
- Autor |
- Wydawca |
- Stron |
- Format |
- Ocena |
- ⚡ |
- Link |
+ Uzytkownik |
+ Tytuł |
+ Autor |
+ Wydawca |
+ Stron |
+ Format |
+ Ocena |
+ ⚡ |
+ Link |
@@ -117,7 +117,7 @@
|
|
|
- |
+ |
link
diff --git a/src/generated.css b/src/generated.css
index fb1ea1a..84ae070 100644
--- a/src/generated.css
+++ b/src/generated.css
@@ -583,29 +583,30 @@ video {
inset-inline-start: 0px;
}
+.m-2 {
+ margin: 0.5rem;
+}
+
.m-3 {
margin: 0.75rem;
}
-.mx-auto {
- margin-left: auto;
- margin-right: auto;
+.m-4 {
+ margin: 1rem;
}
-.my-2 {
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
-}
-
-.my-4 {
- margin-top: 1rem;
- margin-bottom: 1rem;
+.mr-2 {
+ margin-right: 0.5rem;
}
.block {
display: block;
}
+.inline-block {
+ display: inline-block;
+}
+
.inline {
display: inline;
}
@@ -622,18 +623,10 @@ video {
height: 1rem;
}
-.w-1 {
- width: 0.25rem;
-}
-
.w-12 {
width: 3rem;
}
-.w-2 {
- width: 0.5rem;
-}
-
.w-3 {
width: 0.75rem;
}
@@ -646,6 +639,22 @@ video {
width: 2rem;
}
+.w-\[12rem\] {
+ width: 12rem;
+}
+
+.w-\[4rem\] {
+ width: 4rem;
+}
+
+.w-\[5rem\] {
+ width: 5rem;
+}
+
+.w-\[7rem\] {
+ width: 7rem;
+}
+
.w-auto {
width: auto;
}
@@ -654,8 +663,20 @@ video {
width: 100%;
}
-.max-w-lg {
- max-width: 32rem;
+.max-w-md {
+ max-width: 28rem;
+}
+
+.max-w-xs {
+ max-width: 20rem;
+}
+
+.table-fixed {
+ table-layout: fixed;
+}
+
+.cursor-pointer {
+ cursor: pointer;
}
.items-center {
@@ -693,6 +714,11 @@ video {
padding: 0.625rem;
}
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
@@ -739,6 +765,11 @@ video {
line-height: 1.25rem;
}
+.text-blue-400 {
+ --tw-text-opacity: 1;
+ color: rgb(96 165 250 / var(--tw-text-opacity, 1));
+}
+
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
@@ -757,6 +788,11 @@ video {
display: none;
}
+.hover\:bg-gray-100:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
.focus\:outline:focus {
outline-style: solid;
}
@@ -767,4 +803,41 @@ video {
.peer:valid ~ .peer-valid\:visible {
visibility: visible;
+}
+
+@media (prefers-color-scheme: dark) {
+ .dark\:border-stone-700 {
+ --tw-border-opacity: 1;
+ border-color: rgb(68 64 60 / var(--tw-border-opacity, 1));
+ }
+
+ .dark\:border-stone-900 {
+ --tw-border-opacity: 1;
+ border-color: rgb(28 25 23 / var(--tw-border-opacity, 1));
+ }
+
+ .dark\:bg-stone-900 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
+ }
+
+ .dark\:bg-stone-950 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(12 10 9 / var(--tw-bg-opacity, 1));
+ }
+
+ .dark\:text-gray-100 {
+ --tw-text-opacity: 1;
+ color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+ }
+
+ .dark\:text-gray-300 {
+ --tw-text-opacity: 1;
+ color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+ }
+
+ .dark\:hover\:bg-stone-900:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
+ }
}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index a231965..6a0b38e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,14 +17,14 @@ Alpine.data('bookmeterList', function () {
nameFilter: '',
years: [2023, 2024, 2025],
year: this.$persist(['2025']).as('year-filter'),
- orderBy: [],
+ orderColumn: ['order', 1],
advancedSearch: this.$persist(0).as('advanced-search'),
async init() {
this.$watch('nameFilter', () => this.updateFilter());
- this.$watch('username', () => this.updateFilter());
- this.$watch('title', () => this.updateFilter());
- this.$watch('author', () => this.updateFilter());
- this.$watch('publisher', () => this.updateFilter());
+ // this.$watch('username', () => this.updateFilter());
+ // this.$watch('title', () => this.updateFilter());
+ // this.$watch('author', () => this.updateFilter());
+ // this.$watch('publisher', () => this.updateFilter());
this.$watch('year', () => this.updateFilter());
let qp = new URLSearchParams(window.location.search);
@@ -36,10 +36,14 @@ Alpine.data('bookmeterList', function () {
fetch('/posts_2023.json').then(res => res.json())
])
-
this.items = [...data1, ...data2, ...data3]
this.updateFilter();
},
+ orderBy(property) {
+ let direction = (this.orderColumn[0] === property) ? this.orderColumn[1] * -1 : 1;
+ this.orderColumn = [property, direction];
+ this.sort();
+ },
stats(){
return {
pages_total: this.filteredItems.reduce((a, b) => a + b.book.pages, 0) || '-',
@@ -54,11 +58,23 @@ Alpine.data('bookmeterList', function () {
}, {})
};
},
+ sort() {
+ let sortFunction = ({
+ username: (a,b) => ((a.username < b.username) ? -1 : (a.username > b.username) ? 1 : 0) * this.orderColumn[1],
+ title: (a,b) => ((a.book.title < b.book.title) ? -1 : (a.book.title > b.book.title) ? 1 : 0) * this.orderColumn[1],
+ author: (a,b) => ((a.book.author < b.book.author) ? -1 : (a.book.author > b.book.author) ? 1 : 0) * this.orderColumn[1],
+ publisher: (a,b) => ((a.book.publisher < b.book.publisher) ? -1 : (a.book.publisher > b.book.publisher) ? 1 : 0) * this.orderColumn[1],
+ pages: (a,b) => ((a.book.pages < b.book.pages) ? -1 : (a.book.pages > b.book.pages) ? 1 : 0) * this.orderColumn[1],
+ format: (a,b) => ((a.book.format < b.book.format) ? -1 : (a.book.format > b.book.format) ? 1 : 0) * this.orderColumn[1],
+ rating: (a,b) => ((a.book.rating < b.book.rating) ? -1 : (a.book.rating > b.book.rating) ? 1 : 0) * this.orderColumn[1],
+ likes: (a,b) => ((a.likes < b.likes) ? -1 : (a.likes > b.likes) ? 1 : 0) * this.orderColumn[1],
+ })[this.orderColumn[0]];
+ this.filteredItems = this.filteredItems.sort(sortFunction);
+ },
updateFilter(){
let filter = this.nameFilter.toLowerCase();
- this.filteredItems = this.items.filter(i => {
- return this.year.includes(i.created_at.substring(0,4))
- }).filter(i => {
+ this.filteredItems = this.items.filter(i => this.year.includes(i.created_at.substring(0,4)))
+ .filter(i => {
if(this.advancedSearch) {
return (
(!this.username || i.username.toLowerCase().includes(this.username.toLowerCase())) &&
@@ -73,6 +89,7 @@ Alpine.data('bookmeterList', function () {
return false;
}
});
+ this.sort();
this.updateURL();
},
|