JonKazama-Hellion/HellionChat
1
0
Fork 0
Code Issues 1 Pull Requests Actions Releases 28 Activity

chat2web frontend: several small adjustments, fixes, refactor

Browse Source 
* moving the frontend gfd code into its own file
* refactoring the rest of the js code
* new "more messages"/scroll indicator
* autoscroll fixes in both javascript and css
* adjustments to mobile layout to use space more effectively
* make sure view keeps being scrolled to bottom on viewport changes
  (mobile keyboard show/hide)
This commit is contained in:
Ennea
2024-08-28 16:24:13 +02:00
parent 6cb01aa2f4
commit d10d37011f
4 changed files with 361 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ChatTwo/Http/templates/chat.html
+27 -21
View File
@@ -7,33 +7,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/start.css">
<script src="static/gfd.js"></script>
</head>
<body>
<main class="chat">
<section id="messages">
<div class="scroll-container">
<ol id="messages-list"></ol>
</div>
</section>
<section id="input">
<form>
<div class="select-container">
<select id="channel-select"></select>
<main class="chat">
<section id="messages">
<div class="scroll-container">
<ol id="messages-list"></ol>
</div>
<div class="input-container">
<input type="text" id="chat-input" placeholder="Message" enterkeyhint="send">
<div id="channel-hint"></div>
<div id="more-messages-indicator">
<!-- "arrow-down" icon from https://github.com/feathericons/feather, under MIT license -->
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
</div>
</section>
<button type="submit">Send</button>
</form>
</section>
</main>
<section id="input">
<form>
<div class="select-container">
<select id="channel-select"></select>
</div>
<div id="timestamp-width-probe"></div>
<script src="static/start.js"></script>
<div class="input-container">
<input type="text" id="chat-input" autocomplete="off" placeholder="Message" enterkeyhint="send">
<div id="channel-hint"></div>
</div>
<button type="submit">Send</button>
</form>
</section>
</main>
<div id="timestamp-width-probe"></div>
<script src="static/start.js"></script>
</body>
</html>
</html>