Featherless: More specifity for selectors

4bdaca5f8e22f337b7d39d7c4db5ab28eacd968f

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: f436000a9dbba70a3fd7370a50653321bcf3c117
3 files changed, +34 -27Ignore whitespace
public/index.html+9 -10
@@ -2261,33 +2261,32 @@
22612261 For privacy reasons, your API key will be hidden after you reload the page.
22622262 </div>
22632263 <hr>
22642264 <h4 data-i18n="Featherless Model Selection">Featherless Model Selection</h4>
22652265 <div id="Model-management-block" class="flex-container wide100p flexGap10">
22662266 <div class="flex1 overflowHidden wide100p">
22672267 <div class="flex-container marginBot10 alignitemscenter">
22682268 <input id="model_search_barfeatherless_model_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search...">
22692269 <select id="model_sort_orderfeatherless_model_sort_order" class="margin0 text_pole">
22702270 <option value="search" data-i18n="Search" hidden>A-Z</option>
22712271 <option value="asc">A-Z</option>
22722272 <option value="desc">Z-A</option>
22732273 <option value="date_asc">Date Asc</option>
22742274 <option value="date_desc">Date Desc</option>
22752275 </select>
22762276 <select id="category_selectionfeatherless_category_selection" class="text_pole">
22772277 <option value="" disabled selected data-i18n="category">category</option>
22782278 <!-- <option value="Favorite" data-i18n="Top">Favorite</option> -->
22792279 <option value="Top" data-i18n="Top">Top</option>
22802280 <option value="New" data-i18n="New">New</option>
22812281 <option value="All" data-i18n="All">All</option>
22822282 </select>
22832283 <select id="class_selectionfeatherless_class_selection" class="text_pole">
22842284 <option value="" selected data-i18n="class">All Classes</option>
22852285 </select>
22862286 <div id="model_pagination_containerfeatherless_model_pagination_container" class="flex1"></div>
22872287 <i id="model_grid_togglefeatherless_model_grid_toggle" class="fa-solid fa-table-cells-large menu_button" data-i18n="[title]Toggle grid view" title="Toggle grid view"></i>
22882288 </div>
22892289 <div id="model_card_blockfeatherless_model_card_block" data-i18n="[no_desc_text]No model description" no_desc_text="[No description]"></div>
2290-
22912290 </div>
22922291 </div>
22932292 <!-- Do not remove. Needed for the /model command to function -->
public/scripts/textgen-models.js+9 -9
@@ -268,13 +268,13 @@ export async function loadAphroditeModels(data) {
268268
269269let featherlessCurrentPage = 1;
270270export async function loadFeatherlessModels(data) {
271271 const searchBar = document.getElementById('model_search_barfeatherless_model_search_bar');
272272 const modelCardBlock = document.getElementById('model_card_blockfeatherless_model_card_block');
273273 const paginationContainer = $('#model_pagination_containerfeatherless_model_pagination_container');
274274 const sortOrderSelect = document.getElementById('model_sort_orderfeatherless_model_sort_order');
275275 const classSelect = document.getElementById('class_selectionfeatherless_class_selection');
276276 const categoriesSelect = document.getElementById('category_selectionfeatherless_category_selection');
277277 const storageKey = 'Models_PerPageFeatherlessModels_PerPage';
278278
279279 // Store the original models data for search and filtering
280280 let originalModels = [];
@@ -506,10 +506,10 @@ let featherlessIsGridView = false; // Default state set to grid view
506506
507507// Ensure the correct initial view is applied when the page loads
508508document.addEventListener('DOMContentLoaded', function () {
509509 const modelCardBlock = document.getElementById('model_card_blockfeatherless_model_card_block');
510510 modelCardBlock.classList.add('list-view');
511511
512512 const toggleButton = document.getElementById('model_grid_togglefeatherless_model_grid_toggle');
513513 toggleButton.addEventListener('click', function () {
514514 // Toggle between grid and list view
515515 if (featherlessIsGridView) {
public/style.css+16 -8
@@ -5564,6 +5564,10 @@ body:not(.movingUI) .drawer-content.maximized {
55645564 transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
55655565}
55665566
5567+.model-card .details-container {
5568+ text-align: right;
5569+}
5570+
55675571.model-card:hover {
55685572 transform: scale(1.01);
55695573 background-color: #444;
@@ -5604,7 +5608,11 @@ body:not(.movingUI) .drawer-content.maximized {
56045608 margin-bottom: 5px;
56055609}
56065610
56075611#model_card_blockfeatherless_model_pagination_container .gridpaginationjs-viewnav {
5612+ min-width: max-content;
5613+}
5614+
5615+#featherless_model_card_block.grid-view {
56085616 grid-template-columns: repeat(2, 1fr);
56095617 display: flex;
56105618 flex-wrap: wrap;
@@ -5613,31 +5621,31 @@ body:not(.movingUI) .drawer-content.maximized {
56135621}
56145622
56155623/* Grid-view card */
56165624#model_card_blockfeatherless_model_card_block.grid-view .model-card {
56175625 flex-direction: column;
56185626 flex: 1 1 calc(50% - 30px);
56195627}
56205628
56215629#model_search_barfeatherless_model_search_bar {
56225630 width: 15ch;
56235631 flex-grow: 0;
56245632 align-self: center;
56255633}
56265634
56275635#model_sort_orderfeatherless_model_sort_order {
56285636 width: auto;
56295637 flex-shrink: 0;
56305638 align-self: center;
56315639}
56325640
56335641#model_grid_togglefeatherless_model_grid_toggle {
56345642 flex-shrink: 0;
56355643 width: auto;
56365644 cursor: pointer;
56375645}
56385646
56395647#category_selectionfeatherless_category_selection,
56405648#class_selectionfeatherless_class_selection {
56415649 display: flex;
56425650 width: auto;
56435651 align-self: center;
@@ -5654,7 +5662,7 @@ body:not(.movingUI) .drawer-content.maximized {
56545662 text-align: left;
56555663 }
56565664
56575665 #model_search_barfeatherless_model_search_bar {
56585666 width: 100%;
56595667 }
56605668