Improve index tables and improved consistency (#97)

* Simplifies index pages

* Improved UX of more pages
This commit is contained in:
Kieran
2024-03-19 14:03:02 -07:00
committed by GitHub
parent 70dd95211f
commit c046abf36f
12 changed files with 48 additions and 32 deletions
@@ -30,7 +30,7 @@
method="delete"
data-confirm="Are you sure you want to delete this record and all associated files on disk? This cannot be undone."
>
<.button color="bg-meta-1" rounding="rounded-full">
<.button color="bg-meta-1" rounding="rounded-lg">
Delete Files
</.button>
</.link>
@@ -2,7 +2,9 @@
<.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">Edit Media Profile</h2>
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
Editing "<%= @media_profile.name %>"
</h2>
</div>
<div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
@@ -4,7 +4,7 @@
</h2>
<nav>
<.link href={~p"/media_profiles/new"}>
<.button color="bg-primary" rounding="rounded-full">
<.button color="bg-primary" rounding="rounded-lg">
<span class="font-bold text-xl mx-2">+</span> New <span class="hidden sm:inline pl-1">Media Profile</span>
</.button>
</.link>
@@ -16,10 +16,9 @@
<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">
<%= media_profile.name %>
</:col>
<:col :let={media_profile} label="Output Template">
<code class="text-sm"><%= media_profile.output_path_template %></code>
<.subtle_link href={~p"/media_profiles/#{media_profile.id}"}>
<%= media_profile.name %>
</.subtle_link>
</:col>
<:col :let={media_profile} label="Preferred Resolution">
<%= media_profile.preferred_resolution %>
@@ -4,13 +4,13 @@
<.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">
Media Profile <span class="hidden sm:inline">#<%= @media_profile.id %></span>
<%= @media_profile.name %>
</h2>
</div>
<nav>
<.link href={~p"/media_profiles/#{@media_profile}/edit"}>
<.button color="bg-primary" rounding="rounded-full">
<.button color="bg-primary" rounding="rounded-lg">
<.icon name="hero-pencil-square" class="mr-2" />Edit <span class="hidden sm:inline pl-1">Media Profile</span>
</.button>
</.link>
@@ -31,7 +31,7 @@
method="delete"
data-confirm="Are you sure you want to delete this profile and all its sources (leaving files in place)? This cannot be undone."
>
<.button color="bg-meta-1" rounding="rounded-full">
<.button color="bg-meta-1" rounding="rounded-lg">
Delete Profile and its Sources
</.button>
</.link>
@@ -41,7 +41,7 @@
data-confirm="Are you sure you want to delete this profile, all its sources, and its files on disk? This cannot be undone."
class="mt-5 md:mt-0"
>
<.button color="bg-meta-1" rounding="rounded-full">
<.button color="bg-meta-1" rounding="rounded-lg">
Delete Profile, Sources, and Files
</.button>
</.link>
@@ -11,7 +11,7 @@
<p class="text-md text-bodydark">Don't worry, you can create more Media Profiles later!</p>
<div class="mt-8">
<.link href={~p"/media_profiles/new"}>
<.button color="bg-primary" rounding="rounded-full" disabled={@media_profiles_exist}>
<.button color="bg-primary" rounding="rounded-lg" disabled={@media_profiles_exist}>
<span class="font-bold mx-2">+</span> New Media Profile
</.button>
</.link>
@@ -25,7 +25,7 @@
</p>
<div class="mt-8">
<.link href={~p"/sources/new"}>
<.button color="bg-primary" rounding="rounded-full" disabled={not @media_profiles_exist}>
<.button color="bg-primary" rounding="rounded-lg" disabled={not @media_profiles_exist}>
<span class="font-bold mx-2">+</span> New Source
</.button>
</.link>
@@ -40,7 +40,7 @@
<p class="text-md text-bodydark">Feel free to add more Media Profiles or Sources in the meantime!</p>
<div class="mt-8">
<.link href={~p"/?onboarding=0"}>
<.button color="bg-primary" rounding="rounded-full" disabled={not @sources_exist}>
<.button color="bg-primary" rounding="rounded-lg" disabled={not @sources_exist}>
Let's Go <span class="font-bold mx-2">🚀</span>
</.button>
</.link>
@@ -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">
<span class="hidden sm:inline">Search </span>Results for "<%= StringUtils.truncate(@search_term, 50) %>"
Results for "<%= StringUtils.truncate(@search_term, 50) %>"
</h2>
</div>
@@ -10,7 +10,7 @@
<%= if match?([_|_], @search_results) do %>
<.table rows={@search_results} table_class="text-black dark:text-white">
<:col :let={result} label="Title">
<%= StringUtils.truncate(result.title, 40) %>
<%= result.title %>
</:col>
<:col :let={result} label="Excerpt">
<.highlight_search_terms text={result.matching_search_term} />
@@ -2,7 +2,9 @@
<.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">Edit Source</h2>
<h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
Editing "<%= @source.custom_name %>"
</h2>
</div>
<div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
@@ -2,7 +2,7 @@
<h2 class="text-title-md2 font-bold text-black dark:text-white">Sources</h2>
<nav>
<.link href={~p"/sources/new"}>
<.button color="bg-primary" rounding="rounded-full">
<.button color="bg-primary" rounding="rounded-lg">
<span class="font-bold mx-2">+</span> New <span class="hidden sm:inline pl-1">Source</span>
</.button>
</.link>
@@ -14,19 +14,18 @@
<div class="flex flex-col gap-10 min-w-max">
<.table rows={@sources} table_class="text-black dark:text-white">
<:col :let={source} label="Name">
<%= source.custom_name || source.collection_name %>
<.subtle_link href={~p"/sources/#{source.id}"}>
<%= source.custom_name || source.collection_name %>
</.subtle_link>
</:col>
<:col :let={source} label="Type"><%= source.collection_type %></:col>
<:col :let={source} label="Should Download?">
<.icon name={if source.download_media, do: "hero-check", else: "hero-x-mark"} />
</:col>
<:col :let={source} label="Media Profile">
<.link
href={~p"/media_profiles/#{source.media_profile_id}"}
class="hover:text-secondary duration-200 ease-in-out"
>
<.subtle_link href={~p"/media_profiles/#{source.media_profile_id}"}>
<%= source.media_profile.name %>
</.link>
</.subtle_link>
</:col>
<:col :let={source} label="" class="flex place-content-evenly">
<.icon_link href={~p"/sources/#{source.id}"} icon="hero-eye" class="mx-1" />
@@ -4,13 +4,13 @@
<.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">
Source <span class="hidden sm:inline">#<%= @source.id %></span>
<%= @source.custom_name %>
</h2>
</div>
<nav>
<.link href={~p"/sources/#{@source}/edit"}>
<.button color="bg-primary" rounding="rounded-full">
<.button color="bg-primary" rounding="rounded-lg">
<.icon name="hero-pencil-square" class="mr-2" /> Edit <span class="hidden sm:inline pl-1">Source</span>
</.button>
</.link>
@@ -38,7 +38,7 @@
method="delete"
data-confirm="Are you sure you want to delete this source (leaving files in place)? This cannot be undone."
>
<.button color="bg-meta-1" rounding="rounded-full">
<.button color="bg-meta-1" rounding="rounded-lg">
Delete Source
</.button>
</.link>
@@ -48,7 +48,7 @@
data-confirm="Are you sure you want to delete this source and it's files on disk? This cannot be undone."
class="mt-5 md:mt-0"
>
<.button color="bg-meta-1" rounding="rounded-full">
<.button color="bg-meta-1" rounding="rounded-lg">
Delete Source and Files
</.button>
</.link>