Improve styling mobile

xtekky · Feb 11, 2025 · 226c69d · 226c69d
1 parent e9f9662
commit 226c69d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 85 deletions.
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
@@ -1422,11 +1422,12 @@ form .field.saved .fa-xmark {
     line-height: 30px;
 }
 
-.collapsible {
+.field.collapsible {
     border: 1px solid var(--blur-border);
     border-radius: var(--border-radius-1);
     overflow: hidden;
     margin-bottom: 10px;
+    padding-right: 0;
 }
 
 .collapsible-header {
@@ -1443,7 +1444,11 @@ form .field.saved .fa-xmark {
 }
 
 .collapsible-content {
-    padding: 10px;
+    padding: 0 10px;
+}
+
+.collapsible-content.api-key {
+    width: 100%;
 }
 
 .collapsible-content.hidden {
@@ -1540,6 +1545,7 @@ form .field.saved .fa-xmark {
 .conversations, .settings, .conversation {
     flex: 1 1 300px;
     min-width: 0;
+    height: 100%;
 }
 
 /* Media queries for mobile devices */
@@ -1558,81 +1564,9 @@ form .field.saved .fa-xmark {
         order: -1;
         min-height: 80vh;
     }
-
-    .buttons .field {
-        flex: 1 1 auto;
-    }
-
-    #model, #provider {
-        font-size: 14px;
-        padding: 6px;
-    }
-
-    .user-input .input-area {
-        padding: 8px;
-    }
-
-    textarea#message-input {
-        font-size: 14px;
-    }
-
-    .mobile-sidebar {
-        display: block;
-        position: fixed;
-        top: 10px;
-        left: 10px;
-        z-index: 1000;
-    }
-
-    .conversations {
-        position: fixed;
-        left: -100%;
-        top: 0;
-        bottom: 0;
-        transition: left 0.3s;
-        z-index: 999;
-        background: var(--bg-color);
-    }
-
-    .conversations.active {
-        left: 0;
-    }
-}
-
-/* Flexible form elements */
-.user-input .input-area {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-textarea {
-    max-width: 100%;
-    min-height: 50px;
-    resize: vertical;
-}
-
-.file-label {
-    flex-shrink: 0;
-}
-
-/* Adaptive model menu */
-#model, #provider {
-    max-width: 150px;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 
 @media (max-width: 480px) {
-    #model, #provider {
-        max-width: 100%;
-    }
-
-    .toolbar {
-        flex-wrap: wrap;
-        gap: 5px;
-    }
-
     .info .convo-title {
         font-size: 12px;
     }

diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
@@ -1651,8 +1651,10 @@ window.addEventListener('popstate', hide_sidebar, false);
 sidebar_button.addEventListener("click", async () => {
     if (sidebar.classList.contains("shown")) {
         await hide_sidebar();
+        chat.classList.remove("hidden");
     } else {
         await show_menu();
+        chat.classList.add("hidden");
     }
     window.scrollTo(0, 0);
 });
@@ -2096,7 +2098,7 @@ async function on_api() {
             <span class="label">Providers API key</span>
             <i class="fa-solid fa-chevron-down"></i>
         </div>
-        <div class="collapsible-content hidden"></div>
+        <div class="collapsible-content api-key hidden"></div>
     `;
     settings.querySelector(".paper").appendChild(providersListContainer);
 
@@ -2739,13 +2741,3 @@ document.getElementById("showLog").addEventListener("click", ()=> {
     settings.classList.add("hidden");
     log_storage.scrollTop = log_storage.scrollHeight;
 });
-
-document.querySelector('.mobile-sidebar').addEventListener('click', function() {
-    document.querySelector('.conversations').classList.toggle('active');
-});
-
-document.addEventListener('click', function(e) {
-    if(!e.target.closest('.conversations') && !e.target.closest('.mobile-sidebar')) {
-        document.querySelector('.conversations').classList.remove('active');
-    }
-});