Skip to content

Commit

Permalink
refactor: improve mobile dropdown and responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@nunom27
nunom27 committed Aug 23, 2024
1 parent b02a779 commit 1edd9e4
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 92 deletions.
8 changes: 4 additions & 4 deletions lib/atomic_web/components/calendar/month.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,8 @@ defmodule AtomicWeb.Components.CalendarMonth do
date-time={@date}
class={
"ml-auto lg:ml-0 #{if @current_date == @date do
"ml-auto flex h-6 w-6 items-center justify-center rounded-full #{if @today? == 0 do
"bg-orange-700"
"flex h-6 w-6 items-center justify-center rounded-full #{if @today? == 0 do
"bg-orange-600"
else
"bg-zinc-900"
end} text-white shirk-0"
Expand All @@ -174,9 +174,9 @@ defmodule AtomicWeb.Components.CalendarMonth do
<%= if (activities = get_date_activities(@activities, @date)) != [] do %>
<span class="sr-only"><%= Enum.count(activities) %> events</span>
<span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
<%= for activity <- activities do %>
<%= for activity <- Enum.take(activities, 3) do %>
<%= if activity do %>
<span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-zinc-700"></span>
<span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-zinc-400"></span>
<% end %>
<% end %>
</span>
Expand Down
12 changes: 6 additions & 6 deletions lib/atomic_web/components/calendar/week.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
|> assign(today: Timex.today(timezone))

~H"""
<div id={@id} class="flex h-full flex-auto flex-col overflow-y-auto overflow-x-hidden rounded-lg bg-white">
<div id={@id} class="flex flex-auto flex-col overflow-y-auto rounded-lg bg-white">
<div style="width: 165%" class="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
<div class="sticky top-0 z-10 flex-none bg-white shadow ring-1 ring-black ring-opacity-5">
<div class="grid grid-cols-7 text-sm leading-6 text-zinc-500 sm:hidden">
Expand All @@ -46,7 +46,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
</.link>
<% end %>
</div>
<div class="-mr-px hidden grid-cols-7 divide-x divide-zinc-100 border-r border-zinc-100 text-sm leading-6 text-zinc-500 sm:grid">
<div class="hidden grid-cols-7 divide-x divide-zinc-100 border-r border-zinc-100 text-sm leading-6 text-zinc-500 sm:grid">
<div class="col-end-1 w-12"></div>
<%= for idx <- 0..6 do %>
<% day_of_week = @beginning_of_week |> Timex.add(Duration.from_days(idx)) %>
Expand All @@ -61,7 +61,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
<%= Enum.at(@week, idx) %>
<span class={
"#{if @today == day_of_week do
"flex ml-1.5 w-8 h-8 text-white bg-orange-700 rounded-full"
"flex ml-1.5 w-8 h-8 text-white bg-primary-600 rounded-full"
else
"text-zinc-900"
end} items-center justify-center font-semibold"
Expand All @@ -74,14 +74,14 @@ defmodule AtomicWeb.Components.CalendarWeek do
</div>
</div>
<div class="flex flex-auto">
<div class="left-0 w-12 flex-none bg-white ring-1 ring-zinc-100"></div>
<div class="sticky left-0 w-12 flex-none bg-white ring-1 ring-zinc-100"></div>
<div class="grid flex-auto grid-cols-1 grid-rows-1">
<!-- Horizontal lines -->
<div class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-100" style="grid-template-rows: repeat(48, minmax(3.5rem, 1fr))">
<div class="row-end-1 h-6"></div>
<%= for hour <- hours() do %>
<div>
<div class="left-0 -mt-2.5 -ml-14 w-12 pr-2 text-right text-xs leading-5 text-zinc-400"><%= hour %></div>
<div class="sticky left-0 -mt-2.5 -ml-14 w-12 pr-2 text-right text-xs leading-5 text-zinc-400"><%= hour %></div>
</div>
<div></div>
<% end %>
Expand Down Expand Up @@ -122,7 +122,7 @@ defmodule AtomicWeb.Components.CalendarWeek do
width: #{(1/width)*100}%;
left: #{if left > 0 do (left / width) * 100 else 0 end}%"}>
<.link patch={Routes.activity_show_path(AtomicWeb.Endpoint, :show, activity)}>
<div class={"#{if width != 1 do "hover:z-10 sm:hover:w-max" end} group absolute inset-1 flex flex-col overflow-y-auto overflow-x-hidden rounded-md bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100"}>
<div class={"#{if width != 1 do "sm:hover:z-10 sm:hover:w-max sm:max-w-32 sm:hover:overflow-y-auto" end} group absolute inset-1 flex flex-col overflow-x-hidden rounded-md bg-orange-50 p-2 text-xs leading-5 hover:bg-orange-100 sm:overflow-y-hidden"}>
<p class="order-1 font-semibold text-orange-500">
<%= activity.title %>
</p>
Expand Down
117 changes: 35 additions & 82 deletions lib/atomic_web/live/calendar_live/show.html.heex
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<.page title="Calendar">
<div class="bg-gray-50 lg:h-0 lg:min-h-[787px] overflow-hidden rounded-lg ring-1 ring-zinc-900/10 lg:mx-8 mx-4">
<div x-data="{ mode_view: false }" class="lg:flex lg:h-full lg:flex-col">
<header class="px-6 py-4 flex flex-col sm:flex-row border-b border-zinc-300">
<div class="ring-zinc-900/10 mx-4 overflow-hidden rounded-lg bg-gray-50 ring-1 lg:min-h-[787px] lg:mx-8 lg:h-0">
<div class="lg:flex lg:h-full lg:flex-col">
<header class="flex flex-col border-b border-zinc-300 px-6 py-4 sm:flex-row">
<div class="flex-1">
<div class="relative z-20 flex w-full items-center justify-between lg:flex-none">
<span class="font-semibold text-base text-zinc-900">
<span class="text-base font-semibold text-zinc-900">
<%= if @mode == "month" do %>
<time datetime={@beginning_of_month}><%= Timex.format!(@beginning_of_month, "{Mshort} {YYYY}") %></time>
<% else %>
Expand Down Expand Up @@ -35,83 +35,36 @@
<.icon name={:chevron_right} solid class="h-3 w-3 sm:h-5 sm:w-5" />
</button>
</div>
<div class="hidden md:ml-4 md:flex md:items-center">
<div class="relative">
<.dropdown
id="calendar-dropdown"
orientation={:down}
items={
[
%{name: gettext("Week view"), link: "?mode=week"},
# Link that switches mode
%{name: gettext("Month view"), link: "?mode=month"}
]
}
>
<:wrapper>
<button icon={:chevron_down} icon_position={:right} icon_variant={:solid} class="flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 hover:bg-gray-50">
<%= if @mode == "month" do %>
<%= gettext("Month view") %>
<% else %>
<%= gettext("Week view") %>
<% end %>
<span class="h-5 w-5 text-zinc-400">
<.icon name={:chevron_down} solid />
</span>
</button>
</:wrapper>
</.dropdown>
</div>
</div>
<div class="relative ml-6 md:hidden">
<button type="button" @click="mode_view = !mode_view" class="-mx-2 flex items-center rounded-full border border-transparent p-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open menu</span>
<.icon name={:ellipsis_horizontal} solid class="h-3 w-3 sm:h-5 sm:w-5" />
</button>
<div x-bind:class="mode_view ?'block' : 'hidden'" class="absolute right-0 mt-3 w-36 origin-top-right divide-y divide-zinc-100 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1" role="none">
<button @click="mode_view = false" phx-click="present" type="button" @click="mode_view = false" class="block w-full px-4 py-2 text-sm text-zinc-700" role="menuitem" tabindex="-1" id="menu-1-item-1">
<%= gettext("Today") %>
</button>
<div class="mx-4 border-b border-zinc-200" />
<.link patch="?mode=week">
<button
type="button"
@click="mode_view = false"
class={
"block px-4 w-full py-2 text-sm #{if @mode == "week" do
"hidden"
else
"block"
end}"
}
role="menuitem"
tabindex="-1"
id="menu-1-item-2"
>
<%= gettext("Week view") %>
</button>
</.link>
<.link patch="?mode=month">
<button
type="button"
@click="mode_view = false"
class={
"block px-4 w-full py-2 text-sm #{if @mode == "month" do
"hidden"
else
"block"
end}"
}
role="menuitem"
tabindex="-1"
id="menu-1-item-3"
>
<div class="relative">
<.dropdown
id="calendar-dropdown"
orientation={:down}
items={
[
%{name: gettext("Go to today"), phx_click: "present", class: "md:hidden border-b border-zinc-100"},
# Link that switches mode
%{name: gettext("Week view"), patch: "?mode=week"},
%{name: gettext("Month view"), patch: "?mode=month"}
]
}
>
<:wrapper>
<button icon={:chevron_down} icon_position={:right} icon_variant={:solid} class="hidden items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 hover:bg-gray-50 md:ml-4 md:flex">
<%= if @mode == "month" do %>
<%= gettext("Month view") %>
</button>
</.link>
</div>
</div>
<% else %>
<%= gettext("Week view") %>
<% end %>
<span class="h-5 w-5 text-zinc-400">
<.icon name={:chevron_down} solid />
</span>
</button>
<button type="button" class="ml-5 md:hidden flex items-center rounded-full border border-transparent py-2 text-zinc-400 hover:text-zinc-500" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open menu</span>
<.icon name={:ellipsis_horizontal} solid class="h-5 w-5" />
</button>
</:wrapper>
</.dropdown>
</div>
</div>
</div>
Expand All @@ -124,8 +77,8 @@
<% end %>
</div>
</div>
<div class="flex mx-4 mt-3 gap-1 lg:mx-8 text-zinc-400 text-sm">
<div class="mx-4 mt-3 flex gap-1 text-sm text-zinc-400 lg:mx-8">
<.icon name={:information_circle} outline class="h-5 w-5" />
<p>See here the activities of the organizations you follow.</p>
<p><%= gettext("See here the activities of the organizations you follow.") %></p>
</div>
</.page>

0 comments on commit 1edd9e4

Please sign in to comment.