Earmark/audiogram-beta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chart bar responsive

Browse Source
This commit is contained in:
Seth Trowbridge 2023-07-22 09:08:21 -04:00
parent 12d0098cd8
commit 4d22b2bd93
3 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js/app.js
View File

@ -21,12 +21,14 @@ React.render(html`
<div class="flex flex-col items-start lg:flex-row mt-4 mb-24"> <div class="flex flex-col items-start lg:flex-row mt-4 mb-24">
<${UI.Controls}/> <${UI.Controls}/>
<${UI.Chart}> <div class="flex-1 self-stretch">
<${UI.Audiogram}/> <${UI.Chart}>
<div class="absolute left-0 w-full top-full md:( left-auto top-auto -right-[10px] -bottom-[10px])"> <${UI.Audiogram}/>
<//>
<div class="relative ml-10 mt-3 small-desktop:(ml-[100px] mr-[20px] -mt-[80px])">
<${UI.Display}/> <${UI.Display}/>
</div> </div>
<//> </div>
</div> </div>

4
js/twind.js
View File

@ -8,6 +8,10 @@ export const Configure = {
{ {
extend: extend:
{ {
screens:
{
"small-desktop": '1100px'
},
// @ts-ignore: typings for keyframes are missing in twind // @ts-ignore: typings for keyframes are missing in twind
keyframes: keyframes:
{ {

46
js/ui.js
View File

@ -55,12 +55,12 @@ export const Header =()=>
<img class="h-24 w-full object-contain object-center lg:object-left" src=${staticPath+"logo.png"}/> <img class="h-24 w-full object-contain object-center lg:object-left" src=${staticPath+"logo.png"}/>
</div> </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> <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="border-y-1 border-t-slate-300 border-b-white"></div>
<div class="flex flex-col md:flex-row"> <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"> <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> <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}> <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}; const grade = State.Live.Test?.Done || {Marks:0, Total:0, Score:0};
return html` return html`
<div class="flex bg-metal rounded-lg overflow-hidden shadow-md"> <div class="flex flex-col sm:flex-row bg-metal rounded-lg overflow-hidden shadow-md">
<div class="p-2 flex-2"> <div class="p-2 flex-2">
<div class="box-buttons"> <div class="box-buttons">
<p>Display</p> <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.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<//> <${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> </div>
</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" const classTitle = "flex-1 text-sm"
return html` 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"> <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> <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` 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-[-${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>` </span>`
); );
}); });
@ -374,12 +374,12 @@ export function Chart({children})
{ {
rules.push(html` 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 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>` </span>`
); );
} }
return html` 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)"> <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="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] "> <span class="inline-block absolute top-[50%] left-[-50px] ">