Single list layout

Author: tomkonidas

lib/plexus_web/components/core_components.ex

@@ -638,46 +638,52 @@ defmodule PlexusWeb.CoreComponents do
       )
 
     ~H"""
-    <div class="flex drop-shadow-sm hover:drop-shadow-md">
-      <div class="aspect-h-1 aspect-w-1 w-20 h-20 bg-white overflow-hidden">
+    <div class="flex">
+      <div class="aspect-h-1 aspect-w-1 w-24 h-24 bg-white overflow-hidden">
         <img
           src={@app.icon_url}
           alt={@app.name <> " Icon"}
           class="h-full w-full object-cover object-center"
         />
       </div>
       <div class="flex-1 flex items-center justify-between bg-white truncate">
-        <div class="flex-1 px-4 py-2 text-sm leading-5 truncate">
-          <div class="truncate text-gray-900 font-medium transition ease-in-out duration-150">
+        <div class="flex-1 px-4 py-2 text-md leading-5 truncate">
+          <div class="truncate text-gray-900 font-semibold transition ease-in-out duration-150">
             <%= @app.name %>
           </div>
-          <p :if={@total_counts == 1} class="text-gray-500 truncate">
+          <p :if={@total_counts == 1} class="text-gray-600 truncate">
             <%= @total_counts %> Rating
           </p>
-          <p :if={@total_counts != 1} class="text-gray-500 truncate">
+          <p :if={@total_counts != 1} class="text-gray-600 truncate">
             <%= @total_counts %> Ratings
           </p>
         </div>
       </div>
-      <div class="flex flex-col justify-between">
-        <div class={[
-          "flex-1 flex items-center justify-center w-16 text-white text-sm leading-5 font-medium",
-          @native_level == :unrated && "bg-gray-700",
-          @native_level == :borked && "bg-red-800",
-          @native_level == :bronze && "bg-amber-800",
-          @native_level == :silver && "bg-slate-300 text-black",
-          @native_level == :gold && "bg-amber-200 black"
-        ]}>
+      <div class="flex flex-col justify-between bg-white">
+        <div
+          title="DeGoogled Score"
+          class={[
+            "flex flex-1 items-center justify-center w-24 text-white text-sm leading-5 font-medium",
+            @native_level == :unrated && "bg-gray-700",
+            @native_level == :borked && "bg-red-800",
+            @native_level == :bronze && "bg-amber-800",
+            @native_level == :silver && "bg-slate-300 text-black",
+            @native_level == :gold && "bg-amber-200 black"
+          ]}
+        >
           <%= @app.scores.native.numerator %>
         </div>
-        <div class={[
-          "flex-1 flex items-center justify-center w-16 text-white text-sm leading-5 font-medium",
-          @micro_g_level == :unrated && "bg-gray-700",
-          @micro_g_level == :borked && "bg-red-800",
-          @micro_g_level == :bronze && "bg-amber-800",
-          @micro_g_level == :silver && "bg-slate-300 text-black",
-          @micro_g_level == :gold && "bg-amber-200 text-black"
-        ]}>
+        <div
+          title="MicroG Score"
+          class={[
+            "flex flex-1 items-center justify-center w-24 text-white text-sm leading-5 font-medium",
+            @micro_g_level == :unrated && "bg-gray-700",
+            @micro_g_level == :borked && "bg-red-800",
+            @micro_g_level == :bronze && "bg-amber-800",
+            @micro_g_level == :silver && "bg-slate-300 text-black",
+            @micro_g_level == :gold && "bg-amber-200 text-black"
+          ]}
+        >
           &mu;<%= @app.scores.micro_g.numerator %>
         </div>
       </div>

lib/plexus_web/live/app_live/index.html.heex

@@ -1,8 +1,14 @@
-<.header>
+<.header class="max-w-3xl mx-auto">
   Apps (<%= @total_entries %> entries)
 </.header>
 
-<.simple_form for={@form} id="search-form" phx-change="search" phx-submit="search">
+<.simple_form
+  class="max-w-3xl mx-auto"
+  for={@form}
+  id="search-form"
+  phx-change="search"
+  phx-submit="search"
+>
   <.focus_wrap id="focus-first-search">
     <.input field={@form[:search]} label="Search" phx-debounce="300" />
   </.focus_wrap>
@@ -15,7 +21,7 @@
   phx-viewport-bottom={!@end_of_timeline? && "next-page"}
   phx-page-loading
   class={[
-    "mt-1 grid grid-cols-1 gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3",
+    "max-w-3xl mx-auto mt-1 grid grid-cols-1 gap-4",
     if(@end_of_timeline?, do: "pb-10", else: "pb-[calc(200vh)]"),
     if(@page == 1, do: "pt-10", else: "pt-[calc(200vh)]")
   ]}
@@ -26,9 +32,9 @@
 </ul>
 
 <div :if={@no_results?} class="mt-5 text-[50px] text-center">
-  No apps found<br />😭
+  No Results
 </div>
 
 <div :if={@end_of_timeline? and not @no_results?} class="mt-5 text-[50px] text-center">
-  End of list<br />🤭
+  End of List
 </div>