mobile fix

This commit is contained in:
Adrien Bouvais 2024-05-05 14:42:04 +02:00
parent 35ba12ae81
commit a5c27c22d9
5 changed files with 32 additions and 41 deletions

View File

@ -2,10 +2,7 @@
<hx hx-get="/loadChat" hx-trigger="load" hx-swap="outerHTML"></hx>
<div class="chat-input-container">
<form class="control" hx-post="/requestMultipleMessages" hx-swap="beforeend settle:200ms"
hx-target="#chat-messages" id="chat-input-form" class="chat-input"
hx-include="[name='message'], [name^='model-check-']">
<div class="chat-input-container mb-5">
<div class="textarea-wrapper">
<textarea class="textarea" placeholder="Type your message here..." name="message"></textarea>
<div class="button-group">
@ -24,9 +21,10 @@
</div>
</div>
</div>
<button type="submit" class="send-button button is-primary is-small">Send</button>
<button type="submit" class="send-button button is-primary is-small" hx-post="/requestMultipleMessages"
hx-swap="beforeend settle:200ms" hx-target="#chat-messages" id="chat-input-send-btn"
class="chat-input" hx-include="[name='message'], [name^='model-check-']">Send</button>
</div>
</div>
</form>
</div>
</div>

View File

@ -30,6 +30,7 @@
.textarea-wrapper {
position: relative;
width: 100%;
}
.textarea {

View File

@ -1,7 +0,0 @@
<div class="message-content" {% if message.Hidden %}style="display: none;" {% endif %}>
<div class="message-body">
<div class="content">
{{ message.Content | safe }}
</div>
</div>
</div>

View File

@ -1,13 +1,13 @@
<div class="message-bot mt-3">
<div class="columns">
<div class="column is-vcentered is-1" id="icon-column">
<div class="columns is-mobile">
<div class="column is-narrow" id="icon-column">
<div class='rows'>
{% for message in Messages %}
<div class='row is-full mt-1 is-vcentered'>
<div class='row is-full mt-1'>
<a href="#" hx-get="/messageContent?id={{ message.Id }}" class="is-clickable"
hx-target="#content-{{ ConversationAreaId }}" onclick="toggleGrayscale(this)">
<figure class=" image is-48x48 mr-2" style="flex-shrink: 0;">
<img src="icons/{{ message.Icon }}.png" alt="User Image" if {% if message.Hidden %}
<figure class="image is-48x48" style="flex-shrink: 0;">
<img src="icons/{{ message.Icon }}.png" alt="User Image" {% if message.Hidden %}
style="filter: grayscale(100%);" {% endif %}>
</figure>
</a>
@ -15,7 +15,7 @@
{% endfor %}
{% if IsPlaceholder %}
<div class='row is-full mt-1'>
<figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
<figure class="image is-48x48" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
@ -23,7 +23,6 @@
</div>
</div>
<div class="column" id="content-column">
<div class="is-flex">
{% for message in Messages %}
@ -36,9 +35,9 @@
</p>
</div>
<div class="message-body">
<ct class="content" style="overflow-x: auto;">
<div class="content" style="overflow-x: auto;">
{{ message.Content | safe }}
</ct>
</div>
</div>
</div>
{% endif %}

View File

@ -1,7 +1,7 @@
<div class="message-user mt-3" id="{{ ID }}">
<div class="columns is-vcentered">
<div class="column is-centered is-1" id="icon-column">
<figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
<div class="columns is-vcentered is-mobile">
<div class="column is-narrow" id="icon-column">
<figure class="image is-48x48" style="flex-shrink: 0;">
<img src="icons/bouvai2.png" alt="User Image">
</figure>
</div>
@ -10,7 +10,7 @@
<div class="is-flex">
<div class="message-content" style="position: relative; padding-right: 30px;">
<div class="message-body">
<div class="content">
<div class="content" style="overflow-x: auto;">
{{ Content|safe }}
</div>
</div>