-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/main'
- Loading branch information
Showing
6 changed files
with
158 additions
and
143 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| @import "tailwindcss/base"; | ||
| @import "tailwindcss/components"; | ||
| @import "tailwindcss/utilities"; | ||
|
|
||
| @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400&display=swap" rel="stylesheet'); | ||
| @import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap" rel="stylesheet'); | ||
| /* This file is for your main application CSS */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
175 changes: 104 additions & 71 deletions
175
lib/leadfoot_web/live/suspension_calculator_live/view.html.heex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,81 +1,114 @@ | ||
| <div class="grid grid-cols-4 md:grid-cols-2 gap-2 text-black"> | ||
| <div class="bg-slate-300 p-2"> | ||
| <div class="grid grid-cols-2 md:grid-cols-2 gap-2 text-black"> | ||
| <div class="rounded-lg bg-transparent p-2"> | ||
| <h1 class="text-4xl md:text-6xl font-racing-sans-one font-weight: lighter">LEADFOOT</h1> | ||
| <h2 class="text-1xl md:text-2xl font-ibm-plex-sans whitespace-nowrap"> | ||
| Suspension Calculator | ||
| </h2> | ||
| </div> | ||
| <div class="relative rounded-lg bg-transparent p-2"> | ||
| <button | ||
| class="absolute right-0 bottom-3 bg-transparent hover:bg-zinc-600 text-sm text-slate-700 font-semibold hover:text-white py-1 px-3 border border-slate-700 hover:border-transparent rounded" | ||
| onclick="my_modal_1.showModal()" | ||
| > | ||
| Help | ||
| </button> | ||
| <dialog | ||
| id="my_modal_1" | ||
| class="modal absolute m-auto left-4 right-4 rounded-xl bg-white max-w-2xl" | ||
| > | ||
| <form method="dialog" class="modal-box"> | ||
| <button class="btn btn-sm btn-square btn-ghost absolute right-4 top-3">✕</button> | ||
| <h3 class="font-bold text-lg">Help</h3> | ||
| <p class="mt-4">All units are metric.</p> | ||
| <p class="mt-2"> | ||
| Suspension frequencies are a good starting point but the best spring rate will not come from a calculator. | ||
| </p> | ||
| <p class="mt-2"> | ||
| A faster spring frequency means the car will be more responsive. Usually, the front frequency should be the same or lower than the rear frequency. | ||
| </p> | ||
| <p class="mt-2">To start, try 2.0 Hz in front and 2.2 Hz in rear.</p> | ||
| <div class="modal-action flex justify-center"> | ||
| <button class="mt-6 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3 text-sm font-semibold leading-6 text-white active:text-white/80"> | ||
| Close | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </dialog> | ||
| </div> | ||
| </div> | ||
| <div class="mt-2 grid grid-cols-1 gap-2 text-black"> | ||
| <div class="rounded-lg bg-slate-800/10 p-2"> | ||
| <.simple_form for={@form} id="form" phx-change="validate" phx-submit="save"> | ||
| <div class="grid-auto-fit"> | ||
| <.input class="w-full" field={@form[:mass]} label="Mass" inputmode="numeric" /> | ||
| <.input | ||
| class="w-full" | ||
| field={@form[:front_distribution]} | ||
| type="text" | ||
| label="Front Distribution" | ||
| inputmode="numeric" | ||
| /> | ||
|
|
||
| <div class="sm-grid-auto-fit"> | ||
| <div class="inline-block"> | ||
| <.input | ||
| class="w-full" | ||
| field={@form[:front_spring_rate]} | ||
| type="text" | ||
| label="Front Spring Rate" | ||
| inputmode="numeric" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="inline-block"> | ||
| <.input | ||
| class="w-full" | ||
| field={@form[:rear_spring_rate]} | ||
| type="text" | ||
| label="Rear Spring Rate" | ||
| inputmode="numeric" | ||
| /> | ||
| </div> | ||
| <div class="sm-grid-auto-fit flex justify-center py-2"> | ||
| <div class="inline-block ml-6"> | ||
| <.input class="w-full" field={@form[:mass]} label="Mass" inputmode="numeric" /> | ||
| </div> | ||
|
|
||
| <div class="sm-grid-auto-fit"> | ||
| <div class="inline-block"> | ||
| <.input | ||
| class="w-full" | ||
| field={@form[:front_downforce]} | ||
| type="text" | ||
| label="Front Downforce" | ||
| inputmode="numeric" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="inline-block"> | ||
| <.input | ||
| class="w-full" | ||
| field={@form[:rear_downforce]} | ||
| type="text" | ||
| label="Rear Downforce" | ||
| inputmode="numeric" | ||
| /> | ||
| </div> | ||
| <div class="inline-block px-6"> | ||
| <.input | ||
| class="w-full" | ||
| field={@form[:front_distribution]} | ||
| type="text" | ||
| label="Front Distribution" | ||
| inputmode="numeric" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div class="sm-grid-auto-fit flex justify-center"> | ||
| <div class="inline-block ml-6"> | ||
| <.input | ||
| class="w-full" | ||
| field={@form[:front_spring_rate]} | ||
| type="text" | ||
| label="Front Spring Rate" | ||
| inputmode="numeric" | ||
| /> | ||
| </div> | ||
| <div class="inline-block px-6"> | ||
| <.input | ||
| class="w-full" | ||
| field={@form[:rear_spring_rate]} | ||
| type="text" | ||
| label="Rear Spring Rate" | ||
| inputmode="numeric" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="sm-grid-auto-fit flex justify-center"> | ||
| <div class="inline-block ml-6"> | ||
| <.input | ||
| class="w-full" | ||
| field={@form[:front_downforce]} | ||
| type="text" | ||
| label="Front Downforce" | ||
| inputmode="numeric" | ||
| /> | ||
| </div> | ||
| <div class="inline-block px-6"> | ||
| <.input | ||
| class="w-full" | ||
| field={@form[:rear_downforce]} | ||
| type="text" | ||
| label="Rear Downforce" | ||
| inputmode="numeric" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div class="py-1 flex justify-center"> | ||
| <.button type="submit">Calculate</.button> | ||
| </div> | ||
| </.simple_form> | ||
|
|
||
| <div>front: <%= Float.round(@front_frequency, 2) %> Hz</div> | ||
| <div>rear: <%= Float.round(@rear_frequency, 2) %> Hz</div> | ||
| <div>ratio: <%= Float.round(@ratio, 2) %></div> | ||
|
|
||
| <div class="mt-3">with downforce</div> | ||
|
|
||
| <div>front: <%= Float.round(@front_with_downforce, 2) %> Hz</div> | ||
| <div>rear: <%= Float.round(@rear_with_downforce, 2) %> Hz</div> | ||
| <div>ratio: <%= Float.round(@ratio_with_downforce, 2) %></div> | ||
| </div> | ||
| <div class="bg-slate-300 p-2"> | ||
| <p>All units are metric.</p> | ||
| <p> | ||
| Suspension frequencies are a good starting point but the best spring rate will not come from a calculator. | ||
| </p> | ||
| <p>A faster spring frequency means the car will be more responsive.</p> | ||
| <p>Usually, the front frequency should be the same or lower than the rear frequency.</p> | ||
| <p>To start, try 2.0 Hz in front and 2.2 Hz in rear.</p> | ||
| </div> | ||
| <div class="my-4 grid md:grid-cols-1 gap-2 text-black"> | ||
| <div class="px-8 sm:px-24 md:px-28 rounded-lg bg-slate-800/10 p-2"> | ||
| <div><strong>Without Downforce</strong></div> | ||
| <div>Front: <%= Float.round(@front_frequency, 2) %> Hz</div> | ||
| <div>Rear: <%= Float.round(@rear_frequency, 2) %> Hz</div> | ||
| <div>Ratio: <%= Float.round(@ratio, 2) %></div> | ||
| <div class="mt-3"><strong>With Downforce</strong></div> | ||
| <div>Front: <%= Float.round(@front_with_downforce, 2) %> Hz</div> | ||
| <div>Rear: <%= Float.round(@rear_with_downforce, 2) %> Hz</div> | ||
| <div>Ratio: <%= Float.round(@ratio_with_downforce, 2) %></div> | ||
| </div> | ||
| </div> |