Two column layout for landing page

eea · Feb 7, 2023 · 6627191 · 6627191
1 parent aede1ca
commit 6627191
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 67 deletions.
diff --git a/searchlib/components/LandingPage/TilesLandingPage.jsx b/searchlib/components/LandingPage/TilesLandingPage.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Tab, Menu } from 'semantic-ui-react';
+import { Tab, Menu, List } from 'semantic-ui-react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useAtom } from 'jotai';
 
@@ -60,7 +60,8 @@ const LandingPage = (props) => {
   const activeSectionConfig = getFacetConfig(sections, activeSection);
 
   const getTiles = (maxPerSection_default) => {
-    const maxPerSection = activeSectionConfig.maxPerSection || maxPerSection_default;
+    const maxPerSection =
+      activeSectionConfig.maxPerSection || maxPerSection_default;
     let result = landingPageData?.[activeSection]?.[0]?.data || [];
 
     if (activeSectionConfig.blacklist !== undefined) {
@@ -153,8 +154,8 @@ const LandingPage = (props) => {
       render: () => {
         return (
           <Tab.Pane>
-            <div className="landing-page-cards">
-              <Card.Group itemsPerRow={5}>
+            <div className={`landing-page-cards ${activeSection}`}>
+              <List>
                 {sortedTiles(tiles, activeSectionConfig, appConfig).map(
                   (topic, index) => {
                     const onClickHandler = () => {
@@ -181,23 +182,20 @@ const LandingPage = (props) => {
                     };
 
                     return (
-                      <Card onClick={onClickHandler} key={index}>
-                        <Card.Content>
-                          <Card.Header>
-                            {icon ? <Icon {...icon} type={topic.value} /> : ''}
-                            <Term term={topic.value} field={activeSection} />
-                          </Card.Header>
-                        </Card.Content>
-                        <Card.Content extra>
+                      <List.Item onClick={onClickHandler} key={index}>
+                        <List.Content>
+                          {icon ? <Icon {...icon} type={topic.value} /> : ''}
+                          <Term term={topic.value} field={activeSection} />
                           <span className="count">
-                            {topic.count} {topic.count === 1 ? 'item' : 'items'}
+                            ({topic.count}{' '}
+                            {topic.count === 1 ? 'item' : 'items'})
                           </span>
-                        </Card.Content>
-                      </Card>
+                        </List.Content>
+                      </List.Item>
                     );
                   },
                 )}
-              </Card.Group>
+              </List>
             </div>
           </Tab.Pane>
         );
@@ -209,13 +207,11 @@ const LandingPage = (props) => {
     <div className="landing-page-container">
       <div className="landing-page">
         <h4>Or search by</h4>
-        <div className="search-tab-wrapper">
-          <Tab
-            className="search-tab"
-            menu={{ secondary: true, pointing: true }}
-            panes={panes}
-          />
-        </div>
+        <Tab
+          className="search-tab"
+          menu={{ secondary: true, pointing: true }}
+          panes={panes}
+        />
         {hasOverflow ? (
           <div className="tab-info">
             <p>Only first {maxPerSection} items are displayed.</p>

diff --git a/src/SearchBlock/less/landingpage.less b/src/SearchBlock/less/landingpage.less
@@ -23,44 +23,78 @@
   .landing-page-cards {
     padding: 0 1.25rem;
 
-    .ui.cards {
-      .ui.card {
-        margin-top: 2em;
-        color: @deepBlue;
-        cursor: pointer;
-
-        &:hover {
-          border: none;
-          box-shadow: none;
-        }
+    .ui.list {
+      .item {
+        break-inside: avoid-column;
 
         .content {
-          flex-grow: initial;
-          padding: 0;
-          padding-bottom: 0.5em;
+          cursor: pointer;
+          font-weight: normal;
         }
+      }
 
-        .content > .header {
-          color: @deepBlue;
-          font-size: 18px;
-          font-weight: 400;
-        }
+      .count {
+        margin: 0 7px;
+      }
 
-        .content.extra {
-          justify-content: left;
-          margin-top: auto;
-          color: @deepBlue;
-        }
+      i.icon {
+        margin-right: 7px;
+      }
 
-        img.facet-option-icon {
-          display: block;
-          width: auto;
-          height: 30px !important;
-          margin-bottom: 0.5em;
-          filter: grayscale(100%);
-        }
+      img.facet-option-icon {
+        display: block;
+        width: auto;
+        height: 20px !important;
+        margin-top: 1em;
+        margin-bottom: 0.2em;
+        filter: grayscale(100%);
+      }
+
+      @media only screen and (min-width: 900px) {
+        max-width: 900px;
+        column-count: 2;
+        column-gap: 2.5em;
       }
     }
+
+    // .ui.cards {
+    //   .ui.card {
+    //     margin-top: 2em;
+    //     color: @deepBlue;
+    //     cursor: pointer;
+
+    //     &:hover {
+    //       border: none;
+    //       box-shadow: none;
+    //     }
+
+    //     .content {
+    //       flex-grow: initial;
+    //       padding: 0;
+    //       padding-bottom: 0.5em;
+    //     }
+
+    //     .content > .header {
+    //       color: @deepBlue;
+    //       font-size: 18px;
+    //       font-weight: 400;
+    //     }
+
+    //     .content.extra {
+    //       justify-content: left;
+    //       margin-top: auto;
+    //       color: @deepBlue;
+    //     }
+
+    //     img.facet-option-icon {
+    //       display: block;
+    //       width: auto;
+    //       height: 30px !important;
+    //       margin-bottom: 0.5em;
+    //       filter: grayscale(100%);
+    //     }
+    //   }
+    // }
   }
 
   .tab-info {
@@ -70,17 +104,17 @@
   }
 }
 
-@media only screen and (max-width: @tabletBreakpoint) {
-  .landing-page-cards {
-    .ui.cards {
-      display: grid;
-      justify-content: space-between;
-      padding-right: 2px;
-      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
-
-      .ui.card {
-        width: unset;
-      }
-    }
-  }
-}
+// @media only screen and (max-width: @tabletBreakpoint) {
+//   .landing-page-cards {
+//     .ui.cards {
+//       display: grid;
+//       justify-content: space-between;
+//       padding-right: 2px;
+//       grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+
+//       .ui.card {
+//         width: unset;
+//       }
+//     }
+//   }
+// }