Style labels in search results

eea · Mar 10, 2023 · 04c6e27 · 04c6e27
1 parent cdb843a
commit 04c6e27
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/searchlib/components/Result/HorizontalCardItem.jsx b/searchlib/components/Result/HorizontalCardItem.jsx
@@ -66,9 +66,11 @@ const HorizontalCardItem = (props) => {
       <>
         <ExternalLink href={result.href} title={result.title}>
           {result.title}
+          {result.isNew && <Label className="new-item">New</Label>}
+          {result.isExpired && (
+            <Label className="archived-item">Archived</Label>
+          )}
         </ExternalLink>
-        {result.isNew && <Label className="new-item">New</Label>}
-        {result.isExpired && <Label className="archived-item">Archived</Label>}
       </>
     ),
     meta: <ContentClusters clusters={clusters} item={result} />,

diff --git a/src/SearchBlock/less/searchresult.less b/src/SearchBlock/less/searchresult.less
@@ -29,6 +29,28 @@
     }
   }
 
+  .listing-item a,
+  .listing-header a {
+    display: inline-block;
+
+    .ui.label.new-item,
+    .ui.label.archived-item {
+      display: inline-block;
+      padding: 0.2em 0.6em 0.3em;
+      margin-top: -2px;
+      margin-left: 0.7em !important;
+      background-color: #d3d3d3;
+      border-radius: 0.25em;
+      color: #434343;
+      font-size: 13px;
+      font-weight: normal;
+      line-height: 1;
+      text-align: center;
+      vertical-align: middle;
+      white-space: nowrap;
+    }
+  }
+
   .slot-bottom {
     margin-top: auto;
   }