From 0811e46b6c113b7e66fbc43ceeb690e45c35d08c Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Mon, 21 Oct 2024 12:47:54 -0700
Subject: [PATCH] Merge pull request #21067 from
 overleaf/mf-new-gallery-search-result

[web] Implement new gallery search result

GitOrigin-RevId: afc33a07b5ea533b681acf18bd31112a2f48866a
---
 .../bootstrap-5/abstracts/all.scss            |  1 +
 .../abstracts/templates-search.scss           |  1 +
 .../components/gallery-search.scss            | 72 +++++++++++++++++++
 .../bootstrap-5/pages/templates-v2.scss       |  8 ++-
 4 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/abstracts/templates-search.scss

diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss
index 13fe1b4158..1d5057bc5b 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss
@@ -2,3 +2,4 @@
 @import 'variables';
 @import 'variable-overrides';
 @import 'themes-common-variables';
+@import 'templates-search';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/templates-search.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/templates-search.scss
new file mode 100644
index 0000000000..2069730b5f
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/templates-search.scss
@@ -0,0 +1 @@
+$templates-search-max-width: 885px;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss b/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
index eefa420c59..b949ab1633 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
@@ -21,4 +21,76 @@
       }
     }
   }
+
+  .search-hits {
+    margin-top: var(--spacing-16);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-08);
+
+    .search-hit {
+      display: flex;
+      gap: var(--spacing-08);
+
+      .search-image {
+        a {
+          display: flex;
+          align-items: flex-start;
+          justify-content: center;
+          height: 100%;
+          width: 100%;
+
+          img {
+            width: 185px;
+            box-shadow: 0 2px 4px 0 rgba(30 37 48 / 16%);
+          }
+        }
+      }
+
+      .search-title {
+        margin-bottom: var(--spacing-04);
+        max-width: $templates-search-max-width;
+
+        a {
+          @include heading-md;
+
+          color: var(--content-primary);
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      .search-highlight {
+        max-width: $templates-search-max-width;
+      }
+
+      .gallery-official {
+        margin-left: var(--spacing-06);
+        vertical-align: text-top;
+      }
+
+      .search-hit-tags {
+        list-style: none;
+        margin: 0;
+        padding-left: 0;
+        display: flex;
+        gap: var(--spacing-04);
+
+        li a {
+          @include body-sm;
+
+          color: var(--color-primary-dark);
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+            color: var(--green-50);
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
index 0ffef1ff61..1fe5263776 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
@@ -41,10 +41,14 @@
   }
 
   .gallery-header {
-    max-width: 885px;
+    // padding: 0 is added when the screen size is much bigger than the $templates-search-max-width
+    // to remove unwanted padding
+    @include media-breakpoint-up(xl) {
+      padding: 0;
+    }
 
     @include media-breakpoint-up(lg) {
-      padding: 0;
+      max-width: $templates-search-max-width;
     }
   }