NEW: styling (#5)

assets/css/app.scss

@@ -0,0 +1,2 @@
+@import "bulma/bulma.sass";
+

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');
+        });
+      });
+    }
+});

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",

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"

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"""
+    <div class="box">
     <%= f = form_for(@new_task_changeset, "#", [phx_submit: :save_new_task]) %>
-      <%= label f, :value, "New Task" %>
-      <%= text_input f, :value %>
+      <div class="field">
+        <div class="control">
+          <%= text_input f, :value, placeholder: "add new task", class: "input" %>
+        </div>
         <%= error_tag f, :value %>
-
-      <%= submit "Create" %>
+      </div>
     </form>
-
-    <hr>
-
-    <table>
-      <thead>
-        <tr>
-          <th colspan="3">tasks</th>
-        </tr>
-      </thead>
-      <tbody>
-        <%= for task <- @tasks do %>
-          <tr>
-            <td><%= task.value %></td>
-            <td><button phx-click="delete_task" phx-value-task_id="<%= task.id %>">delete</button></td>
-            <td><button phx-click="finish_task" phx-value-task_id="<%= task.id %>">done</button></td>
-          </tr>
-        <% end %>
-      </tbody>
-    </table>
+    </div>
     """
   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

lib/planner_web/templates/layout/app.html.eex

@@ -1,5 +1,15 @@
 <main role="main" class="container">
-  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+  <%= if not is_nil(get_flash(@conn, :info)) do %>
+    <p class="notification is-info" role="alert">
+      <%= get_flash(@conn, :info) %>
+    </p>
+  <% end %>
+
+  <%= if not is_nil(get_flash(@conn, :error)) do %>
+    <p class="notification is-danger" role="alert">
+      <%= get_flash(@conn, :error) %>
+    </p>
+  <% end %>
+
   <%= @inner_content %>
 </main>

lib/planner_web/templates/layout/live.html.leex

@@ -1,11 +1,17 @@
-<main role="main" class="container">
+<section class="section">
+  <div class="container">
+    <%= if live_flash(@flash, :info) do %>
     <p class="alert alert-info" role="alert"
       phx-click="lv:clear-flash"
       phx-value-key="info"><%= live_flash(@flash, :info) %></p>
+    <% end %>
 
+    <%= if live_flash(@flash, :error) do %>
     <p class="alert alert-danger" role="alert"
       phx-click="lv:clear-flash"
       phx-value-key="error"><%= live_flash(@flash, :error) %></p>
+    <% end %>
 
     <%= @inner_content %>
+  </div>
 </main>

lib/planner_web/templates/layout/root.html.leex

@@ -2,27 +2,34 @@
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>Planner</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>planner</title>
     <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
     <%= csrf_meta_tag() %>
     <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
   </head>
   <body>
-    <h1>Planner</h1>
-    <ul>
-    <%= if @current_user do %>
-      <li><%= @current_user.email %></li>
-      <li><%= link "Settings", to: Routes.user_settings_path(@conn, :edit) %></li>
-      <li><%= link "Logout", to: Routes.user_session_path(@conn, :delete), method: :delete %></li>
-    <% else %>
-      <li><%= link "Login", to: Routes.user_session_path(@conn, :new) %></li>
-    <% end %>
-    </ul>
+    <nav class="navbar is-dark" role="navigation">
+      <div class="navbar-brand">
+        <%= link "planner", to: Routes.landing_path(@conn, :index), class: "navbar-item has-text-weight-bold hast-text-info-light" %>
 
-    <hr>
+        <a role="button" class="navbar-burger burger" data-target="nvbr">
+          <span></span>
+          <span></span>
+          <span></span>
+        </a>
+      </div>
 
+      <div id="nvbr" class="navbar-menu">
+        <div class="navbar-start">
+          <%= link "tasks", to: Routes.landing_path(@conn, :index), class: "navbar-item" %>
+        </div>
+
+        <div class="navbar-end">
+          <%= link "log out", to: Routes.user_session_path(@conn, :delete), method: :delete, class: "navbar-item" %>
+        </div>
+      </div>
+    </nav>
    <%= @inner_content %>
   </body>
 </html>

lib/planner_web/templates/user_reset_password/edit.html.eex

@@ -1,22 +1,30 @@
-<h1>Reset password</h1>
+<h1 class="title is-1">Reset password</h1>
 
 <%= form_for @changeset, Routes.user_reset_password_path(@conn, :update, @token), fn f -> %>
   <%= if @changeset.action do %>
-    <div class="alert alert-danger">
+    <div class="help is-danger">
       <p>Oops, something went wrong! Please check the errors below.</p>
     </div>
   <% end %>
 
-  <%= label f, :password, "New password" %>
-  <%= password_input f, :password, required: true %>
+  <div class="field">
+    <%= label f, :password, "New password", class: "label" %>
+    <div class="control">
+      <%= password_input f, :password, required: true, class: "input" %>
+    </div>
     <%= error_tag f, :password %>
+  </div>
 
-  <%= label f, :password_confirmation, "Confirm new password" %>
-  <%= password_input f, :password_confirmation, required: true %>
+  <div class="field">
+    <%= label f, :password_confirmation, "Confirm new password", class: "label" %>
+    <div class="control">
+      <%= password_input f, :password_confirmation, required: true, class: "input" %>
+    </div>
     <%= error_tag f, :password_confirmation %>
+  </div>
 
   <div>
-    <%= submit "Reset password" %>
+    <%= submit "Reset password", class: "button is-primary" %>
   </div>
 <% end %>
 

lib/planner_web/templates/user_reset_password/new.html.eex

@@ -1,11 +1,15 @@
-<h1>Forgot your password?</h1>
+<h1 class="title is-1">Forgot your password?</h1>
 
 <%= form_for :user, Routes.user_reset_password_path(@conn, :create), fn f -> %>
-  <%= label f, :email %>
-  <%= text_input f, :email, required: true %>
+  <div class="field">
+    <%= label f, :email, class: "label" %>
+    <div class="control">
+      <%= text_input f, :email, required: true, class: "input" %>
+    </div>
+  </div>
 
   <div>
-    <%= submit "Send instructions to reset password" %>
+    <%= submit "Send instructions to reset password", class: "button is-primary" %>
   </div>
 <% end %>
 

lib/planner_web/templates/user_session/new.html.eex

@@ -1,23 +1,38 @@
-<h1>Login</h1>
+<h1 class="title is-1">Login</h1>
 
 <%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user], fn f -> %>
   <%= if @error_message do %>
-    <div class="alert alert-danger">
+
+    <div class="help is-danger">
       <p><%= @error_message %></p>
     </div>
   <% end %>
 
-  <%= label f, :email %>
-  <%= text_input f, :email, required: true %>
+  <div class="field">
+    <%= label f, :email, class: "label" %>
+    <div class="control">
+      <%= text_input f, :email, required: true, class: "input" %>
+    </div>
+  </div>
 
-  <%= label f, :password %>
-  <%= password_input f, :password, required: true %>
+  <div class="field">
+    <%= label f, :password, class: "label" %>
+    <div class="control">
+      <%= password_input f, :password, required: true, class: "input" %>
+    </div>
+  </div>
 
-  <%= label f, :remember_me, "Keep me logged in for 60 days" %>
+  <div class="field">
+    <div class="control">
+      <%= label class: "checkbox" do %>
+        Keep me logged in for 60 days
         <%= checkbox f, :remember_me %>
+      <% end %>
+    </div>
+  </div>
 
-  <div>
-    <%= submit "Login" %>
+  <div class="control">
+    <%= submit "Login", class: "button is-link" %>
   </div>
 <% end %>
 

lib/planner_web/templates/user_settings/edit.html.eex

@@ -1,49 +1,71 @@
-<h1>Settings</h1>
+<h1 class="title is-1">Settings</h1>
 
-<h3>Change e-mail</h3>
+<h3 class="title is-3">Change e-mail</h3>
 
 <%= form_for @email_changeset, Routes.user_settings_path(@conn, :update_email), fn f -> %>
   <%= if @email_changeset.action do %>
-    <div class="alert alert-danger">
+    <div class="help is-danger">
       <p>Oops, something went wrong! Please check the errors below.</p>
     </div>
   <% end %>
 
-  <%= label f, :email %>
-  <%= text_input f, :email, required: true %>
+  <div class="field">
+    <%= label f, :email, class: "label" %>
+    <div class="control">
+      <%= text_input f, :email, required: true, class: "input" %>
+    </div>
     <%= error_tag f, :email %>
+  </div<
 
-  <%= label f, :current_password, for: "current_password_for_email" %>
-  <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email" %>
+  <div class="field">
+    <%= label f, :current_password, for: "current_password_for_email", class: "label" %>
+    <div class="control">
+      <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email", class: "input" %>
+    </div>
     <%= error_tag f, :current_password %>
+  </div>
 
   <div>
-    <%= submit "Change e-mail" %>
+    <%= submit "Change e-mail", class: "button is-primary" %>
   </div>
 <% end %>
 
-<h3>Change password</h3>
+<br>
+
+<h3 class="title is-3">Change password</h3>
 
 <%= form_for @password_changeset, Routes.user_settings_path(@conn, :update_password), fn f -> %>
   <%= if @password_changeset.action do %>
-    <div class="alert alert-danger">
+    <div class="help is-danger">
       <p>Oops, something went wrong! Please check the errors below.</p>
     </div>
   <% end %>
 
-  <%= label f, :password, "New password" %>
-  <%= password_input f, :password, required: true %>
+  <div class="field">
+    <%= label f, :password, "New password", class: "label" %>
+    <div class="control">
+      <%= password_input f, :password, required: true, class: "input" %>
+    </div>
     <%= error_tag f, :password %>
+  </div>
 
-  <%= label f, :password_confirmation, "Confirm new password" %>
-  <%= password_input f, :password_confirmation, required: true %>
+  <div class="field">
+    <%= label f, :password_confirmation, "Confirm new password", class: "label" %>
+    <div class="control">
+      <%= password_input f, :password_confirmation, required: true, class: "input" %>
+    </div>
     <%= error_tag f, :password_confirmation %>
+  </div>
 
-  <%= label f, :current_password, for: "current_password_for_password" %>
-  <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password" %>
+  <div class="field">
+    <%= label f, :current_password, for: "current_password_for_password", class: "label" %>
+    <div class="control">
+      <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password", class: "input" %>
+    </div>
     <%= error_tag f, :current_password %>
+  </div>
 
   <div>
-    <%= submit "Change password" %>
+    <%= submit "Change password", class: "button is-primary" %>
   </div>
 <% end %>

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)