grid listing template

eea · May 13, 2021 · a4aaa69 · a4aaa69
1 parent c6d823d
commit a4aaa69
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 0 deletions.
diff --git a/src/components/manage/Blocks/Listing/GridTemplate.jsx b/src/components/manage/Blocks/Listing/GridTemplate.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Item } from 'semantic-ui-react';
+import cx from 'classnames';
+import { Link } from 'react-router-dom';
+
+const GridTemplate = ({ items }) => {
+  return (
+    <div className="catalogue-listing">
+      {items.map((item, index) => (
+        <Item className="catalogue-listItem" key={item['@id']}>
+          <Item.Content>
+            <Item.Header
+              className={cx({
+                'catalogue-right-header': index % 2 !== 0,
+              })}
+            >
+              <Link style={{ color: '#666' }} to={item.url}>
+                <h2 className="item-title">{item.title || item.Title}</h2>
+              </Link>
+            </Item.Header>
+            <Item.Description>
+              <div className="descriptionBody">
+                <Link style={{ color: '#444' }} to={item.url}>
+                  <p className="item-description">
+                    {item.description || item.title || item.Title}
+                  </p>
+                </Link>
+              </div>
+              <div className="searchMetadata">
+                {item.topics && (
+                  <div>
+                    <span className="searchLabel black">Topic:</span>{' '}
+                    {item.topics?.join(', ')}
+                  </div>
+                )}
+                {/* <div>
+                  <span className="searchLabel black">Updated:</span>{' '}
+                  <FormattedDate
+                    value={item.ModificationDate}
+                    day="2-digit"
+                    month="long"
+                    year="numeric"
+                  />
+                </div>
+                <div>
+                  <span className="searchLabel black">Location:</span>{' '}
+                  {item['@components'] && item['@components']?.breadcrumbs && (
+                    <Breadcrumb style={{ display: 'inline' }}>
+                      {item['@components'].breadcrumbs.items
+                        .slice(0, -1)
+                        .map((item, index, items) => [
+                          index < items.length - 1 ? (
+                            <Breadcrumb.Section>
+                              <Link
+                                key={item.url}
+                                to={this.getPath(item['@id'])}
+                              >
+                                {item.title}
+                              </Link>
+                              <Breadcrumb.Divider key={`divider-${item.url}`} />
+                            </Breadcrumb.Section>
+                          ) : (
+                            <Breadcrumb.Section>
+                              <Link
+                                key={item.url}
+                                to={this.getPath(item['@id'])}
+                              >
+                                {item.title}
+                              </Link>
+                            </Breadcrumb.Section>
+                          ),
+                        ])}
+                    </Breadcrumb>
+                  )}
+                </div> */}
+              </div>
+            </Item.Description>
+          </Item.Content>
+        </Item>
+      ))}
+    </div>
+  );
+};
+
+GridTemplate.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  linkMore: PropTypes.any,
+  isEditMode: PropTypes.bool,
+};
+
+export default GridTemplate;
diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,7 @@ import TokenWidget from '@plone/volto/components/manage/Widgets/TokenWidget';
 //import chartIcon from '@plone/volto/icons/world.svg';
 import TopicsView from '@eeacms/volto-energy-theme/components/theme/View/TopicsView';
 import TopicsTabView from '@eeacms/volto-energy-theme/components/theme/View/TopicsTabView';
+import GridListingBlockTemplate from '@eeacms/volto-energy-theme/components/manage/Blocks/Listing/GridTemplate';
 // import FolderListingBlockView from 'volto-addons/FolderListing/BlockView';
 // import FolderListingBlockEdit from 'volto-addons/FolderListing/BlockEdit';
 
@@ -124,6 +125,14 @@ export default function applyConfig(config) {
     },
   };
 
+  config.blocks.blocksConfig.listing = {
+    ...config.blocks.blocksConfig.listing,
+    templates: {
+      ...config.blocks.blocksConfig.listing.templates,
+      grid: { label: 'Grid', template: GridListingBlockTemplate },
+    },
+  };
+
   // config.blocks.blocksConfig.folder_contents_block = {
   //   id: 'folder_contents_block',
   //   title: 'Folder Contents',

diff --git a/theme/themes/energyunion/globals/site.overrides b/theme/themes/energyunion/globals/site.overrides
@@ -237,6 +237,41 @@ nav.tabs {
 
 // end searchbox
 
+//Catalogue view
+
+.catalogue-listing {
+    display: grid;
+    grid-template-columns: auto auto;
+    border: none;
+    text-align: justify;
+
+    div.catalogue-listItem {
+    border: 1px solid #eee;
+    padding: 10px;
+}
+   div.catalogue-listItem:nth-child(2) {    
+    border-right: none;
+    border-top: none;
+}
+div.catalogue-listItem:nth-child(1) {
+    border-left: none;
+    border-top: none;
+}
+div.catalogue-listItem:nth-child(3) {    
+    border-bottom: none;
+    border-left: none;
+}
+div.catalogue-listItem:nth-child(4) {
+    border-bottom: none;
+    border-right: none;
+}
+.catalogue-right-header {
+    display: flex;
+    justify-content: flex-end;
+}
+
+}
+
 // HOMEPAGE
 
 body.homepage {