made bootstrap colors more flexible, styled calendar table better

This commit is contained in:
Adam Piontek 2021-03-12 18:44:25 -05:00
parent 3fb9602fa8
commit b352416366
6 changed files with 122 additions and 23 deletions

View 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);

View file

@ -14,10 +14,3 @@ $font-family-sans-serif: Lato, system-ui, -apple-system, "Segoe UI", Roboto,
// Features // Features
$enable-shadows: true; $enable-shadows: true;
$enable-negative-margins: true; $enable-negative-margins: true;
// Colors
$primary: #662c91;
$secondary: #ee6c4d;
$success: #3f784c;
$info: #3f84e5;
$warning: #fcca46;

50
assets/css/_bs-load.scss Normal file
View 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";

View file

@ -1,11 +1,8 @@
/* Fonts */ /* Fonts */
@import "fonts"; @import "fonts";
/* Bootstrap custom variable overrides */ /* Load Bootstrap v5 and customizations */
@import "bs-custom"; @import "bs-load";
/* Bootstrap v5 scss */
@import "~bootstrap/scss/bootstrap";
/*SVG ICON SYSTEM*/ /*SVG ICON SYSTEM*/
@import "svg-icons"; @import "svg-icons";

View file

@ -24,7 +24,6 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
|> rotate_week() |> rotate_week()
|> Keyword.values() |> Keyword.values()
|> Enum.map(&Timex.day_shortname/1) |> Enum.map(&Timex.day_shortname/1)
|> IO.inspect(label: "day names...")
end end
defp week_rows(cursor_date, week_start_at) do defp week_rows(cursor_date, week_start_at) do
@ -37,12 +36,10 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
cursor_date cursor_date
|> Timex.end_of_month() |> Timex.end_of_month()
|> Timex.end_of_week(week_start_at) |> Timex.end_of_week(week_start_at)
|> IO.inspect(label: "last found")
Interval.new(from: first, until: last, right_open: false) Interval.new(from: first, until: last, right_open: false)
|> Enum.map(& &1) |> Enum.map(& &1)
|> Enum.chunk_every(7) |> Enum.chunk_every(7)
|> IO.inspect(label: "week rows")
end end
defp assign_day_names(socket) do defp assign_day_names(socket) do
@ -51,9 +48,7 @@ defmodule Shift73kWeb.ShiftAssignLive.Index do
end end
defp assign_init_dates(socket, today) do defp assign_init_dates(socket, today) do
socket assign(socket, [current_date: today, cursor_date: today])
|> assign(:current_date, today)
|> assign(:cursor_date, today)
end end
defp assign_week_rows(socket) do 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)) assign(socket, :week_rows, week_rows(cursor_date, week_start_at))
end 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 end

View file

@ -6,7 +6,7 @@
<%# month navigation %> <%# month navigation %>
<div class="d-flex justify-content-between align-items-baseline mt-4"> <div class="d-flex justify-content-between align-items-baseline mt-4">
<h3 class="ms-4 text-muted mb-0"> <h3 class="ms-4 text-muted mb-0">
<%= Timex.format!(@current_date, "%B %Y", :strftime) %> <%= Timex.format!(@cursor_date, "%B %Y", :strftime) %>
</h3> </h3>
<div class="me-4"> <div class="me-4">
<a href="#" phx-click="prev-month" class="btn btn-primary"> <a href="#" phx-click="prev-month" class="btn btn-primary">
@ -35,11 +35,19 @@
<%= for week <- @week_rows do %> <%= for week <- @week_rows do %>
<tr> <tr>
<%= for day <- week do %> <%= for day <- week do %>
<%= if Timex.compare(day, @current_date, :days) == 0 do %> <%= cond do %>
<td width="14%" style="height: 5rem;" class="bg-info text-white">
<% else %> <% Timex.compare(day, @current_date, :days) == 0 -> %>
<td width="14%" style="height: 5rem;"> <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 %> <% end %>
<%= Timex.format!(day, "%d", :strftime) %> <%= Timex.format!(day, "%d", :strftime) %>
</td> </td>
<% end %> <% end %>