Merge pull request #64 from eea/develop

Release
eea · Feb 7, 2023 · 66c809d · 66c809d
2 parents 826dca0 + 2ff1941
commit 66c809d
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 122 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [0.4.19](https://github.com/eea/volto-searchlib/compare/0.4.18...0.4.19) - 6 February 2023
+### [0.4.20](https://github.com/eea/volto-searchlib/compare/0.4.19...0.4.20) - 7 February 2023
+
+#### :hammer_and_wrench: Others
+
+- CSS fix [kreafox - [`5ffaa21`](https://github.com/eea/volto-searchlib/commit/5ffaa210a52d2d1c65ba79e717f2eb2c1f05b925)]
+- Two column layout for landing page [kreafox - [`6627191`](https://github.com/eea/volto-searchlib/commit/66271918d327538250b44512e175ed27b04a40e1)]
+- Improve datahub view [kreafox - [`aede1ca`](https://github.com/eea/volto-searchlib/commit/aede1ca71146f92c3537269d430684b21c983a1b)]
+- Datasets tab style [kreafox - [`07cd07c`](https://github.com/eea/volto-searchlib/commit/07cd07c79e1c01925ee506d6f396011dec2cbf08)]
+### [0.4.19](https://github.com/eea/volto-searchlib/compare/0.4.18...0.4.19) - 7 February 2023
 
 #### :hammer_and_wrench: Others
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-searchlib",
-  "version": "0.4.19",
+  "version": "0.4.20",
   "description": "@eeacms/volto-searchlib: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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/datahub.less b/src/SearchBlock/less/datahub.less
@@ -46,6 +46,39 @@
   * Datahub search
   */
 
+.view-datahub-item {
+  .item.tabs-title {
+    margin-top: 2em;
+    font-size: 24px;
+  }
+
+  .datasets-tab {
+    margin-bottom: 2.5em;
+
+    .ui.tab {
+      padding-top: 0;
+    }
+
+    .ui.vertical.menu {
+      width: 100%;
+      height: 100%;
+
+      .item {
+        padding: 1rem 0 1rem 0 !important;
+        border-right-width: 0.2rem !important;
+      }
+    }
+
+    .ui.grid > [class*='four wide'].column {
+      width: 25% !important;
+    }
+
+    .ui.grid > [class*='twelve wide'].column {
+      width: 75% !important;
+    }
+  }
+}
+
 .datahub-view {
   .searchapp-datahub {
     /* Search box */
@@ -70,32 +103,6 @@
       }
     }
 
-    .landing-page-cards.dataset_formats {
-      .ui.list {
-        @media only screen and (min-width: 800px) {
-          max-width: 800px;
-          column-count: 2;
-          column-gap: 2em;
-        }
-      }
-    }
-
-    /* Landing page */
-    .landing-page-cards {
-      .ui.list {
-        .item {
-          .content {
-            cursor: pointer;
-            font-weight: normal;
-
-            .count {
-              margin: 0 7px;
-            }
-          }
-        }
-      }
-    }
-
     /* Tabs */
     .ui.secondary.pointing.menu {
       a.item {
@@ -158,10 +165,18 @@
     background: @blue-4 !important;
   }
 
+  .dataset-view {
+    .dataset-container:not(:first-of-type) {
+      padding-top: 2.5em;
+      border-top: 1px solid #eee;
+    }
+  }
+
   .dataset-container {
     width: 100%;
     max-width: 900px;
     margin: 0 auto;
+    margin-bottom: 2.5em;
   }
 
   .eea.callout {
@@ -170,31 +185,37 @@
     color: @blue-grey-5;
   }
 
-  .ui.accordion .list .item {
-    > .content {
-      display: flex;
-      align-items: center;
+  .ui.accordion {
+    .title {
+      padding-left: 0 !important;
+    }
 
-      .item-protocol {
-        margin-left: 0.5em;
-      }
+    .list .item {
+      > .content {
+        display: flex;
+        align-items: center;
 
-      .icon {
-        margin-right: 0.5em;
-      }
+        .item-protocol {
+          margin-left: 0.5em;
+        }
+
+        .icon {
+          margin-right: 0.5em;
+        }
 
-      .item-link {
-        margin: 0 0.5em;
+        .item-link {
+          margin: 0 0.5em;
+        }
       }
-    }
 
-    .item-description {
-      display: -webkit-box;
-      overflow: hidden;
-      margin-top: 0.7em;
-      -webkit-box-orient: vertical;
-      font-size: 80%;
-      -webkit-line-clamp: 3;
+      .item-description {
+        display: -webkit-box;
+        overflow: hidden;
+        margin-top: 0.7em;
+        -webkit-box-orient: vertical;
+        font-size: 80%;
+        -webkit-line-clamp: 3;
+      }
     }
   }
 
@@ -267,15 +288,19 @@
     word-break: keep-all;
   }
 
-  .metadata-wrapper {
-    margin-top: 3.5em;
-  }
-
-  .metadata-section,
   .section-wrapper {
     margin: 2em 0;
   }
 
+  .metadata-section {
+    break-inside: avoid-column;
+  }
+
+  .metadata-list {
+    column-count: 2;
+    column-gap: 2em;
+  }
+
   .formats {
     margin-left: 1em;
   }
@@ -286,7 +311,7 @@
     font-size: 14px;
 
     > div {
-      margin-bottom: 1em;
+      margin-bottom: 2em;
     }
   }
 
@@ -327,8 +352,6 @@
 }
 
 .more-like-this {
-  margin-top: 3.5em;
-
   .header span {
     .elipsisOverflow(2);
   }