mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
Added sort by date Added
This commit is contained in:
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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 */
|
||||
|
Reference in New Issue
Block a user