rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Featherless: More specifity for selectors

This commit is contained in:
Cohee 2024-10-09 22:14:49 +03:00
parent f436000a9d
commit 4bdaca5f8e
3 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/index.html
View File

@ -2261,33 +2261,32 @@
For privacy reasons, your API key will be hidden after you reload the page.
</div>
<hr>
<h4 data-i18n="Featherless Model">Featherless Model Selection</h4>
<div id="Model-management-block" class="flex-container wide100p flexGap10">
<h4 data-i18n="Featherless Model Selection">Featherless Model Selection</h4>
<div class="flex-container wide100p flexGap10">
<div class="flex1 overflowHidden wide100p">
<div class="flex-container marginBot10 alignitemscenter">
<input id="model_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search...">
<select id="model_sort_order" class="margin0">
<input id="featherless_model_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search...">
<select id="featherless_model_sort_order" class="margin0 text_pole">
<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">
<select id="featherless_category_selection" class="text_pole">
<option value="" disabled selected data-i18n="category">category</option>
<!-- <option value="Favorite" data-i18n="Top">Favorite</option> -->
<option value="Top" data-i18n="Top">Top</option>
<option value="New" data-i18n="New">New</option>
<option value="All" data-i18n="All">All</option>
</select>
<select id="class_selection">
<select id="featherless_class_selection" class="text_pole">
<option value="" selected data-i18n="class">All Classes</option>
</select>
<div id="model_pagination_container" class="flex1"></div>
<i id="model_grid_toggle" class="fa-solid fa-table-cells-large menu_button" data-i18n="[title]Toggle grid view" title="Toggle grid view"></i>
<div id="featherless_model_pagination_container" class="flex1"></div>
<i id="featherless_model_grid_toggle" class="fa-solid fa-table-cells-large menu_button" data-i18n="[title]Toggle grid view" title="Toggle grid view"></i>
</div>
<div id="model_card_block" data-i18n="[no_desc_text]No model description" no_desc_text="[No description]"></div>
<div id="featherless_model_card_block" data-i18n="[no_desc_text]No model description" no_desc_text="[No description]"></div>
</div>
</div>
<!-- Do not remove. Needed for the /model command to function -->

18
public/scripts/textgen-models.js
View File

@ -268,13 +268,13 @@ export async function loadAphroditeModels(data) {
let featherlessCurrentPage = 1;
export async function loadFeatherlessModels(data) {
const searchBar = document.getElementById('model_search_bar');
const modelCardBlock = document.getElementById('model_card_block');
const paginationContainer = $('#model_pagination_container');
const sortOrderSelect = document.getElementById('model_sort_order');
const classSelect = document.getElementById('class_selection');
const categoriesSelect = document.getElementById('category_selection');
const storageKey = 'Models_PerPage';
const searchBar = document.getElementById('featherless_model_search_bar');
const modelCardBlock = document.getElementById('featherless_model_card_block');
const paginationContainer = $('#featherless_model_pagination_container');
const sortOrderSelect = document.getElementById('featherless_model_sort_order');
const classSelect = document.getElementById('featherless_class_selection');
const categoriesSelect = document.getElementById('featherless_category_selection');
const storageKey = 'FeatherlessModels_PerPage';
// Store the original models data for search and filtering
let originalModels = [];
@ -506,10 +506,10 @@ let featherlessIsGridView = false; // Default state set to grid view
// Ensure the correct initial view is applied when the page loads
document.addEventListener('DOMContentLoaded', function () {
const modelCardBlock = document.getElementById('model_card_block');
const modelCardBlock = document.getElementById('featherless_model_card_block');
modelCardBlock.classList.add('list-view');
const toggleButton = document.getElementById('model_grid_toggle');
const toggleButton = document.getElementById('featherless_model_grid_toggle');
toggleButton.addEventListener('click', function () {
// Toggle between grid and list view
if (featherlessIsGridView) {

24
public/style.css
View File

@ -5564,6 +5564,10 @@ body:not(.movingUI) .drawer-content.maximized {
transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
}
.model-card .details-container {
text-align: right;
}
.model-card:hover {
transform: scale(1.01);
background-color: #444;
@ -5604,7 +5608,11 @@ body:not(.movingUI) .drawer-content.maximized {
margin-bottom: 5px;
}
#model_card_block.grid-view {
#featherless_model_pagination_container .paginationjs-nav {
min-width: max-content;
}
#featherless_model_card_block.grid-view {
grid-template-columns: repeat(2, 1fr);
display: flex;
flex-wrap: wrap;
@ -5613,31 +5621,31 @@ body:not(.movingUI) .drawer-content.maximized {
}
/* Grid-view card */
#model_card_block.grid-view .model-card {
#featherless_model_card_block.grid-view .model-card {
flex-direction: column;
flex: 1 1 calc(50% - 30px);
}
#model_search_bar {
#featherless_model_search_bar {
width: 15ch;
flex-grow: 0;
align-self: center;
}
#model_sort_order {
#featherless_model_sort_order {
width: auto;
flex-shrink: 0;
align-self: center;
}
#model_grid_toggle {
#featherless_model_grid_toggle {
flex-shrink: 0;
width: auto;
cursor: pointer;
}
#category_selection,
#class_selection {
#featherless_category_selection,
#featherless_class_selection {
display: flex;
width: auto;
align-self: center;
@ -5654,7 +5662,7 @@ body:not(.movingUI) .drawer-content.maximized {
text-align: left;
}
#model_search_bar {
#featherless_model_search_bar {
width: 100%;
}