layout improvements
This commit is contained in:
parent
5c4a4ea793
commit
06299b4e07
|
|
@ -1,38 +1,45 @@
|
|||
<h2><%= @title %></h2>
|
||||
|
||||
<%= f = form_for @changeset, "#",
|
||||
id: "shift_template-form",
|
||||
phx_target: @myself,
|
||||
phx_change: "validate",
|
||||
phx_submit: "save" %>
|
||||
|
||||
<%= label f, :subject %>
|
||||
<%= text_input f, :subject %>
|
||||
<%= error_tag f, :subject %>
|
||||
<div class="modal-body">
|
||||
|
||||
<%= label f, :description %>
|
||||
<%= text_input f, :description %>
|
||||
<%= error_tag f, :description %>
|
||||
|
||||
<%= label f, :location %>
|
||||
<%= text_input f, :location %>
|
||||
<%= error_tag f, :location %>
|
||||
<%= label f, :subject %>
|
||||
<%= text_input f, :subject %>
|
||||
<%= error_tag f, :subject %>
|
||||
|
||||
<%= label f, :timezone %>
|
||||
<%= text_input f, :timezone %>
|
||||
<%= error_tag f, :timezone %>
|
||||
<%= label f, :description %>
|
||||
<%= text_input f, :description %>
|
||||
<%= error_tag f, :description %>
|
||||
|
||||
<%= label f, :start_time %>
|
||||
<%= time_select f, :start_time %>
|
||||
<%= error_tag f, :start_time %>
|
||||
<%= label f, :location %>
|
||||
<%= text_input f, :location %>
|
||||
<%= error_tag f, :location %>
|
||||
|
||||
<%= label f, :length_hours %>
|
||||
<%= number_input f, :length_hours %>
|
||||
<%= error_tag f, :length_hours %>
|
||||
<%= label f, :timezone %>
|
||||
<%= text_input f, :timezone %>
|
||||
<%= error_tag f, :timezone %>
|
||||
|
||||
<%= label f, :length_minutes %>
|
||||
<%= number_input f, :length_minutes %>
|
||||
<%= error_tag f, :length_minutes %>
|
||||
<%= label f, :start_time %>
|
||||
<%= time_select f, :start_time %>
|
||||
<%= error_tag f, :start_time %>
|
||||
|
||||
<%= label f, :length_hours %>
|
||||
<%= number_input f, :length_hours %>
|
||||
<%= error_tag f, :length_hours %>
|
||||
|
||||
<%= label f, :length_minutes %>
|
||||
<%= number_input f, :length_minutes %>
|
||||
<%= error_tag f, :length_minutes %>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
<%= submit "Save", phx_disable_with: "Saving..." %>
|
||||
|
||||
</div>
|
||||
|
||||
<%= submit "Save", phx_disable_with: "Saving..." %>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -36,13 +36,13 @@ defmodule Shift73kWeb.ShiftTemplateLive.Index do
|
|||
|
||||
defp apply_action(socket, :edit, %{"id" => id}) do
|
||||
socket
|
||||
|> assign(:page_title, "Edit Shift template")
|
||||
|> assign(:page_title, "Edit Shift Template")
|
||||
|> assign(:shift_template, ShiftTemplates.get_shift_template!(id))
|
||||
end
|
||||
|
||||
defp apply_action(socket, :new, _params) do
|
||||
socket
|
||||
|> assign(:page_title, "New Shift template")
|
||||
|> assign(:page_title, "New Shift Template")
|
||||
|> assign(:shift_template, %ShiftTemplate{})
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
|
||||
<div class="row justify-content-start justify-content-sm-center">
|
||||
<div class="col-md-12 col-lg-10 col-xl-9">
|
||||
<div class="col-md-12 col-lg-10 col-xxl-8">
|
||||
|
||||
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
|
||||
<h2 class="mb-3 mb-sm-0">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<div class="row justify-content-center">
|
||||
<div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
|
||||
<div class="col-11 col-sm-8 col-md-6 col-lg-5 col-xl-4 col-xxl-3">
|
||||
|
||||
<h2>
|
||||
<%= icon_div @socket, "bi-person-plus", [class: "icon baseline"] %>
|
||||
Register
|
||||
</h2>
|
||||
<p class="lead">Registration gains additional features, like remembering your song request history.</p>
|
||||
<p class="lead">Create an account to manage your work shifts with us.</p>
|
||||
|
||||
<%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "reg_form"], fn f -> %>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<div class="row justify-content-center">
|
||||
<div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
|
||||
<div class="col-11 col-sm-8 col-md-6 col-lg-5 col-xl-4 col-xxl-3">
|
||||
|
||||
<h2>
|
||||
<%= icon_div @socket, "bi-shield-lock", [class: "icon baseline"] %>
|
||||
Reset password
|
||||
</h2>
|
||||
<p class="lead">Hi <%= @user.email %> — What new word of passage will confirm you are who you say you are?</p>
|
||||
<p class="lead">Hi <%= @user.email %> — tell us your new password, please.</p>
|
||||
|
||||
<%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "pw_reset_form"], fn f -> %>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
<h2 class="mb-3">
|
||||
<%= icon_div @socket, "bi-sliders", [class: "icon baseline"] %>
|
||||
User Settings
|
||||
</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-11">
|
||||
|
||||
<div class="row">
|
||||
<%= live_component @socket, Shift73kWeb.UserLive.Settings.Email, id: "email-#{@current_user.id}", current_user: @current_user %>
|
||||
<%= live_component @socket, Shift73kWeb.UserLive.Settings.Password, id: "password-#{@current_user.id}", current_user: @current_user %>
|
||||
<h2 class="mb-3">
|
||||
<%= icon_div @socket, "bi-sliders", [class: "icon baseline"] %>
|
||||
User Settings
|
||||
</h2>
|
||||
|
||||
<div class="row justify-content-center justify-content-md-start">
|
||||
<%= live_component @socket, Shift73kWeb.UserLive.Settings.Email, id: "email-#{@current_user.id}", current_user: @current_user %>
|
||||
<%= live_component @socket, Shift73kWeb.UserLive.Settings.Password, id: "password-#{@current_user.id}", current_user: @current_user %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4 mt-1">
|
||||
<div id="<%= @id %>" class="col-12 col-sm-10 col-md-6 col-lg-5 col-xl-4 col-xxl-3 mt-1">
|
||||
|
||||
<h3>Change email</h3>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4 mt-1">
|
||||
<div id="<%= @id %>" class="col-12 col-sm-10 col-md-6 col-lg-5 col-xl-4 col-xxl-3 mt-1">
|
||||
|
||||
<h3>Change password</h3>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<%= if @live_action in [:new, :edit] do %>
|
||||
<%= live_modal @socket, Shift73kWeb.UserManagement.FormComponent,
|
||||
<%= live_modal @socket, Bones73kWeb.UserManagement.FormComponent,
|
||||
id: @user.id || :new,
|
||||
title: @page_title,
|
||||
action: @live_action,
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<% end %>
|
||||
|
||||
<%= if @delete_user do %>
|
||||
<%= live_modal @socket, Shift73kWeb.UserManagement.DeleteComponent,
|
||||
<%= live_modal @socket, Bones73kWeb.UserManagement.DeleteComponent,
|
||||
id: @delete_user.id,
|
||||
title: "Delete User",
|
||||
delete_user: @delete_user,
|
||||
|
|
@ -22,20 +22,20 @@
|
|||
</h2>
|
||||
|
||||
<%# filtering and new item creation %>
|
||||
<div class="row justify-content-between align-items-start align-items-sm-end mb-3">
|
||||
<div class="row justify-content-between align-items-start align-items-md-end mb-3">
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
|
||||
<%= live_patch to: Routes.user_management_index_path(@socket, :new, Enum.into(@query, [])),
|
||||
class: "btn btn-primary mb-3 mb-sm-0" do %>
|
||||
class: "btn btn-primary mb-3 mb-md-0" do %>
|
||||
<%= icon_div @socket, "bi-person-plus", [class: "icon baseline me-1"] %>
|
||||
New User
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="col-12 d-block d-sm-none">
|
||||
<div class="col-12 col-sm-5 d-block d-md-none">
|
||||
<%= form_for :sort, "#", [phx_change: "sort-by-change"], fn srt -> %>
|
||||
<%= label srt, :sort_by, class: "visually-hidden" %>
|
||||
<div class="input-group inner-addon left-addon mb-3 mb-sm-0">
|
||||
<div class="input-group inner-addon left-addon mb-3 mb-md-0">
|
||||
<%= icon_div @socket, "bi-arrow-down-up", [class: "icon is-left text-muted fs-5", style: "z-index:1001;"], [style: "padding: 1px;"] %>
|
||||
<%= Phoenix.HTML.Form.select srt, :sort_by, ["Email": "email", "Role": "role", "Created at": "inserted_at"], value: @query.sort_by, class: "form-select" %>
|
||||
<button class="btn btn-primary" type="button" aria-label="Change sort order" phx-click="sort-order-change">
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
|
||||
<div class="col-12 col-sm-7 col-md-6 col-lg-4 col-xl-3">
|
||||
<%= form_for :filter, "#", [phx_change: "filter-change"], fn flt -> %>
|
||||
<%= label flt, :filter, class: "visually-hidden" %>
|
||||
<div class="inner-addon left-addon right-addon">
|
||||
|
|
@ -66,9 +66,9 @@
|
|||
</div>
|
||||
|
||||
<%# mobile data cards %>
|
||||
<div class="d-block d-sm-none">
|
||||
|
||||
<div class="d-block d-md-none">
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<%= if !@page do %>
|
||||
<div class="card">
|
||||
<div class="spinner-border text-primary my-5 mx-auto" role="status">
|
||||
|
|
@ -77,20 +77,23 @@
|
|||
</div>
|
||||
<% else %>
|
||||
<%= for user <- @page.entries do %>
|
||||
<div class="col-12 col-sm-10">
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Email</dt>
|
||||
<dt class="col-sm-3 text-sm-end">Email</dt>
|
||||
<dd class="col-sm-9"><%= user.email %></dd>
|
||||
<dt class="col-sm-3">Role</dt>
|
||||
<dt class="col-sm-3 text-sm-end">Role</dt>
|
||||
<dd class="col-sm-9"><%= user.role |> Atom.to_string() |> String.capitalize() %></dd>
|
||||
<dt class="col-sm-3">Created at</dt>
|
||||
<dt class="col-sm-3 text-sm-end">Created at</dt>
|
||||
<dd class="col-sm-9"><%= dt_out(user.inserted_at) %></dd>
|
||||
<dt class="col-sm-3">
|
||||
Confirmed?
|
||||
<span class="visually-hidden"><%= user.confirmed_at && "Yes" || "No" %></span>
|
||||
<input type="checkbox" class="form-check-input ms-1" aria-hidden="true" <%= user.confirmed_at && "checked" || "" %>>
|
||||
<dt class="d-inline d-sm-block col-auto text-sm-end">
|
||||
<span>Confirmed?</span>
|
||||
</dt>
|
||||
<dd class="d-inline d-sm-block col-auto">
|
||||
<span class="visually-hidden"><%= user.confirmed_at && "Yes" || "No" %></span>
|
||||
<input type="checkbox" class="form-check-input" aria-hidden="true" <%= user.confirmed_at && "checked" || "" %>>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<%= if Roles.can?(@current_user, user, :edit) do %>
|
||||
|
|
@ -109,13 +112,15 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<%# non-mobile main data table %>
|
||||
<div class="table-responsive d-none d-sm-block">
|
||||
<div class="table-responsive d-none d-md-block">
|
||||
<table class="table">
|
||||
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -19,12 +19,14 @@
|
|||
<%# nav LEFT items %>
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
|
||||
<li class="nav-item">
|
||||
<%= link nav_link_opts(@conn, to: Routes.shift_template_index_path(@conn, :index), class: "nav-link") do %>
|
||||
<%= icon_div @conn, "bi-clock-history", [class: "icon baseline me-1"] %>
|
||||
Templates
|
||||
<% end %>
|
||||
</li>
|
||||
<%= if @current_user do %>
|
||||
<li class="nav-item">
|
||||
<%= link nav_link_opts(@conn, to: Routes.shift_template_index_path(@conn, :index), class: "nav-link") do %>
|
||||
<%= icon_div @conn, "bi-clock-history", [class: "icon baseline me-1"] %>
|
||||
Templates
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
|
||||
<%# normal navbar link example %>
|
||||
<%# <li class="nav-item"> %>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<%# phoenix flash alerts: %>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-12 col-lg-10 col-xl-9 ">
|
||||
<div class="col-md-12 col-lg-10 col-xxl-8 ">
|
||||
<%= for {kind, class} <- alert_kinds() do %>
|
||||
<%= if flash_content = get_flash(@conn, kind) do %>
|
||||
<div class="alert <%= class %> alert-dismissible fade show" role="alert">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<%# liveview flash alerts: %>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-12 col-lg-10 col-xl-9 ">
|
||||
<div class="col-md-12 col-lg-10 col-xxl-8 ">
|
||||
<%= for {kind, class} <- alert_kinds() do %>
|
||||
<%= if flash_content = live_flash(@flash, kind) do %>
|
||||
<div class="alert <%= class %> alert-dismissible fade show" role="alert" id="lv-alert-<%= kind %>" phx-hook="AlertRemover" data-key="<%= kind %>">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="row justify-content-center">
|
||||
<div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
|
||||
<div class="col-11 col-sm-10 col-md-8 col-lg-7 col-xl-6 col-xxl-5">
|
||||
|
||||
<h2>
|
||||
<%= icon_div @conn, "bi-arrow-repeat", [class: "icon baseline"] %>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="row justify-content-center">
|
||||
<div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
|
||||
<div class="col-11 col-sm-10 col-md-8 col-lg-7 col-xl-6 col-xxl-5">
|
||||
|
||||
<h2>
|
||||
<%= icon_div @conn, "mdi-head-question-outline", [class: "icon baseline"] %>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="row justify-content-center">
|
||||
<div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
|
||||
<div class="col-11 col-sm-8 col-md-6 col-lg-5 col-xl-4 col-xxl-3">
|
||||
|
||||
<h2>
|
||||
<%= icon_div @conn, "bi-door-open", [class: "icon baseline"] %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue