style improvements and fixes

This commit is contained in:
Adam Piontek 2021-03-03 08:15:14 -05:00
parent ef7b8e0bb8
commit 0869d6a58c
21 changed files with 57 additions and 35 deletions

View file

@ -15,3 +15,13 @@
/* Navbar toggler icon override */ /* Navbar toggler icon override */
@import "nav-burger"; @import "nav-burger";
/* extra */
.was-validated .no-valid-style .form-check-input:valid,
.form-check-input.is-valid {
border-color: inherit !important;
}
.was-validated .no-valid-style .form-check-input:valid ~ .form-check-label,
.no-valid-style .form-check-input.is-valid ~ .form-check-label {
color: inherit !important;
}

View file

@ -1,7 +1,6 @@
defmodule Bones73kWeb.UserAuth do defmodule Bones73kWeb.UserAuth do
import Plug.Conn import Plug.Conn
import Phoenix.Controller import Phoenix.Controller
import Phoenix.HTML
alias Bones73k.Accounts alias Bones73k.Accounts
alias Bones73kWeb.Router.Helpers, as: Routes alias Bones73kWeb.Router.Helpers, as: Routes

View file

@ -1,4 +1,4 @@
<h1>Listing Properties</h1> <h2>Listing Properties</h2>
<%= if @live_action in [:new, :edit] do %> <%= if @live_action in [:new, :edit] do %>
<%= live_modal @socket, Bones73kWeb.PropertyLive.FormComponent, <%= live_modal @socket, Bones73kWeb.PropertyLive.FormComponent,
@ -10,12 +10,12 @@
return_to: Routes.property_index_path(@socket, :index) %> return_to: Routes.property_index_path(@socket, :index) %>
<% end %> <% end %>
<table> <table class="table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th scope="col">Name</th>
<th>Price</th> <th scope="col">Price</th>
<th>Description</th> <th scope="col">Description</th>
<th></th> <th></th>
</tr> </tr>

View file

@ -1,10 +1,10 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 "> <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
<h3> <h2>
<%= icon_div @socket, "bi-person-plus", [class: "icon baseline"] %> <%= icon_div @socket, "bi-person-plus", [class: "icon baseline"] %>
Register Register
</h3> </h2>
<p class="lead">Registration gains additional features, like remembering your song request history.</p> <p class="lead">Registration gains additional features, like remembering your song request history.</p>
<%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "reg_form"], fn f -> %> <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "reg_form"], fn f -> %>

View file

@ -1,10 +1,10 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 "> <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
<h3> <h2>
<%= icon_div @socket, "bi-shield-lock", [class: "icon baseline"] %> <%= icon_div @socket, "bi-shield-lock", [class: "icon baseline"] %>
Reset password Reset password
</h3> </h2>
<p class="lead">Hi <%= @user.email %> &mdash; What new word of passage will confirm you are who you say you are?</p> <p class="lead">Hi <%= @user.email %> &mdash; What new word of passage will confirm you are who you say you are?</p>
<%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "pw_reset_form"], fn f -> %> <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "pw_reset_form"], fn f -> %>

View file

@ -1,7 +1,7 @@
<h3 class="mb-3"> <h2 class="mb-3">
<%= icon_div @socket, "bi-sliders", [class: "icon baseline"] %> <%= icon_div @socket, "bi-sliders", [class: "icon baseline"] %>
User Settings User Settings
</h3> </h2>
<div class="row"> <div class="row">
<%= live_component @socket, Bones73kWeb.UserLive.Settings.Email, id: "email-#{@current_user.id}", current_user: @current_user %> <%= live_component @socket, Bones73kWeb.UserLive.Settings.Email, id: "email-#{@current_user.id}", current_user: @current_user %>

View file

@ -1,6 +1,6 @@
<div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4 mt-1"> <div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4 mt-1">
<h4>Change email</h4> <h3>Change email</h3>
<%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %> <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %>

View file

@ -1,6 +1,6 @@
<div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4 mt-1"> <div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4 mt-1">
<h4>Change password</h4> <h3>Change password</h3>
<%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %> <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %>

View file

@ -11,7 +11,7 @@ defmodule Bones73kWeb.UserDashboardLive do
def render(assigns) do def render(assigns) do
~L""" ~L"""
<section class="phx-hero"> <section class="phx-hero">
<h1>Welcome to the user dashboard!</h1> <h2>Welcome to the user dashboard!</h2>
</section> </section>
""" """
end end

View file

@ -1,10 +1,12 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4"> <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
<div class="container"> <div class="container">
<%= link to: Routes.page_path(@conn, :index), class: "navbar-brand py-0 fs-4" do %> <h1 class="fs-4 my-0 py-0 lh-base">
<%= link to: Routes.page_path(@conn, :index), class: "navbar-brand fs-4" do %>
<%= icon_div @conn, "mdi-skull-crossbones", [class: "icon baseline fs-3"] %> <%= icon_div @conn, "mdi-skull-crossbones", [class: "icon baseline fs-3"] %>
<span class="fw-light">Bones73k</span> <span class="fw-light">Bones73k</span>
<% end %> <% end %>
</h1>
<button class="hamburger hamburger--squeeze collapsed navbar-toggler" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="hamburger hamburger--squeeze collapsed navbar-toggler" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="hamburger-box d-flex"> <span class="hamburger-box d-flex">

View file

@ -1,10 +1,10 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 "> <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
<h3> <h2>
<%= icon_div @conn, "bi-arrow-repeat", [class: "icon baseline"] %> <%= icon_div @conn, "bi-arrow-repeat", [class: "icon baseline"] %>
Resend confirmation instructions Resend confirmation instructions
</h3> </h2>
<p class="lead">We'll send you another email with instructions to confirm your email address.</p> <p class="lead">We'll send you another email with instructions to confirm your email address.</p>
<%= form_for :user, Routes.user_confirmation_path(@conn, :create), [class: "needs-validation", novalidate: true], fn f -> %> <%= form_for :user, Routes.user_confirmation_path(@conn, :create), [class: "needs-validation", novalidate: true], fn f -> %>

View file

@ -1,10 +1,10 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 "> <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
<h3> <h2>
<%= icon_div @conn, "mdi-head-question-outline", [class: "icon baseline"] %> <%= icon_div @conn, "mdi-head-question-outline", [class: "icon baseline"] %>
Forgot your password? Forgot your password?
</h3> </h2>
<p class="lead">We'll send you an email with instructions to reset your password.</p> <p class="lead">We'll send you an email with instructions to reset your password.</p>
<%= form_for :user, Routes.user_reset_password_path(@conn, :create), [class: "needs-validation", novalidate: true], fn f -> %> <%= form_for :user, Routes.user_reset_password_path(@conn, :create), [class: "needs-validation", novalidate: true], fn f -> %>

View file

@ -1,10 +1,10 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 "> <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
<h3> <h2>
<%= icon_div @conn, "bi-door-open", [class: "icon baseline"] %> <%= icon_div @conn, "bi-door-open", [class: "icon baseline"] %>
Log in Log in
</h3> </h2>
<p class="lead">Who goes there?</p> <p class="lead">Who goes there?</p>
<%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user, class: "needs-validation", novalidate: true], fn f -> %> <%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user, class: "needs-validation", novalidate: true], fn f -> %>
@ -41,7 +41,7 @@
<span class="invalid-feedback">password is required</span> <span class="invalid-feedback">password is required</span>
</div> </div>
<div class="form-check mb-3"> <div class="form-check mb-3 no-valid-style">
<%= checkbox f, :remember_me, class: "form-check-input" %> <%= checkbox f, :remember_me, class: "form-check-input" %>
<%= label f, :remember_me, "Keep me logged in for 60 days", class: "form-check-label" %> <%= label f, :remember_me, "Keep me logged in for 60 days", class: "form-check-label" %>
</div> </div>

View file

@ -13,6 +13,8 @@ defmodule Bones73kWeb.IconHelpers do
end end
def icon_svg(conn, name, opts \\ []) do def icon_svg(conn, name, opts \\ []) do
opts = aria_hidden?(opts)
content_tag(:svg, tag_opts(name, opts)) do content_tag(:svg, tag_opts(name, opts)) do
tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg##{name}")) tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg##{name}"))
end end
@ -21,4 +23,13 @@ defmodule Bones73kWeb.IconHelpers do
defp tag_opts(name, opts) do defp tag_opts(name, opts) do
Keyword.update(opts, :class, name, fn c -> "#{c} #{name}" end) Keyword.update(opts, :class, name, fn c -> "#{c} #{name}" end)
end end
defp aria_hidden?(opts) do
case Keyword.get(opts, :aria_hidden) do
"false" -> Keyword.drop(opts, [:aria_hidden])
false -> Keyword.drop(opts, [:aria_hidden])
"true" -> opts
_ -> Keyword.put(opts, :aria_hidden, "true")
end
end
end end

View file

@ -13,7 +13,7 @@ defmodule Bones73kWeb.UserConfirmationControllerTest do
test "renders the confirmation page", %{conn: conn} do test "renders the confirmation page", %{conn: conn} do
conn = get(conn, Routes.user_confirmation_path(conn, :new)) conn = get(conn, Routes.user_confirmation_path(conn, :new))
response = html_response(conn, 200) response = html_response(conn, 200)
assert response =~ "Resend confirmation instructions\n </h3>" assert response =~ "Resend confirmation instructions\n </h2>"
end end
end end

View file

@ -7,7 +7,7 @@ defmodule Bones73kWeb.UserRegistrationControllerTest do
test "renders registration page", %{conn: conn} do test "renders registration page", %{conn: conn} do
conn = get(conn, Routes.user_registration_path(conn, :new)) conn = get(conn, Routes.user_registration_path(conn, :new))
response = html_response(conn, 200) response = html_response(conn, 200)
assert response =~ "Register\n </h3>" assert response =~ "Register\n </h2>"
assert response =~ "Log in\n</a>" assert response =~ "Log in\n</a>"
assert response =~ "Register\n</a>" assert response =~ "Register\n</a>"
end end

View file

@ -13,7 +13,7 @@ defmodule Bones73kWeb.UserResetPasswordControllerTest do
test "renders the reset password page", %{conn: conn} do test "renders the reset password page", %{conn: conn} do
conn = get(conn, Routes.user_reset_password_path(conn, :new)) conn = get(conn, Routes.user_reset_password_path(conn, :new))
response = html_response(conn, 200) response = html_response(conn, 200)
assert response =~ "Forgot your password?\n </h3>" assert response =~ "Forgot your password?\n </h2>"
end end
test "redirects if already logged in", %{conn: conn} do test "redirects if already logged in", %{conn: conn} do
@ -61,7 +61,7 @@ defmodule Bones73kWeb.UserResetPasswordControllerTest do
test "renders reset password with user_id in session", %{conn: conn, token: token, user: user} do test "renders reset password with user_id in session", %{conn: conn, token: token, user: user} do
conn = get(conn, Routes.user_reset_password_path(conn, :edit, token)) conn = get(conn, Routes.user_reset_password_path(conn, :edit, token))
assert get_session(conn, "user_id") == user.id assert get_session(conn, "user_id") == user.id
assert html_response(conn, 200) =~ "Reset password\n </h3>" assert html_response(conn, 200) =~ "Reset password\n </h2>"
end end
test "does not render reset password with invalid token", %{conn: conn} do test "does not render reset password with invalid token", %{conn: conn} do

View file

@ -11,7 +11,7 @@ defmodule Bones73kWeb.UserSessionControllerTest do
test "renders log in page", %{conn: conn} do test "renders log in page", %{conn: conn} do
conn = get(conn, Routes.user_session_path(conn, :new)) conn = get(conn, Routes.user_session_path(conn, :new))
response = html_response(conn, 200) response = html_response(conn, 200)
assert response =~ "\n Log in\n </h3>" assert response =~ "\n Log in\n </h2>"
assert response =~ "Register\n</a>" assert response =~ "Register\n</a>"
assert response =~ "Log in\n</a>" assert response =~ "Log in\n</a>"
end end
@ -61,7 +61,7 @@ defmodule Bones73kWeb.UserSessionControllerTest do
}) })
response = html_response(conn, 200) response = html_response(conn, 200)
assert response =~ "\n Log in\n </h3>" assert response =~ "\n Log in\n </h2>"
assert response =~ "Invalid email or password" assert response =~ "Invalid email or password"
end end
end end
@ -108,7 +108,7 @@ defmodule Bones73kWeb.UserSessionControllerTest do
}) })
response = html_response(conn, 200) response = html_response(conn, 200)
assert response =~ "\n Log in\n </h3>" assert response =~ "\n Log in\n </h2>"
assert response =~ "Invalid email or password" assert response =~ "Invalid email or password"
end end
end end

View file

@ -10,7 +10,7 @@ defmodule Bones73kWeb.UserSettingsControllerTest do
test "renders settings page", %{conn: conn} do test "renders settings page", %{conn: conn} do
conn = get(conn, Routes.user_settings_path(conn, :edit)) conn = get(conn, Routes.user_settings_path(conn, :edit))
response = html_response(conn, 200) response = html_response(conn, 200)
assert response =~ "User Settings\n</h3>" assert response =~ "User Settings\n</h2>"
end end
test "redirects if user is not logged in" do test "redirects if user is not logged in" do

View file

@ -17,7 +17,7 @@ defmodule Bones73kWeb.UserLive.RegistrationTest do
test "displays registration form", %{conn: conn} do test "displays registration form", %{conn: conn} do
{:ok, _view, html} = live_isolated(conn, Bones73kWeb.UserLive.Registration) {:ok, _view, html} = live_isolated(conn, Bones73kWeb.UserLive.Registration)
assert html =~ "Register\n </h3>" assert html =~ "Register\n </h2>"
assert html =~ "Email</label>" assert html =~ "Email</label>"
end end
@ -29,7 +29,7 @@ defmodule Bones73kWeb.UserLive.RegistrationTest do
|> form("#reg_form", %{"user" => %{"email" => "abc", "password" => "abc"}}) |> form("#reg_form", %{"user" => %{"email" => "abc", "password" => "abc"}})
|> render_change() |> render_change()
assert html =~ "Register\n </h3>" assert html =~ "Register\n </h2>"
assert html =~ "must be a valid email address" assert html =~ "must be a valid email address"
assert html =~ "should be at least #{User.min_password()} character(s)" assert html =~ "should be at least #{User.min_password()} character(s)"
assert html =~ "type=\"submit\" disabled=\"disabled\"" assert html =~ "type=\"submit\" disabled=\"disabled\""

View file

@ -17,7 +17,7 @@ defmodule Bones73kWeb.UserLive.ResetPasswordTest do
test "displays registration form", %{conn: conn, user: user} do test "displays registration form", %{conn: conn, user: user} do
{:ok, _view, html} = live_isolated(conn, Bones73kWeb.UserLive.ResetPassword) {:ok, _view, html} = live_isolated(conn, Bones73kWeb.UserLive.ResetPassword)
assert html =~ "Reset password\n </h3>" assert html =~ "Reset password\n </h2>"
assert html =~ user.email assert html =~ user.email
assert html =~ "New password</label>" assert html =~ "New password</label>"
end end
@ -28,7 +28,7 @@ defmodule Bones73kWeb.UserLive.ResetPasswordTest do
form_data = %{"user" => %{"password" => "abc", "password_confirmation" => "def"}} form_data = %{"user" => %{"password" => "abc", "password_confirmation" => "def"}}
html = form(view, "#pw_reset_form", form_data) |> render_change() html = form(view, "#pw_reset_form", form_data) |> render_change()
assert html =~ "Reset password\n </h3>" assert html =~ "Reset password\n </h2>"
assert html =~ "should be at least #{User.min_password()} character(s)" assert html =~ "should be at least #{User.min_password()} character(s)"
assert html =~ "does not match password" assert html =~ "does not match password"
assert html =~ "type=\"submit\" disabled=\"disabled\"" assert html =~ "type=\"submit\" disabled=\"disabled\""