danvics/pinchflat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use css truncate everywhere and remove StringUtils.truncate function (#513)

Browse source 
Co-authored-by: robs <git@robs.social>
This commit is contained in:
Robert Kleinschuster 2024-12-13 21:23:12 +01:00 committed by GitHub
parent 53e106dac2
commit e9d365ee9e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 20 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
lib/pinchflat/utils/string_utils.ex
View file

@ -25,23 +25,6 @@ defmodule Pinchflat.Utils.StringUtils do
|> String.slice(0..(length - 1))
end
@doc """
Truncates a string to the given length and adds `...` if the string is longer than the given length.
Will break on a word boundary. Nothing happens if the string is shorter than the given length.
Returns binary()
"""
def truncate(string, length) do
if String.length(string) > length do
string
|> String.slice(0..(length - 1))
|> String.replace(~r/\s+\S*$/, "")
|> Kernel.<>("...")
else
string
end
end
@doc """
Wraps a string in double braces. Useful as a UI helper now that
LiveView 1.0.0 allows `{}` for interpolation so now we can't use braces

2
lib/pinchflat_web/components/custom_components/button_components.ex
View file

@ -26,7 +26,7 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
~H"""
<button
class={[
"text-center font-medium text-white",
"text-center font-medium text-white whitespace-nowrap",
"#{@rounding} inline-flex items-center justify-center px-8 py-4",
"#{@color}",
"hover:bg-opacity-90 lg:px-8 xl:px-10",

4
lib/pinchflat_web/components/custom_components/table_components.ex
View file

@ -36,7 +36,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
<tr class="text-left bg-meta-4">
<th
:for={col <- @col}
class={["px-4 py-4 font-medium text-white xl:pl-11", col[:sort_key] && "cursor-pointer"]}
class={["px-4 py-4 font-medium text-white", col[:sort_key] && "cursor-pointer"]}
phx-click={col[:sort_key] && "sort_update"}
phx-value-sort_key={col[:sort_key]}
>
@ -56,7 +56,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
<td
:for={col <- @col}
class={[
"px-4 py-5 pl-9 xl:pl-11",
"px-4 py-5",
col[:class]
]}
>

4
lib/pinchflat_web/controllers/media_items/media_item_html/edit.html.heex
View file

@ -1,6 +1,6 @@
<div class="mb-6 flex gap-3 flex-row items-center">
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
Editing "{StringUtils.truncate(@media_item.title, 35)}"
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4 truncate">
Editing "{@media_item.title}"
</h2>
</div>

6
lib/pinchflat_web/controllers/media_items/media_item_html/show.html.heex
View file

@ -1,10 +1,10 @@
<div class="mb-6 flex gap-3 flex-row items-center justify-between">
<div class="flex gap-3 items-center">
<div class="flex gap-3 items-center min-w-0">
<.link href={~p"/sources/#{@media_item.source_id}"}>
<.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
</.link>
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
{StringUtils.truncate(@media_item.title, 35)}
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4 truncate">
{@media_item.title}
</h2>
</div>

2
lib/pinchflat_web/controllers/media_profiles/media_profile_html/edit.html.heex
View file

@ -2,7 +2,7 @@
<.link href={~p"/media_profiles"}>
<.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
</.link>
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4 truncate">
Editing "{@media_profile.name}"
</h2>
</div>

2
lib/pinchflat_web/controllers/media_profiles/media_profile_html/index.html.heex
View file

@ -14,7 +14,7 @@
<div class="max-w-full overflow-x-auto">
<div class="flex flex-col gap-10 min-w-max">
<.table rows={@media_profiles} table_class="text-black dark:text-white">
<:col :let={media_profile} label="Name">
<:col :let={media_profile} label="Name" class="truncate max-w-xs">
<.subtle_link href={~p"/media_profiles/#{media_profile.id}"}>
{media_profile.name}
</.subtle_link>

4
lib/pinchflat_web/controllers/media_profiles/media_profile_html/show.html.heex
View file

@ -1,9 +1,9 @@
<div class="mb-6 flex gap-3 flex-row items-center justify-between">
<div class="flex items-center">
<div class="flex items-center min-w-0">
<.link href={~p"/media_profiles"}>
<.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
</.link>
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-2">
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-2 truncate">
{@media_profile.name}
</h2>
</div>

4
lib/pinchflat_web/controllers/searches/search_html/show.html.heex
View file

@ -1,6 +1,6 @@
<div class="mb-6 flex gap-3 flex-row items-center justify-between">
<h2 class="text-title-md2 font-bold text-black dark:text-white">
Results for "{StringUtils.truncate(@search_term, 50)}"
<h2 class="text-title-md2 font-bold text-black dark:text-white truncate">
Results for "{@search_term}"
</h2>
</div>

2
lib/pinchflat_web/controllers/sources/source_html/edit.html.heex
View file

@ -2,7 +2,7 @@
<.link href={~p"/sources"}>
<.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
</.link>
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4 truncate">
Editing "{@source.custom_name}"
</h2>
</div>

4
lib/pinchflat_web/controllers/sources/source_html/show.html.heex
View file

@ -1,9 +1,9 @@
<div class="mb-6 flex gap-3 flex-row items-center justify-between">
<div class="flex gap-3 items-center">
<div class="flex gap-3 items-center min-w-0">
<.link href={~p"/sources"}>
<.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
</.link>
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4 truncate">
{@source.custom_name}
</h2>
</div>

2
lib/pinchflat_web/controllers/sources/source_live/index_table_live.html.heex
View file

@ -18,7 +18,7 @@
<:col :let={source} label="Size" sort_key="media_size_bytes">
<.readable_filesize byte_size={source.media_size_bytes} />
</:col>
<:col :let={source} label="Media Profile" sort_key="media_profile_name">
<:col :let={source} label="Media Profile" sort_key="media_profile_name" class="truncate max-w-xs">
<.subtle_link href={~p"/media_profiles/#{source.media_profile_id}"}>
{source.media_profile.name}
</.subtle_link>

14
test/pinchflat/utils/string_utils_test.exs
View file

@ -28,20 +28,6 @@ defmodule Pinchflat.Utils.StringUtilsTest do
end
end
describe "truncate/2" do
test "truncates a string to the given length and adds ..." do
assert StringUtils.truncate("hello world", 5) == "hello..."
end
test "breaks on a word boundary" do
assert StringUtils.truncate("hello world", 7) == "hello..."
end
test "does not truncate a string shorter than the given length" do
assert StringUtils.truncate("hello", 10) == "hello"
end
end
describe "double_brace/1" do
test "wraps a string in double braces" do
assert StringUtils.double_brace("hello") == "{{ hello }}"

4
test/pinchflat_web/controllers/pages/job_table_live_test.exs
View file

@ -48,7 +48,7 @@ defmodule PinchflatWeb.Pages.JobTableLiveTest do
{_source, media_item, _task, _job} = create_media_item_job()
{:ok, _view, html} = live_isolated(conn, JobTableLive, session: %{})
assert html =~ StringUtils.truncate(media_item.title, 35)
assert html =~ media_item.title
end
test "shows a media item link", %{conn: conn} do
@ -62,7 +62,7 @@ defmodule PinchflatWeb.Pages.JobTableLiveTest do
{source, _task, _job} = create_source_job()
{:ok, _view, html} = live_isolated(conn, JobTableLive, session: %{})
assert html =~ StringUtils.truncate(source.custom_name, 35)
assert html =~ source.custom_name
end
test "shows a source link", %{conn: conn} do