made bootstrap colors more flexible, styled calendar table better
This commit is contained in:
parent
3fb9602fa8
commit
b352416366
35
assets/css/_bs-colors.scss
Normal file
35
assets/css/_bs-colors.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Colors
|
||||
$primary: #662c91;
|
||||
$secondary: #ee6c4d;
|
||||
$success: #3f784c;
|
||||
$info: #3f84e5;
|
||||
$warning: #fcca46;
|
||||
$light: $gray-200;
|
||||
$dark: $gray-800;
|
||||
|
||||
// Create your own map
|
||||
$custom-colors: (
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark,
|
||||
"gray": $gray-500,
|
||||
);
|
||||
|
||||
// $custom-colors: (
|
||||
// "custom-color": #900
|
||||
// );
|
||||
|
||||
// Merge the maps
|
||||
$theme-colors: map-merge($theme-colors, $custom-colors);
|
||||
|
||||
// misc
|
||||
$navbar-dark-color: rgba($white, 0.75);
|
||||
$navbar-dark-hover-color: rgba($white, 0.9);
|
||||
$navbar-dark-active-color: $white;
|
||||
$navbar-dark-disabled-color: rgba($white, 0.45);
|
||||
$navbar-dark-toggler-border-color: rgba($white, 0.3);
|
||||
|
|
@ -14,10 +14,3 @@ $font-family-sans-serif: Lato, system-ui, -apple-system, "Segoe UI", Roboto,
|
|||
// Features
|
||||
$enable-shadows: true;
|
||||
$enable-negative-margins: true;
|
||||
|
||||
// Colors
|
||||
$primary: #662c91;
|
||||
$secondary: #ee6c4d;
|
||||
$success: #3f784c;
|
||||
$info: #3f84e5;
|
||||
$warning: #fcca46;
|
||||
|
|
|
|||
50
assets/css/_bs-load.scss
Normal file
50
assets/css/_bs-load.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/* Bootstrap custom variable overrides */
|
||||
@import "bs-custom";
|
||||
|
||||
// Required || Configuration
|
||||
@import "../node_modules/bootstrap/scss/functions";
|
||||
@import "../node_modules/bootstrap/scss/variables";
|
||||
|
||||
/* Bootstrap custom variable overrides */
|
||||
@import "bs-colors";
|
||||
|
||||
// Required || Configuration -- CONTINUED
|
||||
@import "../node_modules/bootstrap/scss/mixins";
|
||||
@import "../node_modules/bootstrap/scss/utilities";
|
||||
|
||||
// Optional || Layout & components
|
||||
@import "../node_modules/bootstrap/scss/root";
|
||||
@import "../node_modules/bootstrap/scss/reboot";
|
||||
@import "../node_modules/bootstrap/scss/type";
|
||||
@import "../node_modules/bootstrap/scss/images";
|
||||
@import "../node_modules/bootstrap/scss/containers";
|
||||
@import "../node_modules/bootstrap/scss/grid";
|
||||
@import "../node_modules/bootstrap/scss/tables";
|
||||
@import "../node_modules/bootstrap/scss/forms";
|
||||
@import "../node_modules/bootstrap/scss/buttons";
|
||||
@import "../node_modules/bootstrap/scss/transitions";
|
||||
@import "../node_modules/bootstrap/scss/dropdown";
|
||||
// @import "../node_modules/bootstrap/scss/button-group";
|
||||
@import "../node_modules/bootstrap/scss/nav";
|
||||
@import "../node_modules/bootstrap/scss/navbar";
|
||||
@import "../node_modules/bootstrap/scss/card";
|
||||
// @import "../node_modules/bootstrap/scss/accordion";
|
||||
// @import "../node_modules/bootstrap/scss/breadcrumb";
|
||||
@import "../node_modules/bootstrap/scss/pagination";
|
||||
// @import "../node_modules/bootstrap/scss/badge";
|
||||
@import "../node_modules/bootstrap/scss/alert";
|
||||
@import "../node_modules/bootstrap/scss/progress";
|
||||
// @import "../node_modules/bootstrap/scss/list-group";
|
||||
@import "../node_modules/bootstrap/scss/close";
|
||||
// @import "../node_modules/bootstrap/scss/toasts";
|
||||
@import "../node_modules/bootstrap/scss/modal";
|
||||
// @import "../node_modules/bootstrap/scss/tooltip";
|
||||
// @import "../node_modules/bootstrap/scss/popover";
|
||||
// @import "../node_modules/bootstrap/scss/carousel";
|
||||
@import "../node_modules/bootstrap/scss/spinners";
|
||||
|
||||
// Helpers
|
||||
@import "../node_modules/bootstrap/scss/helpers";
|
||||
|
||||
// Utilities
|
||||
@import "../node_modules/bootstrap/scss/utilities/api";
|
||||
|
|
@ -1,11 +1,8 @@
|
|||
/* Fonts */
|
||||
@import "fonts";
|
||||
|
||||
/* Bootstrap custom variable overrides */
|
||||
@import "bs-custom";
|
||||
|
||||
/* Bootstrap v5 scss */
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
/* Load Bootstrap v5 and customizations */
|
||||
@import "bs-load";
|
||||
|
||||
/*SVG ICON SYSTEM*/
|
||||
@import "svg-icons";
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
|
|||
|> rotate_week()
|
||||
|> Keyword.values()
|
||||
|> Enum.map(&Timex.day_shortname/1)
|
||||
|> IO.inspect(label: "day names...")
|
||||
end
|
||||
|
||||
defp week_rows(cursor_date, week_start_at) do
|
||||
|
|
@ -37,12 +36,10 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
|
|||
cursor_date
|
||||
|> Timex.end_of_month()
|
||||
|> Timex.end_of_week(week_start_at)
|
||||
|> IO.inspect(label: "last found")
|
||||
|
||||
Interval.new(from: first, until: last, right_open: false)
|
||||
|> Enum.map(& &1)
|
||||
|> Enum.chunk_every(7)
|
||||
|> IO.inspect(label: "week rows")
|
||||
end
|
||||
|
||||
defp assign_day_names(socket) do
|
||||
|
|
@ -51,9 +48,7 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
|
|||
end
|
||||
|
||||
defp assign_init_dates(socket, today) do
|
||||
socket
|
||||
|> assign(:current_date, today)
|
||||
|> assign(:cursor_date, today)
|
||||
assign(socket, [current_date: today, cursor_date: today])
|
||||
end
|
||||
|
||||
defp assign_week_rows(socket) do
|
||||
|
|
@ -63,4 +58,25 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
|
|||
assign(socket, :week_rows, week_rows(cursor_date, week_start_at))
|
||||
end
|
||||
|
||||
def handle_event("prev-month", _, socket) do
|
||||
cursor_date = Timex.shift(socket.assigns.cursor_date, months: -1)
|
||||
|
||||
assigns = [
|
||||
cursor_date: cursor_date,
|
||||
week_rows: week_rows(cursor_date, socket.assigns.current_user.week_start_at)
|
||||
]
|
||||
|
||||
{:noreply, assign(socket, assigns)}
|
||||
end
|
||||
|
||||
def handle_event("next-month", _, socket) do
|
||||
cursor_date = Timex.shift(socket.assigns.cursor_date, months: 1)
|
||||
|
||||
assigns = [
|
||||
cursor_date: cursor_date,
|
||||
week_rows: week_rows(cursor_date, socket.assigns.current_user.week_start_at)
|
||||
]
|
||||
|
||||
{:noreply, assign(socket, assigns)}
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<%# month navigation %>
|
||||
<div class="d-flex justify-content-between align-items-baseline mt-4">
|
||||
<h3 class="ms-4 text-muted mb-0">
|
||||
<%= Timex.format!(@current_date, "%B %Y", :strftime) %>
|
||||
<%= Timex.format!(@cursor_date, "%B %Y", :strftime) %>
|
||||
</h3>
|
||||
<div class="me-4">
|
||||
<a href="#" phx-click="prev-month" class="btn btn-primary">
|
||||
|
|
@ -35,11 +35,19 @@
|
|||
<%= for week <- @week_rows do %>
|
||||
<tr>
|
||||
<%= for day <- week do %>
|
||||
<%= if Timex.compare(day, @current_date, :days) == 0 do %>
|
||||
<td width="14%" style="height: 5rem;" class="bg-info text-white">
|
||||
<% else %>
|
||||
<td width="14%" style="height: 5rem;">
|
||||
<%= cond do %>
|
||||
|
||||
<% Timex.compare(day, @current_date, :days) == 0 -> %>
|
||||
<td width="14%" style="height: 6rem;" class="bg-info text-white">
|
||||
|
||||
<% day.month != @cursor_date.month -> %>
|
||||
<td width="14%" style="height: 6rem;" class="bg-light text-gray">
|
||||
|
||||
<% true -> %>
|
||||
<td width="14%" style="height: 6rem;">
|
||||
|
||||
<% end %>
|
||||
|
||||
<%= Timex.format!(day, "%d", :strftime) %>
|
||||
</td>
|
||||
<% end %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue