Use image list layout in reverse search

lib/philomena/duplicate_reports.ex

@@ -87,7 +87,7 @@ defmodule Philomena.DuplicateReports do
           {intensities, aspect}
           |> find_duplicates(dist: dist, aspect_dist: dist, limit: limit)
           |> preload([:user, :intensity, [:sources, tags: :aliases]])
-          |> Repo.all()
+          |> Repo.paginate(page_size: 50)
 
         {:ok, images}
 

lib/philomena_web/controllers/search/reverse_controller.ex

@@ -16,15 +16,32 @@ defmodule PhilomenaWeb.Search.ReverseController do
     case DuplicateReports.execute_search_query(image_params) do
       {:ok, images} ->
         changeset = DuplicateReports.change_search_query(%SearchQuery{})
-        render(conn, "index.html", title: "Reverse Search", images: images, changeset: changeset)
+
+        render(conn, "index.html",
+          title: "Reverse Search",
+          layout_class: "layout--wide",
+          images: images,
+          changeset: changeset
+        )
 
       {:error, changeset} ->
-        render(conn, "index.html", title: "Reverse Search", images: nil, changeset: changeset)
+        render(conn, "index.html",
+          title: "Reverse Search",
+          layout_class: "layout--wide",
+          images: nil,
+          changeset: changeset
+        )
     end
   end
 
   def create(conn, _params) do
     changeset = DuplicateReports.change_search_query(%SearchQuery{})
-    render(conn, "index.html", title: "Reverse Search", images: nil, changeset: changeset)
+
+    render(conn, "index.html",
+      title: "Reverse Search",
+      layout_class: "layout--wide",
+      images: nil,
+      changeset: changeset
+    )
   end
 end

lib/philomena_web/templates/search/reverse/index.html.slime

@@ -1,12 +1,13 @@
 h1 Reverse Search
 
 = form_for @changeset, ~p"/search/reverse", [multipart: true, as: :image], fn f ->
-  p
+  .walloftext
-    ' Basic image similarity search. Finds uploaded images similar to the one
+    p
-    ' provided based on simple intensities and uses the median frame of
+      ' Basic image similarity search. Finds uploaded images similar to the one
-    ' animations; very low contrast images (such as sketches) will produce
+      ' provided based on simple intensities and uses the median frame of
-    ' poor results and, regardless of contrast, results may include seemingly
+      ' animations; very low contrast images (such as sketches) will produce
-    ' random images that look very different.
+      ' poor results and, regardless of contrast, results may include seemingly
+      ' random images that look very different.
 
   .image-other
     #js-image-upload-previews
@@ -40,42 +41,28 @@ h1 Reverse Search
 
 = cond do
   - is_nil(@images) ->
+    / Don't render anything.
 
   - Enum.any?(@images) ->
-    h2 Results
+    .block#imagelist-container
+      section.block__header.page__header.flex
+        span.block__header__title.page__title.hide-mobile
+          ' Search by uploaded image
 
-    table
+    .block__content.js-resizable-media-container
-      tr
+      = for image <- @images do
-        th &nbsp;
+        = render PhilomenaWeb.ImageView, "_image_box.html", image: image, link: ~p"/images/#{image}", size: :thumb, conn: @conn
-        th Image
-        th &nbsp;
 
-      = for match <- @images do
+    .block__header.block__header--light.page__header.flex
-        tr
+      span.block__header__title.page__info
-          th
+        = render PhilomenaWeb.PaginationView, "_pagination_info.html", page: @images
-            h3 = link "##{match.id}", to: ~p"/images/#{match}"
-            p
-              = if image_has_sources(match) do
-                span.source_url
-                  = link "Source", to: image_first_source(match)
-              - else
-                ' Unknown source
 
-          th
+      .flex__right.page__options
-            = render PhilomenaWeb.ImageView, "_image_container.html", image: match, size: :thumb, conn: @conn
+        a href="/settings/edit" title="Display Settings"
-
+          i.fa.fa-cog
-          th
+          span.hide-mobile.hide-limited-desktop<>
-            h3
+            ' Display Settings
-              = match.image_width
-              | x
-              => match.image_height
-              ' -
-              => round(match.image_size / 1024)
-              ' KiB
-
-            = render PhilomenaWeb.TagView, "_tag_list.html", tags: Tag.display_order(match.tags), conn: @conn
 
   - true ->
-    h2 Results
     p
-      ' We couldn't find any images matching this in our image database.
+      ' No images found!