From b352416366594e446ba26b718b53316915a82001 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Fri, 12 Mar 2021 18:44:25 -0500 Subject: [PATCH] made bootstrap colors more flexible, styled calendar table better --- assets/css/_bs-colors.scss | 35 +++++++++++++ assets/css/_bs-custom.scss | 7 --- assets/css/_bs-load.scss | 50 +++++++++++++++++++ assets/css/app.scss | 7 +-- .../live/shift_assign_live/index.ex | 28 ++++++++--- .../live/shift_assign_live/index.html.leex | 18 +++++-- 6 files changed, 122 insertions(+), 23 deletions(-) create mode 100644 assets/css/_bs-colors.scss create mode 100644 assets/css/_bs-load.scss diff --git a/assets/css/_bs-colors.scss b/assets/css/_bs-colors.scss new file mode 100644 index 00000000..a6648039 --- /dev/null +++ b/assets/css/_bs-colors.scss @@ -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); diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss index d6a8b0f3..512ee0dc 100644 --- a/assets/css/_bs-custom.scss +++ b/assets/css/_bs-custom.scss @@ -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; diff --git a/assets/css/_bs-load.scss b/assets/css/_bs-load.scss new file mode 100644 index 00000000..f1f0e784 --- /dev/null +++ b/assets/css/_bs-load.scss @@ -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"; diff --git a/assets/css/app.scss b/assets/css/app.scss index 385e860d..a20a027c 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -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"; diff --git a/lib/shift73k_web/live/shift_assign_live/index.ex b/lib/shift73k_web/live/shift_assign_live/index.ex index 057c98fa..9ab3fec3 100644 --- a/lib/shift73k_web/live/shift_assign_live/index.ex +++ b/lib/shift73k_web/live/shift_assign_live/index.ex @@ -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 diff --git a/lib/shift73k_web/live/shift_assign_live/index.html.leex b/lib/shift73k_web/live/shift_assign_live/index.html.leex index 72a76d0c..c47db54a 100644 --- a/lib/shift73k_web/live/shift_assign_live/index.html.leex +++ b/lib/shift73k_web/live/shift_assign_live/index.html.leex @@ -6,7 +6,7 @@ <%# month navigation %>

- <%= Timex.format!(@current_date, "%B %Y", :strftime) %> + <%= Timex.format!(@cursor_date, "%B %Y", :strftime) %>

@@ -35,11 +35,19 @@ <%= for week <- @week_rows do %> <%= for day <- week do %> - <%= if Timex.compare(day, @current_date, :days) == 0 do %> - - <% else %> - + <%= cond do %> + + <% Timex.compare(day, @current_date, :days) == 0 -> %> + + + <% day.month != @cursor_date.month -> %> + + + <% true -> %> + + <% end %> + <%= Timex.format!(day, "%d", :strftime) %> <% end %>