rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-03-02 10:57:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Featherless: More specifity for selectors

Browse Source
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. For privacy reasons, your API key will be hidden after you reload the page.
</div> </div>
<hr> <hr>
<h4 data-i18n="Featherless Model">Featherless Model Selection</h4> <h4 data-i18n="Featherless Model Selection">Featherless Model Selection</h4>
<div id="Model-management-block" class="flex-container wide100p flexGap10"> <div class="flex-container wide100p flexGap10">
<div class="flex1 overflowHidden wide100p"> <div class="flex1 overflowHidden wide100p">
<div class="flex-container marginBot10 alignitemscenter"> <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..."> <input id="featherless_model_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search...">
<select id="model_sort_order" class="margin0"> <select id="featherless_model_sort_order" class="margin0 text_pole">
<option value="search" data-i18n="Search" hidden>A-Z</option> <option value="search" data-i18n="Search" hidden>A-Z</option>
<option value="asc">A-Z</option> <option value="asc">A-Z</option>
<option value="desc">Z-A</option> <option value="desc">Z-A</option>
<option value="date_asc">Date Asc</option> <option value="date_asc">Date Asc</option>
<option value="date_desc">Date Desc</option> <option value="date_desc">Date Desc</option>
</select> </select>
<select id="category_selection"> <select id="featherless_category_selection" class="text_pole">
<option value="" disabled selected data-i18n="category">category</option> <option value="" disabled selected data-i18n="category">category</option>
<!-- <option value="Favorite" data-i18n="Top">Favorite</option> --> <!-- <option value="Favorite" data-i18n="Top">Favorite</option> -->
<option value="Top" data-i18n="Top">Top</option> <option value="Top" data-i18n="Top">Top</option>
<option value="New" data-i18n="New">New</option> <option value="New" data-i18n="New">New</option>
<option value="All" data-i18n="All">All</option> <option value="All" data-i18n="All">All</option>
</select> </select>
<select id="class_selection"> <select id="featherless_class_selection" class="text_pole">
<option value="" selected data-i18n="class">All Classes</option> <option value="" selected data-i18n="class">All Classes</option>
</select> </select>
<div id="model_pagination_container" class="flex1"></div> <div id="featherless_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> <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>
<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>
</div> </div>
<!-- Do not remove. Needed for the /model command to function --> <!-- 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; let featherlessCurrentPage = 1;
export async function loadFeatherlessModels(data) { export async function loadFeatherlessModels(data) {
const searchBar = document.getElementById('model_search_bar'); const searchBar = document.getElementById('featherless_model_search_bar');
const modelCardBlock = document.getElementById('model_card_block'); const modelCardBlock = document.getElementById('featherless_model_card_block');
const paginationContainer = $('#model_pagination_container'); const paginationContainer = $('#featherless_model_pagination_container');
const sortOrderSelect = document.getElementById('model_sort_order'); const sortOrderSelect = document.getElementById('featherless_model_sort_order');
const classSelect = document.getElementById('class_selection'); const classSelect = document.getElementById('featherless_class_selection');
const categoriesSelect = document.getElementById('category_selection'); const categoriesSelect = document.getElementById('featherless_category_selection');
const storageKey = 'Models_PerPage'; const storageKey = 'FeatherlessModels_PerPage';
// Store the original models data for search and filtering // Store the original models data for search and filtering
let originalModels = []; 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 // Ensure the correct initial view is applied when the page loads
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const modelCardBlock = document.getElementById('model_card_block'); const modelCardBlock = document.getElementById('featherless_model_card_block');
modelCardBlock.classList.add('list-view'); modelCardBlock.classList.add('list-view');
const toggleButton = document.getElementById('model_grid_toggle'); const toggleButton = document.getElementById('featherless_model_grid_toggle');
toggleButton.addEventListener('click', function () { toggleButton.addEventListener('click', function () {
// Toggle between grid and list view // Toggle between grid and list view
if (featherlessIsGridView) { 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; 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 { .model-card:hover {
transform: scale(1.01); transform: scale(1.01);
background-color: #444; background-color: #444;
@ -5604,7 +5608,11 @@ body:not(.movingUI) .drawer-content.maximized {
margin-bottom: 5px; 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); grid-template-columns: repeat(2, 1fr);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -5613,31 +5621,31 @@ body:not(.movingUI) .drawer-content.maximized {
} }
/* Grid-view card */ /* Grid-view card */
#model_card_block.grid-view .model-card { #featherless_model_card_block.grid-view .model-card {
flex-direction: column; flex-direction: column;
flex: 1 1 calc(50% - 30px); flex: 1 1 calc(50% - 30px);
} }
#model_search_bar { #featherless_model_search_bar {
width: 15ch; width: 15ch;
flex-grow: 0; flex-grow: 0;
align-self: center; align-self: center;
} }
#model_sort_order { #featherless_model_sort_order {
width: auto; width: auto;
flex-shrink: 0; flex-shrink: 0;
align-self: center; align-self: center;
} }
#model_grid_toggle { #featherless_model_grid_toggle {
flex-shrink: 0; flex-shrink: 0;
width: auto; width: auto;
cursor: pointer; cursor: pointer;
} }
#category_selection, #featherless_category_selection,
#class_selection { #featherless_class_selection {
display: flex; display: flex;
width: auto; width: auto;
align-self: center; align-self: center;
@ -5654,7 +5662,7 @@ body:not(.movingUI) .drawer-content.maximized {
text-align: left; text-align: left;
} }
#model_search_bar { #featherless_model_search_bar {
width: 100%; width: 100%;
} }