09035a71 · permissionBRICK/SillyTavern

public/index.html+2 -0 Viewed

                                                 <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>

public/scripts/textgen-models.js+6 -2 Viewed

     populateClassSelection(data);
     // Retrieve the stored number of items per page or default to 5
     const perPage = Number(localStorage.getItem(storageKey)) || 56;
     // Initialize pagination with the full set of models
     setupPagination(originalModels, perPage);

         paginationContainer.pagination({
             dataSource: models,
             pageSize: perPage,
             sizeChangerOptions: [56, 10, 2526, 50, 100, 250, 500, 1000],
             pageRange: 1,
             pageNumber: 1,
             showPageNumbers: true,

             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

public/style.css+7 -7 Viewed

     border-radius: 8px;  /* Rounded corners for the card */
     background-color: #222;  /* Card background color */
     color: #fff;  /* Text color */
     margin: 10px7px;  /* Space between cards */
     width: calc(100% - 20px7px);  /* 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.02502);  /* 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 #00fvar(--okGreen70a);  /* Add a blue border to indicate selection */
     background-color: #333var(--okGreen70a);  /* Slightly darker background for selected state */
+}
 /* Model title information */

     grid-template-columns: repeat(2, 1fr);
     display: flex;
     flex-wrap: wrap;  /* Cards wrap onto new lines when necessary */
     gap: 15px5px;  /* Space between grid items */
     justify-content: flex-start;  /* Align cards to the left */
+}

 #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; */
+}
 /* Ensure the search bar takes most of the width */

Added sort by date Added