use css truncate everywhere and remove StringUtils.truncate function (#513)
Co-authored-by: robs <git@robs.social>
This commit is contained in:
Robert Kleinschuster
committed by
GitHub
GitHub
parent
53e106dac2
commit
e9d365ee9e
@@ -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
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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]
|
||||
]}
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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,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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user