From d6e409065011efafaabb3eb81a520cef1d22873e Mon Sep 17 00:00:00 2001 From: shibao Date: Tue, 15 Feb 2022 23:52:44 -0500 Subject: [PATCH] make app responsive --- assets/css/components.scss | 6 + config/runtime.exs | 3 +- .../add_shot_group_component.html.heex | 2 +- lib/cannery_web/components/invite_card.ex | 7 +- .../move_ammo_group_component.html.heex | 3 +- lib/cannery_web/components/topbar.ex | 173 +++++++++--------- lib/cannery_web/components/user_card.ex | 2 +- .../ammo_group_live/form_component.html.heex | 2 +- .../live/ammo_group_live/index.html.heex | 11 +- .../live/ammo_group_live/show.html.heex | 10 +- .../ammo_type_live/form_component.html.heex | 2 +- .../live/ammo_type_live/index.html.heex | 5 +- .../add_tag_component.html.heex | 2 +- .../container_live/form_component.html.heex | 2 +- .../live/container_live/index.html.heex | 5 +- .../live/container_live/show.html.heex | 3 +- .../live/invite_live/form_component.html.heex | 2 +- .../live/invite_live/index.html.heex | 5 +- .../live/range_live/form_component.html.heex | 2 +- .../live/range_live/index.html.heex | 32 ++-- .../live/tag_live/form_component.ex | 2 +- lib/cannery_web/live/tag_live/index.html.heex | 5 +- .../templates/layout/app.html.heex | 4 +- .../templates/layout/live.html.heex | 4 +- .../templates/user_confirmation/new.html.heex | 39 ++-- .../templates/user_registration/new.html.heex | 51 +++--- .../user_reset_password/edit.html.heex | 49 +++-- .../user_reset_password/new.html.heex | 39 ++-- .../templates/user_session/new.html.heex | 55 +++--- .../templates/user_settings/edit.html.heex | 128 ++++++------- lib/cannery_web/views/view_helpers.ex | 9 +- priv/gettext/actions.pot | 76 ++++---- priv/gettext/default.pot | 118 +++++++----- priv/gettext/errors.pot | 8 +- priv/gettext/prompts.pot | 26 +-- 35 files changed, 470 insertions(+), 422 deletions(-) diff --git a/assets/css/components.scss b/assets/css/components.scss index 073febbf..bdfdf247 100644 --- a/assets/css/components.scss +++ b/assets/css/components.scss @@ -17,6 +17,8 @@ -o-transform: scale(1.5); transform: scale(1.5); padding: 10px; + margin-left: auto; + margin-right: auto; } .title { @@ -45,6 +47,10 @@ @apply border border-primary-300 w-full max-w-2xl; } + .hr-light { + @apply border border-white w-full max-w-2xl; + } + .link { @apply hover:underline; @apply transition-colors duration-500 ease-in-out; diff --git a/config/runtime.exs b/config/runtime.exs index c677da6a..bced4378 100644 --- a/config/runtime.exs +++ b/config/runtime.exs @@ -12,8 +12,7 @@ if System.get_env("PHX_SERVER") && System.get_env("RELEASE_NAME") do config :cannery, CanneryWeb.Endpoint, server: true end -config :cannery, CanneryWeb.ViewHelpers, - shibao_mode: System.get_env("SHIBAO_MODE") == "true" +config :cannery, CanneryWeb.ViewHelpers, shibao_mode: System.get_env("SHIBAO_MODE") == "true" # Set locale Gettext.put_locale(System.get_env("LOCALE") || "en_US") diff --git a/lib/cannery_web/components/add_shot_group_component.html.heex b/lib/cannery_web/components/add_shot_group_component.html.heex index d079472a..dc4f9085 100644 --- a/lib/cannery_web/components/add_shot_group_component.html.heex +++ b/lib/cannery_web/components/add_shot_group_component.html.heex @@ -7,7 +7,7 @@ let={f} for={@changeset} id="shot-group-form" - class="grid grid-cols-3 justify-center items-center space-y-4" + class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-y-4" phx-target={@myself} phx-change="validate" phx-submit="save" diff --git a/lib/cannery_web/components/invite_card.ex b/lib/cannery_web/components/invite_card.ex index f293f887..ed8aac07 100644 --- a/lib/cannery_web/components/invite_card.ex +++ b/lib/cannery_web/components/invite_card.ex @@ -26,8 +26,11 @@ defmodule CanneryWeb.Components.InviteCard do <% end %> -
- <%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %> +
+ <%= Routes.user_registration_url(Endpoint, :new, invite: @invite.token) %> <%= if @code_actions do %> diff --git a/lib/cannery_web/components/move_ammo_group_component.html.heex b/lib/cannery_web/components/move_ammo_group_component.html.heex index 8796e984..0637c768 100644 --- a/lib/cannery_web/components/move_ammo_group_component.html.heex +++ b/lib/cannery_web/components/move_ammo_group_component.html.heex @@ -5,7 +5,8 @@ <%= if @containers |> Enum.empty?() do %>

- <%= gettext("No other containers") %> <%= display_emoji("😔") %> + <%= gettext("No other containers") %> + <%= display_emoji("😔") %>

<%= live_patch(dgettext("actions", "Add another container!"), diff --git a/lib/cannery_web/components/topbar.ex b/lib/cannery_web/components/topbar.ex index 36b043a0..a9ee062d 100644 --- a/lib/cannery_web/components/topbar.ex +++ b/lib/cannery_web/components/topbar.ex @@ -13,102 +13,105 @@ defmodule CanneryWeb.Components.Topbar do %{results: [], title_content: nil, flash: nil, current_user: nil} |> Map.merge(assigns) ~H""" -
-
+
  • + <%= link(dgettext("actions", "Log in"), + class: "hover:underline", + to: Routes.user_session_path(Endpoint, :new) + ) %> +
    • + <% end %> + +
    + """ end end diff --git a/lib/cannery_web/components/user_card.ex b/lib/cannery_web/components/user_card.ex index 6b3518ad..c44155fb 100644 --- a/lib/cannery_web/components/user_card.ex +++ b/lib/cannery_web/components/user_card.ex @@ -13,7 +13,7 @@ defmodule CanneryWeb.Components.UserCard do border border-gray-400 rounded-lg shadow-lg hover:shadow-md transition-all duration-300 ease-in-out" > -

    +

    <%= @user.email %>

    diff --git a/lib/cannery_web/live/ammo_group_live/form_component.html.heex b/lib/cannery_web/live/ammo_group_live/form_component.html.heex index 5baee65b..af9dce63 100644 --- a/lib/cannery_web/live/ammo_group_live/form_component.html.heex +++ b/lib/cannery_web/live/ammo_group_live/form_component.html.heex @@ -10,7 +10,7 @@ phx-target={@myself} phx-change="validate" phx-submit="save" - class="grid grid-cols-3 justify-center items-center space-y-4" + class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-y-4" > <%= if @changeset.action && not @changeset.valid? do %>
    diff --git a/lib/cannery_web/live/ammo_group_live/index.html.heex b/lib/cannery_web/live/ammo_group_live/index.html.heex index 2151d6cc..0c5b65de 100644 --- a/lib/cannery_web/live/ammo_group_live/index.html.heex +++ b/lib/cannery_web/live/ammo_group_live/index.html.heex @@ -1,11 +1,12 @@ -
    +

    <%= gettext("Ammo") %>

    <%= if @ammo_groups |> Enum.empty?() do %>

    - <%= gettext("No Ammo") %> <%= display_emoji("😔") %> + <%= gettext("No Ammo") %> + <%= display_emoji("😔") %>

    <%= live_patch(dgettext("actions", "Add your first box!"), @@ -35,7 +36,7 @@ <%= gettext("Notes") %> - <%= gettext("Staging") %> + <%= gettext("Staged for Range") %> <%= gettext("Container") %> @@ -75,7 +76,7 @@ phx-click="toggle_staged" phx-value-ammo_group_id={ammo_group.id} > - <%= if ammo_group.staged, do: gettext("Unstage from range"), else: gettext("Stage for range") %> + <%= if ammo_group.staged, do: gettext("Unstage"), else: gettext("Stage") %> @@ -88,7 +89,7 @@ <% end %> - +
    <%= live_redirect to: Routes.ammo_group_show_path(@socket, :show, ammo_group), class: "text-primary-500 link" do %> diff --git a/lib/cannery_web/live/ammo_group_live/show.html.heex b/lib/cannery_web/live/ammo_group_live/show.html.heex index 33c4525a..ae31e1ae 100644 --- a/lib/cannery_web/live/ammo_group_live/show.html.heex +++ b/lib/cannery_web/live/ammo_group_live/show.html.heex @@ -24,25 +24,25 @@ <% end %>
    -
    +
    <%= live_patch(dgettext("actions", "Ammo Details"), to: Routes.ammo_type_show_path(Endpoint, :show, @ammo_group.ammo_type), - class: "btn btn-primary" + class: "mx-4 my-2 btn btn-primary" ) %> <%= live_patch to: Routes.ammo_group_show_path(Endpoint, :edit, @ammo_group), - class: "text-primary-500 link" do %> + class: "mx-4 my-2 text-primary-500 link" do %> <% end %> <%= link to: "#", - class: "text-primary-500 link", + class: "mx-4 my-2 text-primary-500 link", phx_click: "delete", data: [confirm: dgettext("prompts", "Are you sure you want to delete this ammo?")] do %> <% end %> - diff --git a/lib/cannery_web/live/ammo_type_live/form_component.html.heex b/lib/cannery_web/live/ammo_type_live/form_component.html.heex index e1fce8a0..4d371f64 100644 --- a/lib/cannery_web/live/ammo_type_live/form_component.html.heex +++ b/lib/cannery_web/live/ammo_type_live/form_component.html.heex @@ -9,7 +9,7 @@ phx-target={@myself} phx-change="validate" phx-submit="save" - class="grid grid-cols-3 justify-center items-center space-y-4" + class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-y-4" > <%= if @changeset.action && not @changeset.valid? do %>
    diff --git a/lib/cannery_web/live/ammo_type_live/index.html.heex b/lib/cannery_web/live/ammo_type_live/index.html.heex index c5e5a2c5..666f334c 100644 --- a/lib/cannery_web/live/ammo_type_live/index.html.heex +++ b/lib/cannery_web/live/ammo_type_live/index.html.heex @@ -1,11 +1,12 @@ -
    +

    <%= gettext("Ammo Types") %>

    <%= if @ammo_types |> Enum.empty?() do %>

    - <%= gettext("No Ammo Types") %> <%= display_emoji("😔") %> + <%= gettext("No Ammo Types") %> + <%= display_emoji("😔") %>

    <%= live_patch(dgettext("actions", "Add your first type!"), diff --git a/lib/cannery_web/live/container_live/add_tag_component.html.heex b/lib/cannery_web/live/container_live/add_tag_component.html.heex index dfc1a328..56a44051 100644 --- a/lib/cannery_web/live/container_live/add_tag_component.html.heex +++ b/lib/cannery_web/live/container_live/add_tag_component.html.heex @@ -7,7 +7,7 @@ let={f} for={:tag} id="add-tag-to-container-form" - class="grid grid-cols-3 justify-center items-center space-x-2" + class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-x-2" phx-target={@myself} phx-submit="save" > diff --git a/lib/cannery_web/live/container_live/form_component.html.heex b/lib/cannery_web/live/container_live/form_component.html.heex index a51975d9..c947af34 100644 --- a/lib/cannery_web/live/container_live/form_component.html.heex +++ b/lib/cannery_web/live/container_live/form_component.html.heex @@ -6,7 +6,7 @@ let={f} for={@changeset} id="container-form" - class="grid grid-cols-3 justify-center items-center space-y-4" + class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-y-4" phx-target={@myself} phx-change="validate" phx-submit="save" diff --git a/lib/cannery_web/live/container_live/index.html.heex b/lib/cannery_web/live/container_live/index.html.heex index 8a5a92fd..40a3e904 100644 --- a/lib/cannery_web/live/container_live/index.html.heex +++ b/lib/cannery_web/live/container_live/index.html.heex @@ -5,7 +5,8 @@ <%= if @containers |> Enum.empty?() do %>

    - <%= gettext("No containers") %> <%= display_emoji("😔") %> + <%= gettext("No containers") %> + <%= display_emoji("😔") %>

    <%= live_patch(dgettext("actions", "Add your first container!"), @@ -19,7 +20,7 @@ ) %> <% end %> -
    +
    <%= for container <- @containers do %> <.container_card container={container}> <%= live_patch to: Routes.container_index_path(@socket, :edit, container), diff --git a/lib/cannery_web/live/container_live/show.html.heex b/lib/cannery_web/live/container_live/show.html.heex index d756a4bf..798ff7ca 100644 --- a/lib/cannery_web/live/container_live/show.html.heex +++ b/lib/cannery_web/live/container_live/show.html.heex @@ -44,7 +44,8 @@ <%= if @container.tags |> Enum.empty?() do %>

    - <%= gettext("No tags for this container") %> <%= display_emoji("😔") %> + <%= gettext("No tags for this container") %> + <%= display_emoji("😔") %>

    <%= live_patch(dgettext("actions", "Why not add one?"), diff --git a/lib/cannery_web/live/invite_live/form_component.html.heex b/lib/cannery_web/live/invite_live/form_component.html.heex index 97f228ec..c3c719ea 100644 --- a/lib/cannery_web/live/invite_live/form_component.html.heex +++ b/lib/cannery_web/live/invite_live/form_component.html.heex @@ -6,7 +6,7 @@ let={f} for={@changeset} id="invite-form" - class="grid grid-cols-3 justify-center items-center space-y-4" + class="flex flex-col sm:grid sm:grid-cols-3 justify-center items-center space-y-4" phx-target={@myself} phx-change="validate" phx-submit="save" diff --git a/lib/cannery_web/live/invite_live/index.html.heex b/lib/cannery_web/live/invite_live/index.html.heex index 28519c7d..cc7c3b30 100644 --- a/lib/cannery_web/live/invite_live/index.html.heex +++ b/lib/cannery_web/live/invite_live/index.html.heex @@ -5,7 +5,8 @@ <%= if @invites |> Enum.empty?() do %>

    - <%= gettext("No invites") %> <%= display_emoji("😔") %> + <%= gettext("No invites") %> + <%= display_emoji("😔") %>

    <%= live_patch(dgettext("actions", "Invite someone new!"), @@ -26,7 +27,7 @@