Featherless: More specifity for selectors

4bdaca5f8e22f337b7d39d7c4db5ab28eacd968f

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

Parents: f436000a9dbba70a3fd7370a50653321bcf3c117

public/index.html+9 -10 Viewed

                                     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>
+                                <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="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="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>
+                                            <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 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 -->

public/scripts/textgen-models.js+9 -9 Viewed

 let featherlessCurrentPage = 1;
 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
     let originalModels = [];

 // 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) {

public/style.css+16 -8 Viewed

     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;

     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;

+}
 /* 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,
+#featherless_category_selection,
-#class_selection {
+#featherless_class_selection {
     display: flex;
     width: auto;
     align-self: center;

@@ -5654,7 +5662,7 @@ body:not(.movingUI) .drawer-content.maximized {
5654	text-align: left;	5662	text-align: left;
5655	}	5663	}
5656		5664
5657	#model_search_bar {	5665	#featherless_model_search_bar {
5658	width: 100%;	5666	width: 100%;
5659	}	5667	}
5660		5668