From 2b8a6a1927c1a77b83509f675e53e17d3fa319a8 Mon Sep 17 00:00:00 2001 From: Matthew Dillon Date: Tue, 16 Jun 2020 20:29:19 -0700 Subject: [PATCH] NEW: styling (#5) --- assets/css/app.scss | 2 + assets/js/app.js | 14 ++++ assets/package-lock.json | 5 ++ assets/package.json | 1 + lib/planner_web/live/landing_live.ex | 57 +++------------- lib/planner_web/templates/layout/app.html.eex | 14 +++- .../templates/layout/live.html.leex | 22 ++++--- .../templates/layout/root.html.leex | 37 ++++++----- .../user_reset_password/edit.html.eex | 26 +++++--- .../user_reset_password/new.html.eex | 12 ++-- .../templates/user_session/new.html.eex | 35 +++++++--- .../templates/user_settings/edit.html.eex | 66 ++++++++++++------- lib/planner_web/views/error_helpers.ex | 2 +- 13 files changed, 175 insertions(+), 118 deletions(-) diff --git a/assets/css/app.scss b/assets/css/app.scss index e69de29..ca39025 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -0,0 +1,2 @@ +@import "bulma/bulma.sass"; + diff --git a/assets/js/app.js b/assets/js/app.js index 296541d..36a0a18 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -29,3 +29,17 @@ liveSocket.connect() // Call disableLatencySim() to disable: // >> liveSocket.disableLatencySim() window.liveSocket = liveSocket + +document.addEventListener('DOMContentLoaded', () => { + const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); + if ($navbarBurgers.length > 0) { + $navbarBurgers.forEach( el => { + el.addEventListener('click', () => { + const target = el.dataset.target; + const $target = document.getElementById(target); + el.classList.toggle('is-active'); + $target.classList.toggle('is-active'); + }); + }); + } +}); diff --git a/assets/package-lock.json b/assets/package-lock.json index 297f510..5dd70cb 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -1768,6 +1768,11 @@ "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=", "dev": true }, + "bulma": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.0.tgz", + "integrity": "sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ==" + }, "cacache": { "version": "12.0.4", "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz", diff --git a/assets/package.json b/assets/package.json index 5235a74..5ede3a0 100644 --- a/assets/package.json +++ b/assets/package.json @@ -7,6 +7,7 @@ "watch": "webpack --mode development --watch" }, "dependencies": { + "bulma": "^0.9.0", "phoenix": "file:../deps/phoenix", "phoenix_html": "file:../deps/phoenix_html", "phoenix_live_view": "file:../deps/phoenix_live_view" diff --git a/lib/planner_web/live/landing_live.ex b/lib/planner_web/live/landing_live.ex index 04e0e74..6684198 100644 --- a/lib/planner_web/live/landing_live.ex +++ b/lib/planner_web/live/landing_live.ex @@ -10,51 +10,32 @@ defmodule PlannerWeb.LandingLive do def mount(_params, _session, socket) do socket = socket - # |> put_flash(:info, "hello world") |> assign(:new_task_changeset, Tasks.change_task(%Task{})) - |> assign(:tasks, Tasks.list_unfinished_tasks()) {:ok, socket} end def render(assigns) do ~L""" +
<%= f = form_for(@new_task_changeset, "#", [phx_submit: :save_new_task]) %> - <%= label f, :value, "New Task" %> - <%= text_input f, :value %> - <%= error_tag f, :value %> - - <%= submit "Create" %> +
+
+ <%= text_input f, :value, placeholder: "add new task", class: "input" %> +
+ <%= error_tag f, :value %> +
- -
- - - - - - - - - <%= for task <- @tasks do %> - - - - - - <% end %> - -
tasks
<%= task.value %>
+
""" end def handle_event("save_new_task", %{"task" => task_params}, socket) do case Tasks.add_task(task_params) do - {:ok, task} -> + {:ok, _task} -> {:noreply, socket - |> put_flash(:info, "task created") - |> assign(:tasks, Tasks.list_unfinished_tasks())} + |> put_flash(:info, "task created")} {:error, %Ecto.Changeset{} = changeset} -> {:noreply, @@ -62,22 +43,4 @@ defmodule PlannerWeb.LandingLive do |> assign(new_task_changeset: changeset)} end end - - def handle_event("delete_task", %{"task_id" => task_id}, socket) do - Tasks.delete_task_by_id!(task_id) - - {:noreply, - socket - |> put_flash(:info, "task deleted") - |> assign(:tasks, Tasks.list_unfinished_tasks())} - end - - def handle_event("finish_task", %{"task_id" => task_id}, socket) do - Tasks.finish_task_by_id!(task_id) - - {:noreply, - socket - |> put_flash(:info, "task completed") - |> assign(:tasks, Tasks.list_unfinished_tasks())} - end end diff --git a/lib/planner_web/templates/layout/app.html.eex b/lib/planner_web/templates/layout/app.html.eex index 09ffdad..cf5e232 100644 --- a/lib/planner_web/templates/layout/app.html.eex +++ b/lib/planner_web/templates/layout/app.html.eex @@ -1,5 +1,15 @@
- - + <%= if not is_nil(get_flash(@conn, :info)) do %> + + <% end %> + + <%= if not is_nil(get_flash(@conn, :error)) do %> + + <% end %> + <%= @inner_content %>
diff --git a/lib/planner_web/templates/layout/live.html.leex b/lib/planner_web/templates/layout/live.html.leex index 8dcded5..49376da 100644 --- a/lib/planner_web/templates/layout/live.html.leex +++ b/lib/planner_web/templates/layout/live.html.leex @@ -1,11 +1,17 @@ -
- +
+
+ <%= if live_flash(@flash, :info) do %> + + <% end %> - + <%= if live_flash(@flash, :error) do %> + + <% end %> - <%= @inner_content %> + <%= @inner_content %> +
diff --git a/lib/planner_web/templates/layout/root.html.leex b/lib/planner_web/templates/layout/root.html.leex index 2fa383a..11caa9b 100644 --- a/lib/planner_web/templates/layout/root.html.leex +++ b/lib/planner_web/templates/layout/root.html.leex @@ -2,27 +2,34 @@ - - - Planner + + planner "/> <%= csrf_meta_tag() %> -

Planner

- + + <%= @inner_content %> diff --git a/lib/planner_web/templates/user_reset_password/edit.html.eex b/lib/planner_web/templates/user_reset_password/edit.html.eex index 62e562c..e30af2f 100644 --- a/lib/planner_web/templates/user_reset_password/edit.html.eex +++ b/lib/planner_web/templates/user_reset_password/edit.html.eex @@ -1,22 +1,30 @@ -

Reset password

+

Reset password

<%= form_for @changeset, Routes.user_reset_password_path(@conn, :update, @token), fn f -> %> <%= if @changeset.action do %> -
+

Oops, something went wrong! Please check the errors below.

<% end %> - <%= label f, :password, "New password" %> - <%= password_input f, :password, required: true %> - <%= error_tag f, :password %> +
+ <%= label f, :password, "New password", class: "label" %> +
+ <%= password_input f, :password, required: true, class: "input" %> +
+ <%= error_tag f, :password %> +
- <%= label f, :password_confirmation, "Confirm new password" %> - <%= password_input f, :password_confirmation, required: true %> - <%= error_tag f, :password_confirmation %> +
+ <%= label f, :password_confirmation, "Confirm new password", class: "label" %> +
+ <%= password_input f, :password_confirmation, required: true, class: "input" %> +
+ <%= error_tag f, :password_confirmation %> +
- <%= submit "Reset password" %> + <%= submit "Reset password", class: "button is-primary" %>
<% end %> diff --git a/lib/planner_web/templates/user_reset_password/new.html.eex b/lib/planner_web/templates/user_reset_password/new.html.eex index ab60a29..c13dffd 100644 --- a/lib/planner_web/templates/user_reset_password/new.html.eex +++ b/lib/planner_web/templates/user_reset_password/new.html.eex @@ -1,11 +1,15 @@ -

Forgot your password?

+

Forgot your password?

<%= form_for :user, Routes.user_reset_password_path(@conn, :create), fn f -> %> - <%= label f, :email %> - <%= text_input f, :email, required: true %> +
+ <%= label f, :email, class: "label" %> +
+ <%= text_input f, :email, required: true, class: "input" %> +
+
- <%= submit "Send instructions to reset password" %> + <%= submit "Send instructions to reset password", class: "button is-primary" %>
<% end %> diff --git a/lib/planner_web/templates/user_session/new.html.eex b/lib/planner_web/templates/user_session/new.html.eex index 57c69a9..602f86a 100644 --- a/lib/planner_web/templates/user_session/new.html.eex +++ b/lib/planner_web/templates/user_session/new.html.eex @@ -1,23 +1,38 @@ -

Login

+

Login

<%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user], fn f -> %> <%= if @error_message do %> -
+ +

<%= @error_message %>

<% end %> - <%= label f, :email %> - <%= text_input f, :email, required: true %> +
+ <%= label f, :email, class: "label" %> +
+ <%= text_input f, :email, required: true, class: "input" %> +
+
- <%= label f, :password %> - <%= password_input f, :password, required: true %> +
+ <%= label f, :password, class: "label" %> +
+ <%= password_input f, :password, required: true, class: "input" %> +
+
- <%= label f, :remember_me, "Keep me logged in for 60 days" %> - <%= checkbox f, :remember_me %> +
+
+ <%= label class: "checkbox" do %> + Keep me logged in for 60 days + <%= checkbox f, :remember_me %> + <% end %> +
+
-
- <%= submit "Login" %> +
+ <%= submit "Login", class: "button is-link" %>
<% end %> diff --git a/lib/planner_web/templates/user_settings/edit.html.eex b/lib/planner_web/templates/user_settings/edit.html.eex index f4dc065..70a33d3 100644 --- a/lib/planner_web/templates/user_settings/edit.html.eex +++ b/lib/planner_web/templates/user_settings/edit.html.eex @@ -1,49 +1,71 @@ -

Settings

+

Settings

-

Change e-mail

+

Change e-mail

<%= form_for @email_changeset, Routes.user_settings_path(@conn, :update_email), fn f -> %> <%= if @email_changeset.action do %> -
+

Oops, something went wrong! Please check the errors below.

<% end %> - <%= label f, :email %> - <%= text_input f, :email, required: true %> - <%= error_tag f, :email %> +
+ <%= label f, :email, class: "label" %> +
+ <%= text_input f, :email, required: true, class: "input" %> +
+ <%= error_tag f, :email %> + - <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email" %> - <%= error_tag f, :current_password %> +
+ <%= label f, :current_password, for: "current_password_for_email", class: "label" %> +
+ <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email", class: "input" %> +
+ <%= error_tag f, :current_password %> +
- <%= submit "Change e-mail" %> + <%= submit "Change e-mail", class: "button is-primary" %>
<% end %> -

Change password

+
+ +

Change password

<%= form_for @password_changeset, Routes.user_settings_path(@conn, :update_password), fn f -> %> <%= if @password_changeset.action do %> -
+

Oops, something went wrong! Please check the errors below.

<% end %> - <%= label f, :password, "New password" %> - <%= password_input f, :password, required: true %> - <%= error_tag f, :password %> +
+ <%= label f, :password, "New password", class: "label" %> +
+ <%= password_input f, :password, required: true, class: "input" %> +
+ <%= error_tag f, :password %> +
- <%= label f, :password_confirmation, "Confirm new password" %> - <%= password_input f, :password_confirmation, required: true %> - <%= error_tag f, :password_confirmation %> +
+ <%= label f, :password_confirmation, "Confirm new password", class: "label" %> +
+ <%= password_input f, :password_confirmation, required: true, class: "input" %> +
+ <%= error_tag f, :password_confirmation %> +
- <%= label f, :current_password, for: "current_password_for_password" %> - <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password" %> - <%= error_tag f, :current_password %> +
+ <%= label f, :current_password, for: "current_password_for_password", class: "label" %> +
+ <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password", class: "input" %> +
+ <%= error_tag f, :current_password %> +
- <%= submit "Change password" %> + <%= submit "Change password", class: "button is-primary" %>
<% end %> diff --git a/lib/planner_web/views/error_helpers.ex b/lib/planner_web/views/error_helpers.ex index 715d66d..c342389 100644 --- a/lib/planner_web/views/error_helpers.ex +++ b/lib/planner_web/views/error_helpers.ex @@ -11,7 +11,7 @@ defmodule PlannerWeb.ErrorHelpers do def error_tag(form, field) do Enum.map(Keyword.get_values(form.errors, field), fn error -> content_tag(:span, translate_error(error), - class: "invalid-feedback", + class: "help is-danger", phx_feedback_for: input_id(form, field) ) end)