southfox/AAII
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[style] change loading indicator location

Browse source
This commit is contained in:
SouthFox 2024-08-14 00:58:27 +08:00
parent ec4338378e
commit c81e5e0651
3 changed files with 4 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
static/index.html
View file

@ -11,15 +11,15 @@
<body> <body>
<div class="container bg-white rounded-lg shadow-md flex flex-col"> <div class="container bg-white rounded-lg shadow-md flex flex-col">
<h1 class="flex-none text-3xl font-bold mb-4 text-center">AAII</h1> <h1 class="flex-none text-3xl font-bold mb-4 text-center">AAII
<div class="typing-indicator" id="typingIndicator"></div>
</h1>
<div class="chat break-all" id="chatContainer"> <div class="chat break-all" id="chatContainer">
</div> </div>
<div class="flex-none flex"> <div class="flex-none flex">
<textarea type="text" id="userInput" placeholder="Type message here" class="outline-none flex-auto"></textarea> <textarea type="text" id="userInput" placeholder="Type message here" class="outline-none flex-auto"></textarea>
<button class="send-button flex-none" id="sendButton" >Send</button> <button class="send-button flex-none" id="sendButton" >Send</button>
</div> </div>
<div class="typing-indicator" id="typingIndicator">
</div>
</div> </div>
<script type="module" src="script.js"></script> <script type="module" src="script.js"></script>

2
static/script.js
View file

@ -95,7 +95,7 @@ let typingTimeout;
function showTypingIndicator() { function showTypingIndicator() {
clearTimeout(typingTimeout); clearTimeout(typingTimeout);
typingIndicator.style.display = "inline-block"; typingIndicator.style.display = "inline-flex";
} }
function hideTypingIndicator() { function hideTypingIndicator() {

3
static/style.css
View file

@ -146,9 +146,6 @@ input[type="text"] {
.typing-indicator { .typing-indicator {
display: none; display: none;
align-items: center;
justify-content: flex-end;
margin-top: 8px;
width: 10px; width: 10px;
height: 10px; height: 10px;
background-color: #333; background-color: #333;