From 4d22b2bd93111d99e60cbf931829ece56e0f3cfb Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Sat, 22 Jul 2023 09:08:21 -0400
Subject: [PATCH] chart bar responsive

---
 js/app.js   | 10 ++++++----
 js/twind.js |  4 ++++
 js/ui.js    | 46 +++++++++++++++++++++++-----------------------
 3 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/js/app.js b/js/app.js
index 352ed35..522cc6e 100644
--- a/js/app.js
+++ b/js/app.js
@@ -21,12 +21,14 @@ React.render(html`
 
         <div class="flex flex-col items-start lg:flex-row mt-4 mb-24">
             <${UI.Controls}/>
-            <${UI.Chart}>
-                <${UI.Audiogram}/>
-                <div class="absolute left-0 w-full top-full md:( left-auto top-auto -right-[10px] -bottom-[10px])">
+            <div class="flex-1 self-stretch">
+                <${UI.Chart}>
+                    <${UI.Audiogram}/>
+                <//>
+                <div class="relative ml-10 mt-3 small-desktop:(ml-[100px] mr-[20px] -mt-[80px])">
                     <${UI.Display}/>
                 </div>
-            <//>
+            </div>
 
         </div>
 
diff --git a/js/twind.js b/js/twind.js
index 8a707bf..8f42bea 100644
--- a/js/twind.js
+++ b/js/twind.js
@@ -8,6 +8,10 @@ export const Configure = {
     {
         extend:
         {
+            screens:
+            {
+                "small-desktop": '1100px'
+            },
             // @ts-ignore: typings for keyframes are missing in twind
             keyframes:
             {
diff --git a/js/ui.js b/js/ui.js
index c84a482..6347ba1 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -55,12 +55,12 @@ export const Header =()=>
             <img class="h-24 w-full object-contain object-center lg:object-left" src=${staticPath+"logo.png"}/>
         </div>
 
-        <div class="bg-metal rounded-lg shadow-md flex-1">
+        <div class="bg-metal rounded-lg shadow-md flex-1 lg:self-end">
             <p class="text(center shadow-emboss slate-900) uppercase font-bold py-2">Test Patient</p>
             <div class="border-y-1 border-t-slate-300 border-b-white"></div>
 
             <div class="flex flex-col md:flex-row">
-                <div class="p-2 pr-0 flex-1">
+                <div class="p-2 lg:pr-0 flex-1">
                     <div class="flex flex-wrap flex-row items-stretch box-buttons">
                         <p class="px-2 self-center text(center sm) font-bold lg:w-auto">Condition:</p>
                         <select id="test-select" class="flex-1 px-2 py-2 rounded-lg border(1 slate-200) font-bold text(md white center) cursor-pointer bg-earmark" value=${State.Pick} onChange=${handleChangeCondition}>
@@ -102,25 +102,25 @@ export const Display =()=>
     const grade = State.Live.Test?.Done || {Marks:0, Total:0, Score:0};
     return html`
     
-            <div class="flex bg-metal rounded-lg overflow-hidden shadow-md">
-                <div class="p-2 flex-2">
-                    <div class="box-buttons">
-                        <p>Display</p>
-                        <${Button} light=${State.Show.Cursor} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowCursor", Data:!State.Show.Cursor})}>Cursor<//>
-                        <${Button} light=${State.Show.Answer} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowAnswer", Data:!State.Show.Answer})}>Answer<//>
-                    </div>
-                </div>
-                <div class="p-2 flex-1">
-                    <div class="box-buttons flex justify-center">
-                        <div class="px-2 font-bold">Complete: ${grade.Marks} of ${grade.Total}</div>
-                        <div class="flex-1 h-4 bg-zinc-400 rounded-full overflow-hidden">
-                            <div class="h-full w-[${grade.Marks/grade.Total*100}%] bg-earmark"></div>
-                        </div>
-                        <div class="px-2 text-sm">Accuracy: ${grade.Score}%</div>
-                        <${Button} disabled=${grade.Marks == 0} classes="text-xs" onClick=${()=>Dispatch({Name:"Kill", Data:0})}>Start Over<//>
-                    </div>
+        <div class="flex flex-col sm:flex-row bg-metal rounded-lg overflow-hidden shadow-md">
+            <div class="p-2 flex-2">
+                <div class="box-buttons">
+                    <p class="text-sm mr-1">Show:</p>
+                    <${Button} light=${State.Show.Cursor} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowCursor", Data:!State.Show.Cursor})}>Cursor<//>
+                    <${Button} light=${State.Show.Answer} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowAnswer", Data:!State.Show.Answer})}>Answer<//>
                 </div>
             </div>
+            <div class="p-2 flex-1">
+                <div class="box-buttons flex flex-col sm:flex-row justify-center">
+                    <div class="px-2 font-bold">Complete: ${grade.Marks} of ${grade.Total}</div>
+                    <div class="flex-1 h-4 bg-zinc-400 rounded-full overflow-hidden">
+                        <div class="h-full w-[${grade.Marks/grade.Total*100}%] bg-earmark"></div>
+                    </div>
+                    <div class="px-2 text-sm">Accuracy: ${grade.Score}%</div>
+                    <${Button} disabled=${grade.Marks == 0} classes="text-xs" onClick=${()=>Dispatch({Name:"Kill", Data:0})}>Start Over<//>
+                </div>
+            </div>
+        </div>
     
     `;
 };
@@ -162,7 +162,7 @@ export const Controls =()=>
     const classTitle = "flex-1 text-sm"
 
     return html`
-    <div class="grid grid-cols-6 gap-4 w-full lg:w-[370px]">
+    <div class="grid grid-cols-6 gap-4 w-full lg:w-[300px]">
 
         <div class="col-start-1 col-end-7 md:col-end-4 lg:col-end-7  flex-col bg-metal rounded-lg overflow-hidden shadow-md">
             <p class="text(center shadow-emboss slate-900) uppercase font-bold py-2">Controls</p>
@@ -365,7 +365,7 @@ export function Chart({children})
     {
         rules.push(html`
         <span class="block absolute top-[-${inset}px] left-[${position*100}%] w-0 h-[calc(100%+${inset*2}px)] border-r(1 zinc-400) ${!normal && "border-dashed"}">
-            <span class="block absolute top-0 left-0 -translate-x-1/2 -translate-y-full pb-${normal ? 4 : 1}">${label}</span>
+            <span class="block text-[10px] absolute top-0 left-0 -translate-x-1/2 -translate-y-full pb-${normal ? 4 : 1}">${label}</span>
         </span>`
         );
     });
@@ -374,12 +374,12 @@ export function Chart({children})
     {
         rules.push(html`
         <span class="block absolute  left-[-${inset}px]   top-[${((db-State.Stim.Min) / (State.Stim.Max-State.Stim.Min))*100}%]   h-0 w-[calc(100%+${inset*2}px)] border-b(${db == 0 ? "2 black" : "1 zinc-400"})">
-            <span class="block absolute top-0 left-0 -translate-x-full -translate-y-1/2 pr-2">${db}</span>
+            <span class="block text-[10px] absolute top-0 left-0 -translate-x-full -translate-y-1/2 pr-2">${db}</span>
         </span>`
         );
     }
     return html`
-    <div class="relative w-full pb-[calc(90%+70px)] md:pb-[calc(65%+70px)] lg:pb-[calc(45%+70px)] font(sans medium) text(xs) self-start">
+    <div class="relative w-full pb-[calc(90%+70px)] md:pb-[calc(65%+70px)] lg:pb-[calc(55%+70px)] font(sans medium) text(xs) self-start">
         <div class="absolute right-0 bottom-0 w-[calc(100%-80px)] h-[calc(100%-70px)] border(1 zinc-300)">
             <span class="block        absolute top-[-65px] left-0  w-full      text(sm center)     font-black">Frequency (Hz)</span>
             <span class="inline-block absolute top-[50%]   left-[-50px] ">