updated demo buttons in examples

deftio · Aug 2, 2024 · 1533789 · 1533789
1 parent 533df18
commit 1533789
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/dev/todo.md b/dev/todo.md
@@ -2,14 +2,18 @@
 
 * show/hide timestamps
 * add support for right to left languages by making css with [send] on left
+* add support for inline "user" icond with chat message instead of on top
 * provide minified css
-* rename project...
+* ?rename project...
 * example Anthropic
 * example Mistral
 * example React Component
-* test suite automate
-* github badges
-* fix scroll to bottom behavior
+* test suite automate 
+* add travis ci / build passing badge 
+* clean up scroll to bottom behavior (in progress)
+
+==========
+
 * (done 1.1.0) move callback from {meta} to 2nd param of constructor
 * (done 1.1.0) add loremIpsum Generator
 * (done 1.1.0) addedfix alternate light and dark to use css nth-child, added messagesAreaAlternateColors()

diff --git a/examples/example_esm.html b/examples/example_esm.html
@@ -32,9 +32,10 @@
         }
 
         /* these are not part of the widget, just for the demo test */
+         /* these are not part of the widget, just for the demo test */
         .system-btn {
-            padding: 8px 8px;
-            background-color: #918434;
+            padding: 12px 8px;
+            background-color: #443491;
             color: white;
             border: none;
             border-radius: 4px;
@@ -50,9 +51,11 @@ <h2>Quikchatjs Simple Example (ESM)</h2>
         input area can be hidden.</p>
     <div class="parent"></div>
     <br>
+    <br>
     <button class="system-btn" onclick="chatBox.titleAreaToggle()">Toggle Title</button>
     <button class="system-btn" onclick="chatBox.inputAreaToggle()">Toggle Input</button>
     <button class="system-btn" id="themeBtn">Change Themes</button>
+    <button class="system-btn" onclick="chatBox.messagesAreaAlternateColorsToggle()">Alternating Colors</button>
     <script type="module">
         import quikchat from '../dist/quikchat.esm.min.js';
         document.addEventListener('DOMContentLoaded', () => {

diff --git a/examples/example_umd.html b/examples/example_umd.html
@@ -33,9 +33,10 @@
         }
 
         /* these are not part of the widget, just for the demo test */
+           /* these are not part of the widget, just for the demo test */
         .system-btn {
-            padding: 8px 8px;
-            background-color: #918434;
+            padding: 12px 8px;
+            background-color: #443491;
             color: white;
             border: none;
             border-radius: 4px;
@@ -51,9 +52,12 @@ <h2>Quikchatjs Simple Example (UMD)</h2>
         input area can be hidden.</p>
     <div class="parent"></div>
     <br>
+    <br>
     <button class="system-btn" onclick="chatBox.titleAreaToggle()">Toggle Title</button>
     <button class="system-btn" onclick="chatBox.inputAreaToggle()">Toggle Input</button>
     <button class="system-btn" id="themeBtn">Change Themes</button>
+    <button class="system-btn" onclick="chatBox.messagesAreaAlternateColorsToggle()">Alternating Colors</button>
+    <br>
     <script >
         document.addEventListener('DOMContentLoaded', () => {
             const parentDiv = document.querySelector('.parent');