From aff3ec5be0867639ac2f73d4faf05d0461bb4f5a Mon Sep 17 00:00:00 2001 From: Heiner Lohaus Date: Tue, 9 Apr 2024 20:19:46 +0200 Subject: Improve styling mobile --- g4f/gui/client/static/css/style.css | 13 ++++++++++--- g4f/gui/client/static/js/chat.v1.js | 4 +++- 2 files changed, 13 insertions(+), 4 deletions(-) (limited to 'g4f') diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css index faecda9f..32fff3db 100644 --- a/g4f/gui/client/static/css/style.css +++ b/g4f/gui/client/static/css/style.css @@ -239,6 +239,7 @@ body { width: 100%; overflow-wrap: break-word; display: flex; + flex-direction: column; gap: var(--section-gap); padding: var(--inner-gap) var(--section-gap); padding-bottom: 0; @@ -589,7 +590,7 @@ label[for="camera"] { } .settings .bottom_buttons { - flex-direction: row; + flex-direction: column; } .settings .bottom_buttons button { @@ -652,6 +653,12 @@ select { .field { padding-right: 15px } + .message { + flex-direction: row; + } + .settings .bottom_buttons { + flex-direction: row; + } } .input-box { @@ -1070,7 +1077,6 @@ a:-webkit-any-link { .settings { width: 100%; - min-width: 700px; display: flex; flex-direction: column; } @@ -1078,6 +1084,7 @@ a:-webkit-any-link { .settings .paper { overflow: auto; flex-direction: column; + min-width: 400px; } .settings .field { @@ -1135,7 +1142,7 @@ a:-webkit-any-link { } #message-input { - height: 82px; + height: 90px; margin-left: 20px; max-height: 200px; } diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js index 02437bf7..5036a93b 100644 --- a/g4f/gui/client/static/js/chat.v1.js +++ b/g4f/gui/client/static/js/chat.v1.js @@ -96,10 +96,12 @@ const register_message_buttons = async () => { el.dataset.click = "true"; el.addEventListener("click", async () => { if ("active" in el.classList || window.doSpeech) { + el.classList.add("blink") stopped = true; return; } if (stopped) { + el.classList.remove("blink") stopped = false; return; } @@ -125,7 +127,7 @@ const register_message_buttons = async () => { sound.controls = 'controls'; sound.src = url; sound.type = 'audio/wav'; - if (ended) { + if (ended && !stopped) { sound.autoplay = true; } sound.onended = function() { -- cgit v1.2.3