From 1e69b8435667c618d489020cdb0169fe98cb382c Mon Sep 17 00:00:00 2001 From: Robby Ronk Date: Thu, 6 Jul 2023 13:40:14 -0400 Subject: [PATCH 1/2] Styling updates (#5) * Bpcollins patch 1 (#1) * Update app.css Imported Google fonts: Racing Sans One, IBM Plex Mono * Update app.css Imported Google fonts: Racing Sans One, IBM Plex Mono * Update tailwind.config.js (#2) Added font families * Update core_components.ex (#3) Removed top margin and background color on forms. * Update view.html.heex (#4) Changed padding at top of page. Added header text using imported google fonts. Rounded table corners. Made form background transparent and removed top padding. Added margins to space out buttons and text. --------- Co-authored-by: bpcollins <136278393+bpcollins@users.noreply.github.com> --- assets/css/app.css | 3 ++- assets/tailwind.config.js | 4 ++++ .../components/core_components.ex | 2 +- .../suspension_calculator_live/view.html.heex | 22 +++++++++---------- 4 files changed, 18 insertions(+), 13 deletions(-) diff --git a/assets/css/app.css b/assets/css/app.css index 378c8f9..57cb027 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -1,5 +1,6 @@ @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; - +@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap'); /* This file is for your main application CSS */ diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 1174033..e733ba8 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -13,6 +13,10 @@ module.exports = { ], theme: { extend: { + fontFamily: { + 'racing-sans': ['Racing Sans One', 'sans-serif'], + 'ibm-plex-mono': ['IBM Plex Mono', 'monospace'], + }, colors: { brand: "#FD4F00", } diff --git a/lib/leadfoot_web/components/core_components.ex b/lib/leadfoot_web/components/core_components.ex index 6a8ec61..5371aa5 100644 --- a/lib/leadfoot_web/components/core_components.ex +++ b/lib/leadfoot_web/components/core_components.ex @@ -184,7 +184,7 @@ defmodule LeadfootWeb.CoreComponents do def simple_form(assigns) do ~H""" <.form :let={f} for={@for} as={@as} {@rest}> -
+
<%= render_slot(@inner_block, f) %>
<%= render_slot(action, f) %> diff --git a/lib/leadfoot_web/live/suspension_calculator_live/view.html.heex b/lib/leadfoot_web/live/suspension_calculator_live/view.html.heex index 65f1352..f1dffe5 100644 --- a/lib/leadfoot_web/live/suspension_calculator_live/view.html.heex +++ b/lib/leadfoot_web/live/suspension_calculator_live/view.html.heex @@ -1,8 +1,10 @@ -
-
+

LEADFOOT

+

Suspension Calculator

+
+
<.simple_form for={@form} id="form" phx-change="validate" phx-submit="save">
- <.input class="w-full" field={@form[:mass]} label="Mass" inputmode="numeric" /> + <.input class="w-full" field={@form[:mass]} label="Mass" inputmode="numeric"/> <.input class="w-full" field={@form[:front_distribution]} @@ -54,12 +56,11 @@ />
- +
<.button type="submit">Calculate
- -
front: <%= Float.round(@front_frequency, 2) %> Hz
+
front: <%= Float.round(@front_frequency, 2) %> Hz
rear: <%= Float.round(@rear_frequency, 2) %> Hz
ratio: <%= Float.round(@ratio, 2) %>
@@ -69,13 +70,12 @@
rear: <%= Float.round(@rear_with_downforce, 2) %> Hz
ratio: <%= Float.round(@ratio_with_downforce, 2) %>
-
+

All units are metric.

-

+

Suspension frequencies are a good starting point but the best spring rate will not come from a calculator.

-

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.

-

To start, try 2.0 Hz in front and 2.2 Hz in rear.

+

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.

+

To start, try 2.0 Hz in front and 2.2 Hz in rear.

From 84a78e047547891e5699b1c5068d332d7c9b54c8 Mon Sep 17 00:00:00 2001 From: Brian Collins <136278393+bpcollins@users.noreply.github.com> Date: Tue, 5 Sep 2023 00:02:52 -0400 Subject: [PATCH 2/2] Calculator styling updates (#8) * Reduced padding height on header * Changed white background to slate gradient * Styling updates Updated column quantity based on browser window size. Made logo/text responsive to browser size. Changed grid background opacity. Moved calculator results to bottom row. * "Stuff". Adjusted header width and margins for Register and Login links. Added 'help' modal box. Changed calculator layout. Added bottom row for calculator results. * Font name change * font name changes Updated font names. --- assets/css/app.css | 4 +- assets/tailwind.config.js | 6 +- .../components/layouts/app.html.heex | 29 +-- .../components/layouts/root.html.heex | 86 ++++----- .../suspension_calculator_live/view.html.heex | 175 +++++++++++------- 5 files changed, 155 insertions(+), 145 deletions(-) diff --git a/assets/css/app.css b/assets/css/app.css index 57cb027..6ef5b6b 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -1,6 +1,6 @@ @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; -@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap'); +@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 */ diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index e733ba8..579ed78 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -14,11 +14,11 @@ module.exports = { theme: { extend: { fontFamily: { - 'racing-sans': ['Racing Sans One', 'sans-serif'], - 'ibm-plex-mono': ['IBM Plex Mono', 'monospace'], + 'racing-sans-one': ['Racing Sans One', 'sans-serif'], + 'ibm-plex-sans': ['IBM Plex Sans', 'sans-serif'], }, colors: { - brand: "#FD4F00", + brand: "#000000", } }, }, diff --git a/lib/leadfoot_web/components/layouts/app.html.heex b/lib/leadfoot_web/components/layouts/app.html.heex index e23bfc8..46445a4 100644 --- a/lib/leadfoot_web/components/layouts/app.html.heex +++ b/lib/leadfoot_web/components/layouts/app.html.heex @@ -1,30 +1,5 @@ -
-
-
- - - -

- v<%= Application.spec(:phoenix, :vsn) %> -

-
-
- - @elixirphoenix - - - GitHub - - - Get Started - -
-
-
-
+
+
<.flash_group flash={@flash} /> <%= @inner_content %> diff --git a/lib/leadfoot_web/components/layouts/root.html.heex b/lib/leadfoot_web/components/layouts/root.html.heex index 35f7aa9..21c5877 100644 --- a/lib/leadfoot_web/components/layouts/root.html.heex +++ b/lib/leadfoot_web/components/layouts/root.html.heex @@ -11,48 +11,50 @@ - -
    - <%= if @current_user do %> -
  • - <%= @current_user.email %> -
    • -
  • - <.link - href={~p"/users/settings"} - class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700" - > - Settings - -
    • -
  • - <.link - href={~p"/users/log_out"} - method="delete" - class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700" - > - Log out - -
    • - <% else %> -
  • - <.link - href={~p"/users/register"} - class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700" - > - Register - -
    • -
  • - <.link - href={~p"/users/log_in"} - class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700" - > - Log in - -
    • - <% end %> -
+ +
+
    + <%= if @current_user do %> +
  • + <%= @current_user.email %> +
    • +
  • + <.link + href={~p"/users/settings"} + class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700" + > + Settings + +
    • +
  • + <.link + href={~p"/users/log_out"} + method="delete" + class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700" + > + Log out + +
    • + <% else %> +
  • + <.link + href={~p"/users/register"} + class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700" + > + Register + +
    • +
  • + <.link + href={~p"/users/log_in"} + class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700" + > + Log in + +
    • + <% end %> +
+
<%= @inner_content %> diff --git a/lib/leadfoot_web/live/suspension_calculator_live/view.html.heex b/lib/leadfoot_web/live/suspension_calculator_live/view.html.heex index f1dffe5..02e423e 100644 --- a/lib/leadfoot_web/live/suspension_calculator_live/view.html.heex +++ b/lib/leadfoot_web/live/suspension_calculator_live/view.html.heex @@ -1,81 +1,114 @@ -

LEADFOOT

-

Suspension Calculator

-
-
+
+
+

LEADFOOT

+

+ Suspension Calculator +

+
+
+ + +
+ +

Help

+

All units are metric.

+

+ Suspension frequencies are a good starting point but the best spring rate will not come from a calculator. +

+

+ 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. +

+

To start, try 2.0 Hz in front and 2.2 Hz in rear.

+
+ +
+
+ +
+
+
+
<.simple_form for={@form} id="form" phx-change="validate" phx-submit="save"> -
- <.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" - /> - -
-
- <.input - class="w-full" - field={@form[:front_spring_rate]} - type="text" - label="Front Spring Rate" - inputmode="numeric" - /> -
- -
- <.input - class="w-full" - field={@form[:rear_spring_rate]} - type="text" - label="Rear Spring Rate" - inputmode="numeric" - /> -
+
+
+ <.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" + /> +
+
+
+
+ <.input + class="w-full" + field={@form[:front_spring_rate]} + type="text" + label="Front Spring Rate" + inputmode="numeric" + /> +
+
+ <.input + class="w-full" + field={@form[:rear_spring_rate]} + type="text" + label="Rear Spring Rate" + inputmode="numeric" + /> +
+
-
-
- <.input - class="w-full" - field={@form[:front_downforce]} - type="text" - label="Front Downforce" - inputmode="numeric" - /> -
- -
- <.input - class="w-full" - field={@form[:rear_downforce]} - type="text" - label="Rear Downforce" - inputmode="numeric" - /> -
+
+
+ <.input + class="w-full" + field={@form[:front_downforce]} + type="text" + label="Front Downforce" + inputmode="numeric" + /> +
+
+ <.input + class="w-full" + field={@form[:rear_downforce]} + type="text" + label="Rear Downforce" + inputmode="numeric" + />
-
+
+
<.button type="submit">Calculate
-
front: <%= Float.round(@front_frequency, 2) %> Hz
-
rear: <%= Float.round(@rear_frequency, 2) %> Hz
-
ratio: <%= Float.round(@ratio, 2) %>
- -
with downforce
- -
front: <%= Float.round(@front_with_downforce, 2) %> Hz
-
rear: <%= Float.round(@rear_with_downforce, 2) %> Hz
-
ratio: <%= Float.round(@ratio_with_downforce, 2) %>
-
-

All units are metric.

-

- Suspension frequencies are a good starting point but the best spring rate will not come from a calculator. -

-

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.

-

To start, try 2.0 Hz in front and 2.2 Hz in rear.

+
+
+
+
Without Downforce
+
Front: <%= Float.round(@front_frequency, 2) %> Hz
+
Rear: <%= Float.round(@rear_frequency, 2) %> Hz
+
Ratio: <%= Float.round(@ratio, 2) %>
+
With Downforce
+
Front: <%= Float.round(@front_with_downforce, 2) %> Hz
+
Rear: <%= Float.round(@rear_with_downforce, 2) %> Hz
+
Ratio: <%= Float.round(@ratio_with_downforce, 2) %>