Chore/UI touchups (#57)

Co-authored-by: ks0m1c_dharma <sakiyamuni@sams.ara>
Co-authored-by: KosmonautX <avivekbala@gmail.com>

assets/js/hooks/floater.js

@@ -111,7 +111,7 @@ function isElementOutOfViewport(el, offsets = {top: 0, bottom:0, left: 0, right:
   if (!el) {
     console.log("[floater] el is null", el)
 
-  }
+  } else {
 
   const rect = el.getBoundingClientRect();
   const { top, bottom, left, right } = offsets;
@@ -122,6 +122,8 @@ function isElementOutOfViewport(el, offsets = {top: 0, bottom:0, left: 0, right:
       rect.bottom + bottom > (window.innerHeight || document.documentElement.clientHeight) ||
       rect.right + right > (window.innerWidth || document.documentElement.clientWidth)
   );
+
+  }
 }
 
 export default Floater;

assets/js/utils/time_utils.js

@@ -7,7 +7,14 @@
  * hh:mm:ss e.g. 00:12:05
  * */
 export const formatDisplayTime = (seconds) => {
-    return new Date(1000 * seconds).toISOString().substring(11, 19)
+  let formatted = null
+  try {
+    formatted = new Date(1000 * seconds).toISOString().substring(11, 19)
+  } catch (e) {
+    console.warn("Errored out when doing time conversions.", e)
+  } finally {
+    return formatted
+  }
 }
 
 export const nowSeconds = () => Math.round(Date.now() / 1000)

config/dev.exs

@@ -30,7 +30,8 @@ config :ex_aws, :retries,
 config :vyasa, VyasaWeb.Endpoint,
   # Binding to loopback ipv4 address prevents access from other machines.
   # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
-  http: [ip: {127, 0, 0, 1}, port: System.get_env("PORT") || 4000],
+  # http: [ip: {127, 0, 0, 1}, port: System.get_env("PORT") || 4000],
+  http: [ip: {0, 0, 0, 0}, port: System.get_env("PORT") || 4000],
   check_origin: false,
   code_reloader: true,
   debug_errors: true,

lib/utils/string.ex

@@ -0,0 +1,11 @@
+defmodule Utils.String do
+  @moduledoc """
+  Contains functions useful for string operations, that need not be
+  web or server-specific.
+  """
+  @doc """
+  Inflexor logic that humanises snake_case string then converts to title case.
+  """
+  def to_title_case(value) when is_binary(value),
+    do: Recase.to_title(value)
+end

lib/vyasa_web.ex

@@ -108,7 +108,8 @@ defmodule VyasaWeb do
       # Core UI components and translation
       import VyasaWeb.CoreComponents
       import VyasaWeb.Gettext
-
+      #String Formating for Display
+      import Utils.String, only: [to_title_case: 1]
       # Shortcut for generating JS commands
       alias Phoenix.LiveView.JS
 

lib/vyasa_web/live/source_live/chapter/index.ex

@@ -99,9 +99,9 @@ defmodule VyasaWeb.SourceLive.Chapter.Index do
 
   defp assign_meta(socket) do
     socket
-    |> assign(:page_title, "#{socket.assigns.source_title} Chapter #{socket.assigns.chap.no} | #{socket.assigns.chap.title}")
+    |> assign(:page_title, "#{to_title_case(socket.assigns.source_title)} Chapter #{socket.assigns.chap.no} | #{socket.assigns.chap.title}")
     |> assign(:meta, %{
-          title: "#{socket.assigns.source_title} Chapter #{socket.assigns.chap.no} | #{socket.assigns.chap.title}",
+          title: "#{to_title_case(socket.assigns.source_title)} Chapter #{socket.assigns.chap.no} | #{socket.assigns.chap.title}",
           description: socket.assigns.chap.body,
           type: "website",
           image: url(~p"/images/the_vyasa_project_1.png"),

lib/vyasa_web/live/source_live/chapter/index.html.heex

@@ -40,5 +40,5 @@
         </:item>
     </.verse_display>
 
-    <.back navigate={~p"/explore/#{@source_title}"}>Back to <%= @source_title %> Chapters</.back>
+    <.back navigate={~p"/explore/#{@source_title}"}>Back to <%= to_title_case(@source_title)%> Chapters</.back>
 </div>

lib/vyasa_web/live/source_live/index.ex

@@ -17,7 +17,6 @@ defmodule VyasaWeb.SourceLive.Index do
     socket
     |> assign(:page_title, "Sources")
     |> assign_meta()
-
   end
 
   defp assign_meta(socket) do

lib/vyasa_web/live/source_live/index.html.heex

@@ -12,7 +12,7 @@
     >
     <:col :let={{_id, source}} label="">
         <div class="font-dn text-2xl">
-            <%= source.title %>
+            <%= to_title_case(source.title) %>
         </div>
     </:col>
     </.table>

lib/vyasa_web/live/source_live/show.ex

@@ -29,8 +29,7 @@ defmodule VyasaWeb.SourceLive.Show do
       socket
       |> assign(:id, id)
       |> assign(:title, title)
-      |> assign(:page_title, title)
-      # |> stream(:verses, verses)
+      |> assign(:page_title, to_title_case(title))
       |> stream(:chapters, chapters |> Enum.sort_by(fn chap -> chap.no end))
       |> assign_meta()
     }

lib/vyasa_web/live/source_live/show.html.heex

@@ -1,7 +1,7 @@
 
 <.header >
     <div class="font-dn text-4xl">
-        <%= @title%>
+        <%= to_title_case(@title)%>
     </div>
 </.header>
 

mix.exs

@@ -67,7 +67,8 @@ defmodule Vyasa.MixProject do
       {:ex_aws, "~> 2.0"},
       {:ex_aws_s3, "~> 2.5"},
       {:live_admin, "~> 0.11.4"},
-      {:req, "~> 0.4.0"}
+      {:req, "~> 0.4.0"},
+      {:recase, "~> 0.5"}
     ]
   end
 

mix.lock

@@ -50,6 +50,7 @@
   "plug_crypto": {:hex, :plug_crypto, "2.0.0", "77515cc10af06645abbfb5e6ad7a3e9714f805ae118fa1a70205f80d2d70fe73", [:mix], [], "hexpm", "53695bae57cc4e54566d993eb01074e4d894b65a3766f1c43e2c61a1b0f45ea9"},
   "postgrex": {:hex, :postgrex, "0.17.3", "c92cda8de2033a7585dae8c61b1d420a1a1322421df84da9a82a6764580c503d", [:mix], [{:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "946cf46935a4fdca7a81448be76ba3503cff082df42c6ec1ff16a4bdfbfb098d"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
+  "recase": {:hex, :recase, "0.7.0", "3f2f719f0886c7a3b7fe469058ec539cb7bbe0023604ae3bce920e186305e5ae", [:mix], [], "hexpm", "36f5756a9f552f4a94b54a695870e32f4e72d5fad9c25e61bc4a3151c08a4e0c"},
   "req": {:hex, :req, "0.4.8", "2b754a3925ddbf4ad78c56f30208ced6aefe111a7ea07fb56c23dccc13eb87ae", [:mix], [{:brotli, "~> 0.3.1", [hex: :brotli, repo: "hexpm", optional: true]}, {:ezstd, "~> 1.0", [hex: :ezstd, repo: "hexpm", optional: true]}, {:finch, "~> 0.9", [hex: :finch, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:nimble_csv, "~> 1.0", [hex: :nimble_csv, repo: "hexpm", optional: true]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "7146e51d52593bb7f20d00b5308a5d7d17d663d6e85cd071452b613a8277100c"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
   "sweet_xml": {:hex, :sweet_xml, "0.7.4", "a8b7e1ce7ecd775c7e8a65d501bc2cd933bff3a9c41ab763f5105688ef485d08", [:mix], [], "hexpm", "e7c4b0bdbf460c928234951def54fe87edf1a170f6896675443279e2dbeba167"},