about summary refs log tree commit diff
path: root/website/sandbox/learnpianochords/src/Preferences.elm
AgeCommit message (Collapse)AuthorFilesLines
2020-04-19 Restore support for whitelisted chord inversionsWilliam Carroll1-35/+29
Allow users to include or exclude chord inversions.
2020-04-19 Drop support for PracticeModeWilliam Carroll1-9/+1
For now, I'd like to support selecting keys and whitelisting inversions.
2020-04-19 Create Tailwind moduleWilliam Carroll1-2/+3
Moving the UI.tw function into Tailwind.use. Creating and consuming some functions like Tailwind.if_ and Tailwind.when to make it easier to conditionally style some of my components.
2020-04-19 Responsively size UIWilliam Carroll1-2/+22
TL;DR: scale down UI for non-mobile devices. I pulled the screen resolution for my phone, the Google Pixel 4, off of the internet. I created a device profile in Chrome to develop this application specifically for my phone. To my surprise, when I opened the app on my phone, many of elements that looked good in Google Chrome, looked askew on my phone. I needed to troubleshoot. Here's how I did that: I used Tailwind to responsively color the bg for each breakpoint to see if my device was sm, md, lg, xl (according to Tailwind's breakpoint terminology). After reading Tailwind's documentation and comparing their breakpoints with my Pixel 4's width (i.e. 1080px), I figured that my device would be lg. It's not; it's md, which I confirmed by using ngrok to load localhost:8000 on my phone and see that the background-color was "md:bg-green-600". I'm still unsure why my device is not lg, but knowing that my device was md was enough to fix many of the styling issues. My current theory is that while my screen's resolution is 1080 wide, the pixel density affects the media query for the breakpoint.
2020-04-18 Debug unresponsive button press for selectKeyWilliam Carroll1-2/+2
Observed problem: Tapping "C major, A minor" key, which LPC sets by default, does not unset it. Bug: handleClick passed the relativeMinor Key but the default value in State.Model is the C Major key. We would toggled b/w [Cmajor] -> [Cmajor,Aminor], and because toggled checked if either Cmajor or Aminor was present, it was always true. Solution: Check relativeMajor to set toggled.
2020-04-18 Tidy appWilliam Carroll1-0/+141
Now that I have a deployed an MVP of my app, I am tidying things up to support the next phase of development. TL;DR: - Moved application Model-related code into State module - Moved each View into its own module - Deleted unused ChordInspector component - Deleted unused Msg's, {Increase,Decrease}Tempo - Deleted misc unused code