Added sort by date Added

This commit is contained in:
DarokCx
2024-10-07 10:02:11 -04:00
parent fa52fb4ae6
commit 09035a71dc
3 changed files with 15 additions and 9 deletions

View File

@ -2273,6 +2273,8 @@
<option value="search" data-i18n="Search" hidden>A-Z</option>
<option value="asc">A-Z</option>
<option value="desc">Z-A</option>
<option value="date_asc">Date Asc</option>
<option value="date_desc">Date Desc</option>
</select>
<select id="category_selection">
<option value="" disabled selected data-i18n="category">category</option>

View File

@ -293,7 +293,7 @@ export async function loadFeatherlessModels(data) {
populateClassSelection(data);
// Retrieve the stored number of items per page or default to 5
const perPage = Number(localStorage.getItem(storageKey)) || 5;
const perPage = Number(localStorage.getItem(storageKey)) || 6;
// Initialize pagination with the full set of models
setupPagination(originalModels, perPage);
@ -303,7 +303,7 @@ export async function loadFeatherlessModels(data) {
paginationContainer.pagination({
dataSource: models,
pageSize: perPage,
sizeChangerOptions: [5, 10, 25, 50, 100, 250, 500, 1000],
sizeChangerOptions: [6, 10, 26, 50, 100, 250, 500, 1000],
pageRange: 1,
pageNumber: 1,
showPageNumbers: true,
@ -450,6 +450,10 @@ export async function loadFeatherlessModels(data) {
filteredModels.sort((a, b) => a.id.localeCompare(b.id));
} else if (selectedSortOrder === 'desc') {
filteredModels.sort((a, b) => b.id.localeCompare(a.id));
} else if (selectedSortOrder === 'date_asc') {
filteredModels.sort((a, b) => a.updated_at.localeCompare(b.updated_at));
} else if (selectedSortOrder === 'date_desc') {
filteredModels.sort((a, b) => b.updated_at.localeCompare(a.updated_at));
}
// Reinitialize pagination with the filtered and sorted models

View File

@ -5495,22 +5495,22 @@ body:not(.movingUI) .drawer-content.maximized {
border-radius: 8px; /* Rounded corners for the card */
background-color: #222; /* Card background color */
color: #fff; /* Text color */
margin: 10px; /* Space between cards */
width: calc(100% - 20px); /* Full width minus margin */
margin: 7px; /* Space between cards */
width: calc(100% - 7px); /* Full width minus margin */
box-sizing: border-box; /* Include padding and border in the width */
transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
}
.model-card:hover {
transform: scale(1.025); /* Grow the card slightly on hover */
transform: scale(1.02); /* Grow the card slightly on hover */
background-color: #444; /* Highlight background on hover */
transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition */
}
/* Highlight the selected model card */
.model-card.selected {
border: 2px solid #00f; /* Add a blue border to indicate selection */
background-color: #333; /* Slightly darker background for selected state */
border: 2px solid var(--okGreen70a); /* Add a blue border to indicate selection */
background-color: var(--okGreen70a); /* Slightly darker background for selected state */
}
/* Model title information */
@ -5550,7 +5550,7 @@ body:not(.movingUI) .drawer-content.maximized {
grid-template-columns: repeat(2, 1fr);
display: flex;
flex-wrap: wrap; /* Cards wrap onto new lines when necessary */
gap: 15px; /* Space between grid items */
gap: 5px; /* Space between grid items */
justify-content: flex-start; /* Align cards to the left */
}
@ -5558,7 +5558,7 @@ body:not(.movingUI) .drawer-content.maximized {
#model_card_block.grid-view .model-card {
flex-direction: column; /* Stack title, class, and context length vertically for grid */
flex: 1 1 calc(50% - 30px); /* 3 cards per row with spacing */
margin-bottom: 10px;
/* margin-bottom: 10px; */
}
/* Ensure the search bar takes most of the width */