From 6c9d193c46622d2ebdc2572fb839e900f19a647d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Cirio?= Date: Mon, 6 May 2024 13:41:59 -0300 Subject: [PATCH 01/21] adjust card size + move progress bar to the bottom --- lib/oli_web/components/common.ex | 2 +- .../live/delivery/student/learn_live.ex | 128 +++++++++--------- 2 files changed, 65 insertions(+), 65 deletions(-) diff --git a/lib/oli_web/components/common.ex b/lib/oli_web/components/common.ex index 2ec30286b93..4a1005455bf 100644 --- a/lib/oli_web/components/common.ex +++ b/lib/oli_web/components/common.ex @@ -603,7 +603,7 @@ defmodule OliWeb.Components.Common do
-
+
<.card card={@unit} module_index={1} @@ -868,7 +868,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do <.progress_bar percent={@progress} width="100px" - on_going_colour="bg-[#0F6CF5]" + on_going_colour="bg-[#0CAF61]" completed_colour="bg-[#0CAF61]" role={"unit_#{@unit["numbering"]["index"]}_progress"} show_percent={@progress != 100} @@ -894,14 +894,14 @@ defmodule OliWeb.Delivery.Student.LearnLive do
- <.custom_focus_wrap +
- <.intro_video_card - :if={@unit["intro_video"]} - video_url={@unit["intro_video"]} - card_resource_id={@unit["resource_id"]} - resource_id={@unit["resource_id"]} - intro_video_viewed={@unit["resource_id"] in @viewed_intro_video_resource_ids} - is_youtube_video={WebUtils.is_youtube_video?(@unit["intro_video"])} - unit_resource_id={@unit["resource_id"]} - /> - <.card - :for={module <- @unit["children"]} - card={module} - module_index={module["numbering"]["index"]} - unit_resource_id={@unit["resource_id"]} - unit_numbering_index={@unit["numbering"]["index"]} - bg_image_url={module["poster_image"]} - student_progress_per_resource_id={@student_progress_per_resource_id} - selected={ - @selected_module_per_unit_resource_id[@unit["resource_id"]]["resource_id"] == - module["resource_id"] - } - /> - + <.custom_focus_wrap + id={"slider_focus_wrap_#{@unit["resource_id"]}"} + initially_enabled={false} + class="flex" + > + <.intro_video_card + :if={@unit["intro_video"]} + video_url={@unit["intro_video"]} + card_resource_id={@unit["resource_id"]} + resource_id={@unit["resource_id"]} + intro_video_viewed={@unit["resource_id"] in @viewed_intro_video_resource_ids} + is_youtube_video={WebUtils.is_youtube_video?(@unit["intro_video"])} + unit_resource_id={@unit["resource_id"]} + /> + <.card + :for={module <- @unit["children"]} + card={module} + module_index={module["numbering"]["index"]} + unit_resource_id={@unit["resource_id"]} + unit_numbering_index={@unit["numbering"]["index"]} + bg_image_url={module["poster_image"]} + student_progress_per_resource_id={@student_progress_per_resource_id} + selected={ + @selected_module_per_unit_resource_id[@unit["resource_id"]]["resource_id"] == + module["resource_id"] + } + /> + +
<.custom_focus_wrap @@ -1986,7 +1991,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do phx-value-slug={@card["slug"]} phx-value-type={if @is_page, do: "page", else: "module"} class={[ - "relative hover:scale-[1.01] transition-transform duration-150 mr-4", + "relative slider-card hover:scale-[1.01] transition-transform duration-150 mr-4", if(!@is_page, do: "slider-card") ]} role={"card_#{@module_index}"} From bbb3d43ae85243e016fc58e46d235c0b1d303edf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Cirio?= Date: Mon, 6 May 2024 14:19:43 -0300 Subject: [PATCH 03/21] always show progress bar on cards --- lib/oli_web/live/delivery/student/learn_live.ex | 8 ++------ test/oli_web/live/delivery/student/learn_live_test.exs | 7 +++---- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/lib/oli_web/live/delivery/student/learn_live.ex b/lib/oli_web/live/delivery/student/learn_live.ex index 4eee59f56b9..9183c975b27 100644 --- a/lib/oli_web/live/delivery/student/learn_live.ex +++ b/lib/oli_web/live/delivery/student/learn_live.ex @@ -1911,7 +1911,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do phx-value-module_resource_id={@resource_id} phx-value-is_intro_video="true" > -
+
<.progress_bar percent={if @intro_video_viewed, do: 100, else: 0} @@ -1999,7 +1999,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do data-leave-event={leave_unit(@unit_resource_id)} >
-
+
<.progress_bar percent={ parse_student_progress_for_resource( @@ -2411,10 +2411,6 @@ defmodule OliWeb.Delivery.Student.LearnLive do end) end - defp progress_started(student_progress_per_resource_id, resource_id) do - Map.get(student_progress_per_resource_id, resource_id, 0.0) > 0.0 - end - defp parse_student_progress_for_resource(student_progress_per_resource_id, resource_id) do Map.get(student_progress_per_resource_id, resource_id, 0.0) |> Kernel.*(100) diff --git a/test/oli_web/live/delivery/student/learn_live_test.exs b/test/oli_web/live/delivery/student/learn_live_test.exs index 3918489d6aa..40e3cf85ebb 100644 --- a/test/oli_web/live/delivery/student/learn_live_test.exs +++ b/test/oli_web/live/delivery/student/learn_live_test.exs @@ -1469,13 +1469,12 @@ defmodule OliWeb.Delivery.Student.ContentLiveTest do ) end - test "progress bar is not rendered when there is no progress", + test "progress bar is rendered EVEN when there is no progress", %{conn: conn, section: section} do {:ok, view, _html} = live(conn, Utils.learn_live_path(section.slug)) - # no progress yet, so progress bar is not rendered - refute has_element?(view, ~s{div[role="unit_1"] div[role="card_1_progress"]}) - refute has_element?(view, ~s{div[role="unit_3"] div[role="card_1_progress"]}) + assert has_element?(view, ~s{div[role="unit_1"] div[role="card 1 progress"]}) + assert has_element?(view, ~s{div[role="unit_3"] div[role="card 8 progress"]}) end test "can see card progress bar for modules at level 2 of hierarchy, and even for pages at level 2", From 0ded283396abb8e0f51d925b906de89e4a78ceef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Cirio?= Date: Mon, 6 May 2024 15:06:13 -0300 Subject: [PATCH 04/21] swapped the positions of the progress bars and dates --- .../live/delivery/student/learn_live.ex | 58 +++++++++---------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/lib/oli_web/live/delivery/student/learn_live.ex b/lib/oli_web/live/delivery/student/learn_live.ex index 9183c975b27..8a6372f232b 100644 --- a/lib/oli_web/live/delivery/student/learn_live.ex +++ b/lib/oli_web/live/delivery/student/learn_live.ex @@ -847,11 +847,11 @@ defmodule OliWeb.Delivery.Student.LearnLive do <%= "UNIT #{@unit["numbering"]["index"]}" %>
-

- <%= @unit["title"] %> -

-
-
+
+

+ <%= @unit["title"] %> +

+
Due: @@ -863,31 +863,31 @@ defmodule OliWeb.Delivery.Student.LearnLive do ) %>
-
- - <.progress_bar - percent={@progress} - width="100px" - on_going_colour="bg-[#0CAF61]" - completed_colour="bg-[#0CAF61]" - role={"unit_#{@unit["numbering"]["index"]}_progress"} - show_percent={@progress != 100} +
+
+ <.progress_bar + percent={@progress} + width="194px" + on_going_colour="bg-[#0CAF61]" + completed_colour="bg-[#0CAF61]" + role={"unit_#{@unit["numbering"]["index"]}_progress"} + show_percent={@progress != 100} + /> + + - - - -
+ +
From 895dddef8f37a82a45109b08ce2b7211a822682d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Cirio?= Date: Tue, 7 May 2024 13:48:18 -0300 Subject: [PATCH 05/21] module completed and total pages WIP --- .../live/delivery/student/learn_live.ex | 163 +++++++++++++++--- 1 file changed, 136 insertions(+), 27 deletions(-) diff --git a/lib/oli_web/live/delivery/student/learn_live.ex b/lib/oli_web/live/delivery/student/learn_live.ex index 8a6372f232b..ce5d2157387 100644 --- a/lib/oli_web/live/delivery/student/learn_live.ex +++ b/lib/oli_web/live/delivery/student/learn_live.ex @@ -63,6 +63,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do student_progress_per_resource_id: %{}, student_raw_avg_score_per_page_id: %{}, student_raw_avg_score_per_container_id: %{}, + page_metrics_per_module_id: %{}, viewed_intro_video_resource_ids: get_viewed_intro_video_resource_ids( section.slug, @@ -108,7 +109,6 @@ defmodule OliWeb.Delivery.Student.LearnLive do socket |> assign(selected_view: selected_view) |> update(:units, fn _units -> full_hierarchy["children"] end) - |> maybe_enable_gallery_slider_buttons(full_hierarchy, selected_view) |> scroll_to_target_resource(resource_id, full_hierarchy, selected_view)} %{"selected_view" => selected_view} -> @@ -117,13 +117,11 @@ defmodule OliWeb.Delivery.Student.LearnLive do {:noreply, socket |> assign(selected_view: selected_view) - |> update(:units, fn _units -> full_hierarchy["children"] end) - |> maybe_enable_gallery_slider_buttons(full_hierarchy, selected_view)} + |> update(:units, fn _units -> full_hierarchy["children"] end)} %{"target_resource_id" => resource_id} -> {:noreply, socket - |> maybe_enable_gallery_slider_buttons(full_hierarchy, :gallery) |> scroll_to_target_resource(resource_id, full_hierarchy, :gallery)} _ -> @@ -621,8 +619,6 @@ defmodule OliWeb.Delivery.Student.LearnLive do selected_view: selected_view } = socket.assigns - full_hierarchy = get_or_compute_full_hierarchy(section) - send(self(), :gc) {:noreply, @@ -647,8 +643,8 @@ defmodule OliWeb.Delivery.Student.LearnLive do end ) ) - |> update(:units, fn _units -> full_hierarchy["children"] end) - |> maybe_enable_gallery_slider_buttons(full_hierarchy, selected_view)} + |> update(:units, fn _units -> get_or_compute_full_hierarchy(section)["children"] end) + |> maybe_assign_gallery_data(selected_view)} end # needed to ignore results of Task invocation @@ -724,6 +720,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do student_end_date_exceptions_per_resource_id={@student_end_date_exceptions_per_resource_id} selected_module_per_unit_resource_id={@selected_module_per_unit_resource_id} student_raw_avg_score_per_page_id={@student_raw_avg_score_per_page_id} + page_metrics_per_module_id={@page_metrics_per_module_id} viewed_intro_video_resource_ids={@viewed_intro_video_resource_ids} progress={ parse_student_progress_for_resource( @@ -759,6 +756,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do attr :unit_raw_avg_score, :map attr :assistant_enabled, :boolean, required: true attr :display_props_per_module_id, :map + attr :page_metrics_per_module_id, :map # top level page as a card with title and header def gallery_row(%{unit: %{"resource_type_id" => 1}} = assigns) do @@ -939,6 +937,10 @@ defmodule OliWeb.Delivery.Student.LearnLive do @selected_module_per_unit_resource_id[@unit["resource_id"]]["resource_id"] == module["resource_id"] } + page_metrics={ + @page_metrics_per_module_id[module["resource_id"]] || + %{total_pages_count: 0, completed_pages_count: 0, total_duration_minutes: 0} + } />
@@ -1286,6 +1288,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do attr :show_completed_pages, :boolean, default: true def module_content_header(assigns) do + # TODO, do not recalculate module metrics! ~H"""
@@ -1295,9 +1298,12 @@ defmodule OliWeb.Delivery.Student.LearnLive do
- <%= case count_completed_and_total_pages(@module) do - {1, 1} -> "1 of 1 Page" - {completed_count, total_count} -> "#{completed_count} of #{total_count} Pages" + <%= case module_page_metrics(@module) do + %{total_pages_count: 1, completed_pages_count: 1} -> + "1 of 1 Page" + + %{total_pages_count: total_count, completed_pages_count: completed_count} -> + "#{completed_count} of #{total_count} Pages" end %>
@@ -1628,7 +1634,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do
@page_resource_type_id} = page, + %{ + total_pages_count: total_pages_count, + completed_pages_count: completed_pages_count, + total_duration_minutes: total_duration_minutes + } -> + %{ + total_pages_count: total_pages_count + 1, + completed_pages_count: completed_pages_count + if(page["completed"], do: 1, else: 0), + total_duration_minutes: total_duration_minutes + (page["duration_minutes"] || 0) + } - Enum.reduce(container["children"], {0, 0}, fn - %{"resource_type_id" => ^page_resource_type_id} = page, {completed_count, total_count} -> - {if(page["completed"], do: 1, else: 0) + completed_count, total_count + 1} + %{"resource_type_id" => @container_resource_type_id} = section, + %{ + total_pages_count: total_pages_count, + completed_pages_count: completed_pages_count, + total_duration_minutes: total_duration_minutes + } -> + %{ + total_pages_count: total, + completed_pages_count: completed, + total_duration_minutes: minutes + } = + module_page_metrics(section) + + %{ + total_pages_count: total_pages_count + total, + completed_pages_count: completed_pages_count + completed, + total_duration_minutes: total_duration_minutes + minutes + } + end + ) + end - %{"resource_type_id" => ^container_resource_type_id} = section, - {completed_count, total_count} -> - {completed, total} = count_completed_and_total_pages(section) + defp page_metrics_per_module_id(resources, pages_per_module_id \\ %{}) - {completed + completed_count, total + total_count} - end) + defp page_metrics_per_module_id([], pages_per_module_id), do: pages_per_module_id + + defp page_metrics_per_module_id( + [ + %{"numbering" => %{"level" => level}, "resource_type_id" => resource_type_id} = + resource + | rest + ], + pages_per_module_id + ) do + resource_completed_and_total_pages = + case {level, resource_type_id} do + {1, @container_resource_type_id} -> + # unit + Map.merge( + pages_per_module_id, + page_metrics_per_module_id(resource["children"], pages_per_module_id) + ) + + {2, @container_resource_type_id} -> + # module + page_metrics_per_module_id( + rest, + Map.merge(pages_per_module_id, %{ + resource["resource_id"] => module_page_metrics(resource) + }) + ) + + _ -> + pages_per_module_id + end + + page_metrics_per_module_id(rest, resource_completed_and_total_pages) end defp display_module_item?( @@ -2467,22 +2545,53 @@ defmodule OliWeb.Delivery.Student.LearnLive do push_event(socket, "scroll-y-to-target", %{id: "unit_#{unit_resource_id}", offset: 80}) end + _docp = """ + When rendering learn page in gallery view, we need to calculate the unit and module metrics + """ + + defp maybe_assign_gallery_data(socket, :gallery) do + %{ + units: units, + student_visited_pages: student_visited_pages, + student_raw_avg_score_per_page_id: student_raw_avg_score_per_page_id, + student_progress_per_resource_id: student_progress_per_resource_id, + section: section + } = socket.assigns + + units_with_metrics = + units + |> Enum.map(fn unit -> + unit + |> mark_visited_and_completed_pages( + student_visited_pages, + student_raw_avg_score_per_page_id, + student_progress_per_resource_id + ) + |> fetch_learning_objectives(section.id) + end) + + socket + |> update(:units, fn _units -> units_with_metrics end) + |> assign(page_metrics_per_module_id: page_metrics_per_module_id(units_with_metrics)) + |> enable_gallery_slider_buttons() + end + + defp maybe_assign_gallery_data(socket, _another_view), do: socket + _docp = """ When rendering learn page in gallery view, we need to execute the Scroller hook to enable the slider buttons """ - defp maybe_enable_gallery_slider_buttons(socket, full_hierarchy, :gallery) do + defp enable_gallery_slider_buttons(socket) do push_event(socket, "enable-slider-buttons", %{ unit_resource_ids: Enum.map( - full_hierarchy["children"], + socket.assigns.units, & &1["resource_id"] ) }) end - defp maybe_enable_gallery_slider_buttons(socket, _full_hierarchy, _selected_view), do: socket - defp module_has_intro_video(module), do: module["intro_video"] != nil _docp = """ From 28f25e01e87e185cc4f45cb507ad0f91fafb49d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Cirio?= Date: Tue, 7 May 2024 13:56:01 -0300 Subject: [PATCH 06/21] reuse module page metrics instead of recalculateing them on module expand --- lib/oli_web/live/delivery/student/learn_live.ex | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/lib/oli_web/live/delivery/student/learn_live.ex b/lib/oli_web/live/delivery/student/learn_live.ex index ce5d2157387..3745a2d2d69 100644 --- a/lib/oli_web/live/delivery/student/learn_live.ex +++ b/lib/oli_web/live/delivery/student/learn_live.ex @@ -1073,9 +1073,10 @@ defmodule OliWeb.Delivery.Student.LearnLive do >
<% module = - Map.get(assigns.selected_module_per_unit_resource_id, assigns.unit["resource_id"]) %> + Map.get(@selected_module_per_unit_resource_id, @unit["resource_id"]) %> <.module_content_header module={module} + page_metrics={@page_metrics_per_module_id[module["resource_id"]]} show_completed_pages={ get_in( @display_props_per_module_id, @@ -1287,8 +1288,10 @@ defmodule OliWeb.Delivery.Student.LearnLive do attr :module, :map attr :show_completed_pages, :boolean, default: true + attr :page_metrics, :map, + default: %{total_pages_count: 0, completed_pages_count: 0, total_duration_minutes: 0} + def module_content_header(assigns) do - # TODO, do not recalculate module metrics! ~H"""
@@ -1298,7 +1301,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do
- <%= case module_page_metrics(@module) do + <%= case @page_metrics do %{total_pages_count: 1, completed_pages_count: 1} -> "1 of 1 Page" From ae903b6943d551840ae99a65563a40f339b55595 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Cirio?= Date: Tue, 7 May 2024 14:09:08 -0300 Subject: [PATCH 07/21] refactor to use default_module_page_metrics attr in all liveview --- .../live/delivery/student/learn_live.ex | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/lib/oli_web/live/delivery/student/learn_live.ex b/lib/oli_web/live/delivery/student/learn_live.ex index 3745a2d2d69..c5f36a3723d 100644 --- a/lib/oli_web/live/delivery/student/learn_live.ex +++ b/lib/oli_web/live/delivery/student/learn_live.ex @@ -18,6 +18,12 @@ defmodule OliWeb.Delivery.Student.LearnLive do @default_selected_view :gallery + @default_module_page_metrics %{ + total_pages_count: 0, + completed_pages_count: 0, + total_duration_minutes: 0 + } + @default_image "/images/course_default.jpg" # this is an optimization to reduce the memory footprint of the liveview process @required_keys_per_assign %{ @@ -938,8 +944,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do module["resource_id"] } page_metrics={ - @page_metrics_per_module_id[module["resource_id"]] || - %{total_pages_count: 0, completed_pages_count: 0, total_duration_minutes: 0} + get_module_page_metrics(@page_metrics_per_module_id, module["resource_id"]) } /> @@ -1076,7 +1081,9 @@ defmodule OliWeb.Delivery.Student.LearnLive do Map.get(@selected_module_per_unit_resource_id, @unit["resource_id"]) %> <.module_content_header module={module} - page_metrics={@page_metrics_per_module_id[module["resource_id"]]} + page_metrics={ + get_module_page_metrics(@page_metrics_per_module_id, module["resource_id"]) + } show_completed_pages={ get_in( @display_props_per_module_id, @@ -1287,9 +1294,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do attr :module, :map attr :show_completed_pages, :boolean, default: true - - attr :page_metrics, :map, - default: %{total_pages_count: 0, completed_pages_count: 0, total_duration_minutes: 0} + attr :page_metrics, :map, default: @default_module_page_metrics def module_content_header(assigns) do ~H""" @@ -1978,9 +1983,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do attr :bg_image_url, :string, doc: "the background image url for the card" attr :student_progress_per_resource_id, :map attr :default_image, :string, default: @default_image - - attr :page_metrics, :map, - default: %{total_pages_count: 0, completed_pages_count: 0, total_duration_minutes: 0} + attr :page_metrics, :map, default: @default_module_page_metrics def card(assigns) do assigns = Map.put(assigns, :is_page, is_page(assigns.card)) @@ -2310,7 +2313,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do defp module_page_metrics(container) do Enum.reduce( container["children"], - %{total_pages_count: 0, completed_pages_count: 0, total_duration_minutes: 0}, + @default_module_page_metrics, fn %{"resource_type_id" => @page_resource_type_id} = page, %{ @@ -2827,4 +2830,8 @@ defmodule OliWeb.Delivery.Student.LearnLive do find_module_ancestor(hierarchy, parent["resource_id"], container_resource_type_id) end end + + defp get_module_page_metrics(page_metrics_per_module_id, module_resource_id) do + page_metrics_per_module_id[module_resource_id] || @default_module_page_metrics + end end From 1673fc5c5020b77cd6d1f4de03e5a433ee5454ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Cirio?= Date: Thu, 9 May 2024 09:14:26 -0300 Subject: [PATCH 08/21] card_badge WIP --- .../live/delivery/student/learn_live.ex | 61 ++++++++++++++++--- 1 file changed, 52 insertions(+), 9 deletions(-) diff --git a/lib/oli_web/live/delivery/student/learn_live.ex b/lib/oli_web/live/delivery/student/learn_live.ex index 8086f9175b9..fff97a788d7 100644 --- a/lib/oli_web/live/delivery/student/learn_live.ex +++ b/lib/oli_web/live/delivery/student/learn_live.ex @@ -2047,15 +2047,7 @@ defmodule OliWeb.Delivery.Student.LearnLive do
<%= @card["title"] %>
-
-
- <%= @page_metrics.completed_pages_count %> - <%= @page_metrics.total_pages_count %> - <%= @page_metrics.total_duration_minutes %> -
- -
- Completed!! -
-
+ <.card_badge :if={!@is_page} page_metrics={@page_metrics} />
+
+ <%= parse_module_total_pages(@page_metrics.total_pages_count) %> · <%= parse_module_total_minutes( + @page_metrics.total_duration_minutes + ) %> +
+
+ +
+
+
+
+
+ """ + end + attr :graded, :boolean def page_icon(assigns) do @@ -2744,4 +2762,29 @@ defmodule OliWeb.Delivery.Student.LearnLive do defp get_module_page_metrics(page_metrics_per_module_id, module_resource_id) do page_metrics_per_module_id[module_resource_id] || @default_module_page_metrics end + + defp parse_module_total_pages(pages) when is_integer(pages) do + pages + |> case do + 1 -> "1 page" + _ -> "#{pages} pages" + end + end + + defp parse_module_total_pages(_), do: "unknown pages" + + defp parse_module_total_minutes(minutes) when is_integer(minutes) do + minutes + |> Timex.Duration.from_minutes() + |> Timex.Duration.to_clock() + |> case do + {hours, minutes, _seconds, _milliseconds} when hours > 0 -> + "#{hours}h #{minutes}m" + + {_, minutes, _seconds, _milliseconds} -> + "#{minutes}m" + end + end + + defp parse_module_total_minutes(_), do: "unknown time" end From 987ac1a9ee8fdf4c927e4c9ab8a29e7f66ee848f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Cirio?= Date: Thu, 9 May 2024 10:30:56 -0300 Subject: [PATCH 09/21] style card badge --- .../live/delivery/student/learn_live.ex | 53 ++++++++++++++++--- 1 file changed, 46 insertions(+), 7 deletions(-) diff --git a/lib/oli_web/live/delivery/student/learn_live.ex b/lib/oli_web/live/delivery/student/learn_live.ex index fcbb92f75ec..25d14594b10 100644 --- a/lib/oli_web/live/delivery/student/learn_live.ex +++ b/lib/oli_web/live/delivery/student/learn_live.ex @@ -1942,7 +1942,13 @@ defmodule OliWeb.Delivery.Student.LearnLive do
<%= @card["title"] %>
- <.card_badge :if={!@is_page} page_metrics={@page_metrics} /> +
+ <.card_badge + :if={!@is_page} + page_metrics={@page_metrics} + resource_id={@card["resource_id"]} + /> +
@@ -1971,13 +1987,36 @@ defmodule OliWeb.Delivery.Student.LearnLive do ) %>
+ """ + end + + def card_badge( + %{ + page_metrics: %{ + completed_pages_count: completed_pages_count, + total_pages_count: total_pages_count + } + } = + assigns + ) + when completed_pages_count == total_pages_count do + ~H""" +
+ +
-
-
+ +
+ <%= parse_module_total_pages(@page_metrics.total_pages_count) %> · <%= parse_module_total_minutes( + @page_metrics.total_duration_minutes + ) %>
""" From 627619bfce87241da3664edb94d8d216bafbb9b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Cirio?= Date: Thu, 9 May 2024 12:10:43 -0300 Subject: [PATCH 10/21] expand and collapse completed card badge on hover --- assets/src/phoenix/app.ts | 16 ++++++++++ .../live/delivery/student/learn_live.ex | 29 +++++++++---------- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/assets/src/phoenix/app.ts b/assets/src/phoenix/app.ts index 985e4581600..4f43f371a8e 100644 --- a/assets/src/phoenix/app.ts +++ b/assets/src/phoenix/app.ts @@ -169,6 +169,22 @@ window.addEventListener('phx:js-exec', ({ detail }: any) => { }); }); +window.addEventListener('mouseover', (e: any) => { + // if the event's target has the xphx-mouseover attribute, + // execute the commands on that element + if (e.target.matches('[xphx-mouseover]')) { + liveSocket.execJS(e.target, e.target.getAttribute('xphx-mouseover')); + } +}); + +window.addEventListener('mouseout', (e: any) => { + // if the event's target has the xphx-mouseout attribute, + // execute the commands on that element + if (e.target.matches('[xphx-mouseout]')) { + liveSocket.execJS(e.target, e.target.getAttribute('xphx-mouseout')); + } +}); + declare global { interface Window { liveSocket: typeof liveSocket; diff --git a/lib/oli_web/live/delivery/student/learn_live.ex b/lib/oli_web/live/delivery/student/learn_live.ex index 25d14594b10..b4a27bb196d 100644 --- a/lib/oli_web/live/delivery/student/learn_live.ex +++ b/lib/oli_web/live/delivery/student/learn_live.ex @@ -1904,7 +1904,11 @@ defmodule OliWeb.Delivery.Student.LearnLive do data-enter-event={enter_module(@unit_resource_id)} data-leave-event={leave_unit(@unit_resource_id)} > -
+
<.progress_bar percent={ @@ -1934,15 +1938,15 @@ defmodule OliWeb.Delivery.Student.LearnLive do ]} style={"background-image: url('#{if(@bg_image_url in ["", nil], do: @default_image, else: @bg_image_url)}');"} > - + <%= if @is_page, do: Phoenix.HTML.raw(" "), else: "#{@unit_numbering_index}.#{@module_index}" %> -
+
<%= @card["title"] %>
-
+
<.card_badge :if={!@is_page} page_metrics={@page_metrics} @@ -2001,19 +2005,12 @@ defmodule OliWeb.Delivery.Student.LearnLive do ) when completed_pages_count == total_pages_count do ~H""" -
- -
- -