quick modification to make shift index look a little better
This commit is contained in:
parent
1d017a3cd1
commit
7f6072a162
3 changed files with 99 additions and 32 deletions
|
@ -64,3 +64,7 @@
|
||||||
.right-addon select {
|
.right-addon select {
|
||||||
padding-right: 2rem;
|
padding-right: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shift-description p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
|
@ -58,7 +58,6 @@ import "../node_modules/bootstrap-icons/icons/card-list.svg";
|
||||||
import "../node_modules/bootstrap-icons/icons/file-earmark-spreadsheet.svg";
|
import "../node_modules/bootstrap-icons/icons/file-earmark-spreadsheet.svg";
|
||||||
import "../node_modules/bootstrap-icons/icons/box-arrow-in-left.svg";
|
import "../node_modules/bootstrap-icons/icons/box-arrow-in-left.svg";
|
||||||
import "../node_modules/bootstrap-icons/icons/link.svg";
|
import "../node_modules/bootstrap-icons/icons/link.svg";
|
||||||
import "../node_modules/bootstrap-icons/icons/link-45deg.svg";
|
|
||||||
|
|
||||||
// webpack automatically bundles all modules in your
|
// webpack automatically bundles all modules in your
|
||||||
// entry points. Those entry points can be configured
|
// entry points. Those entry points can be configured
|
||||||
|
|
|
@ -35,53 +35,117 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<dl>
|
|
||||||
<%= for day <- Enum.to_list(@date_range) do %>
|
<%= for day <- Enum.to_list(@date_range) do %>
|
||||||
<%= if Date.day_of_week(day, @current_user.week_start_at) == 1 do %>
|
<%= if Date.day_of_week(day, @current_user.week_start_at) == 1 do %>
|
||||||
<div class="border-top mt-4 mb-4"></div>
|
<div class="border-top mt-4 mb-4"></div>
|
||||||
<% end %>
|
<% end %>
|
||||||
<dt>
|
<h4>
|
||||||
<%= Calendar.strftime(day, "%A, %b %-d") %>
|
<%= Calendar.strftime(day, "%A, %b %-d") %>
|
||||||
</dt>
|
</h4>
|
||||||
<% day_shifts = Enum.filter(@shifts, fn s -> s.date == day end) %>
|
<% day_shifts = Enum.filter(@shifts, fn s -> s.date == day end) %>
|
||||||
<%= if !Enum.empty?(day_shifts) do %>
|
<%= if !Enum.empty?(day_shifts) do %>
|
||||||
<dd id="day-<%= day.day %>">
|
|
||||||
|
|
||||||
<%= for shift <- day_shifts do %>
|
<%= for shift <- day_shifts do %>
|
||||||
<div class="row gx-2" id="shift-<%= shift.id %>">
|
|
||||||
<div class="col-4 col-md-3 col-xl-2 text-end">
|
|
||||||
<div>
|
<div class="card mt-2 mb-4 col-12 ms-sm-3 ms-md-4 col-lg-10 ms-lg-5 col-xxl-8" id="shift-<%= shift.id %>">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">
|
||||||
|
<%= icon_div @socket, "bi-tag", [class: "icon baseline text-muted me-1"] %>
|
||||||
|
<%= shift.subject %>
|
||||||
|
</h5>
|
||||||
|
|
||||||
|
|
||||||
|
<table class="table table-borderless table-nonfluid table-sm">
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<th scope="row" class="text-end">
|
||||||
|
<%= icon_div @socket, "bi-hourglass", [class: "icon baseline text-muted"] %>
|
||||||
|
<span class="visually-hidden">Hours:</span>
|
||||||
|
</th>
|
||||||
|
<td>
|
||||||
<%= format_shift_time(shift.time_start) %>
|
<%= format_shift_time(shift.time_start) %>
|
||||||
—
|
—
|
||||||
<%= format_shift_time(shift.time_end) %>
|
<%= format_shift_time(shift.time_end) %>
|
||||||
</div>
|
<span class="text-muted">
|
||||||
<div style="font-size: smaller;"><%= shift.time_zone %></div>
|
<span class="visually-hidden">Shift length:</span>
|
||||||
</div>
|
(<%= format_shift_length(shift) %>)
|
||||||
<div class="col-8 col-md-9 col-xl-10">
|
</span>
|
||||||
<div>
|
<span class="valid-feedback d-block text-muted mt-n1">TZ: <%= shift.time_zone %></span>
|
||||||
<%= shift.subject %>
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<th scope="row" class="text-end">
|
||||||
|
<%= icon_div @socket, "bi-geo", [class: "icon baseline text-muted"] %>
|
||||||
|
<span class="visually-hidden">Location:</span>
|
||||||
|
</th>
|
||||||
|
<td>
|
||||||
<%= if shift.location do %>
|
<%= if shift.location do %>
|
||||||
<span class="text-muted">(<%= shift.location %>)</span>
|
<%= shift.location %>
|
||||||
|
<% else %>
|
||||||
|
<span class="text-muted fst-italic">none</span>
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row" class="text-end">
|
||||||
|
<%= icon_div @socket, "bi-justify-left", [class: "icon baseline text-muted"] %>
|
||||||
|
<span class="visually-hidden">Description:</span>
|
||||||
|
</th>
|
||||||
|
<td class="shift-description">
|
||||||
<%= if shift.description do %>
|
<%= if shift.description do %>
|
||||||
<div style="font-size: smaller;">
|
|
||||||
<%= text_to_html shift.description %>
|
<%= text_to_html shift.description %>
|
||||||
</div>
|
<% else %>
|
||||||
|
<span class="text-muted fst-italic">none</span>
|
||||||
<% end %>
|
<% end %>
|
||||||
<div style="font-size: smaller;">
|
</td>
|
||||||
<span><%= link "Delete", to: "#", phx_click: "delete", phx_value_id: shift.id, data: [confirm: "Are you sure?"] %></span>
|
</tr>
|
||||||
</div>
|
</tbody>
|
||||||
</div>
|
</table>
|
||||||
</div>
|
|
||||||
|
<%#= if Roles.can?(@current_user, template, :edit) do %>
|
||||||
|
<%#= live_patch to: Routes.shift_template_index_path(@socket, :edit, template), class: "btn btn-primary btn-sm text-nowrap" do %>
|
||||||
|
<%#= icon_div @socket, "bi-pencil", [class: "icon baseline"] %>
|
||||||
|
<%# Edit %>
|
||||||
|
<%# end %>
|
||||||
|
<%# end %>
|
||||||
|
|
||||||
|
<%#= if Roles.can?(@current_user, template, :delete) do %>
|
||||||
|
<%# <button class="btn btn-outline-danger btn-sm text-nowrap" phx-click="delete-modal" phx-value-id=" %>
|
||||||
|
<%#= shift.id %>
|
||||||
|
<%# "> %>
|
||||||
|
<%#= icon_div @socket, "bi-trash", [class: "icon baseline"] %>
|
||||||
|
<%# Delete %>
|
||||||
|
<%# </button> %>
|
||||||
|
<%# end %>
|
||||||
|
|
||||||
|
<%= button to: "#", phx_click: "delete", phx_value_id: shift.id, data: [confirm: "Are you sure?"], class: "btn btn-outline-danger btn-sm text-nowrap" do %>
|
||||||
|
<%= icon_div @socket, "bi-trash", [class: "icon baseline"] %>
|
||||||
|
Delete
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
</dd>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<% else %>
|
<% else %>
|
||||||
<dd><em>Nothing scheduled</em></dd>
|
<p class="text-muted"><em>Nothing scheduled</em></p>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
</dl>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue