@eeacms/volto-clms-theme 1.0.46 → 1.0.47

package/CHANGELOG.md

@@ -4,8 +4,26 @@ 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).
 
+#### [1.0.47](https://github.com/eea/volto-clms-theme/compare/1.0.46...1.0.47)
+
+- use smaller images in Cards [`#147`](https://github.com/eea/volto-clms-theme/pull/147)
+- Demo modifications [`#154`](https://github.com/eea/volto-clms-theme/pull/154)
+- Geonetwork fields [`#153`](https://github.com/eea/volto-clms-theme/pull/153)
+- Sub tab option created [`#152`](https://github.com/eea/volto-clms-theme/pull/152)
+- add Role label [`ae98fda`](https://github.com/eea/volto-clms-theme/commit/ae98fdac159d385554a67d3a0690ba17b5dfa244)
+- show all the fields of geonetwork [`9eae556`](https://github.com/eea/volto-clms-theme/commit/9eae55614a26e84613dd747451e9a3fb864a6ac4)
+- if parent tab is clicked sub tab is opened [`5cc5d1c`](https://github.com/eea/volto-clms-theme/commit/5cc5d1c93691985965640499951e0a905da8acbb)
+- add the content url to the simple line listing template [`6ad396f`](https://github.com/eea/volto-clms-theme/commit/6ad396fdaf1850a3d509f4f640e421278341b74b)
+- pretier fix on text carousel [`5e18334`](https://github.com/eea/volto-clms-theme/commit/5e183349cf13b6f2739dbbfbbd48617bc6c9c34c)
+- SubTab style set [`73d9fa8`](https://github.com/eea/volto-clms-theme/commit/73d9fa85b05055b180409927583b71dc0a562f0f)
+- remove default image from New and Event view [`0ef541d`](https://github.com/eea/volto-clms-theme/commit/0ef541dbede5316c46f48585b9728a672f03b7ad)
+- use smaller images [`a545b9e`](https://github.com/eea/volto-clms-theme/commit/a545b9ed547fa124903b66987e6d7b3e46c17146)
+
 #### [1.0.46](https://github.com/eea/volto-clms-theme/compare/1.0.45...1.0.46)
 
+> 15 December 2021
+
+- Develop [`#151`](https://github.com/eea/volto-clms-theme/pull/151)
 - volto-form-block style [`#150`](https://github.com/eea/volto-clms-theme/pull/150)
 - Bugs n improvements [`#149`](https://github.com/eea/volto-clms-theme/pull/149)
 - Develop [`#148`](https://github.com/eea/volto-clms-theme/pull/148)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx

@@ -47,30 +47,56 @@ const CclVerticalTabsView = (props) => {
               setActiveTab = () => {},
             } = props;
             const title = tabs[tab].title;
+            const subTab = tabs[tab]?.subTab || false;
             const tabIndex = index + 1;
+            const nextTabIndex = index + 2;
+            const nextSubTab = tabs[tabsList[tabIndex]]?.subTab || false;
             const defaultTitle = `Tab ${tabIndex}`;
             return (
               <div
                 key={index}
                 id={tabIndex}
-                className={cx('card', tab === activeTab && 'active')}
+                className={cx(
+                  'card',
+                  tab === activeTab && 'active',
+                  subTab && 'subcard',
+                )}
               >
-                <NavLink
-                  to={'#tab' + tabIndex}
-                  className="collapsed"
-                  onClick={(e) => {
-                    if (activeTab !== tab) {
-                      setActiveTab(tab);
-                    }
-                  }}
-                  onKeyDown={() => {
-                    if (activeTab !== tab) {
-                      setActiveTab(tab);
-                    }
-                  }}
-                >
-                  {title || defaultTitle}
-                </NavLink>
+                {subTab === false && nextSubTab !== false ? (
+                  <NavLink
+                    to={'#tab' + nextTabIndex}
+                    className="collapsed"
+                    onClick={(e) => {
+                      if (activeTab !== tab) {
+                        setActiveTab(tab);
+                      }
+                    }}
+                    onKeyDown={() => {
+                      if (activeTab !== tab) {
+                        setActiveTab(tab);
+                      }
+                    }}
+                  >
+                    {title || defaultTitle}
+                  </NavLink>
+                ) : (
+                  <NavLink
+                    to={'#tab' + tabIndex}
+                    className="collapsed"
+                    onClick={(e) => {
+                      if (activeTab !== tab) {
+                        setActiveTab(tab);
+                      }
+                    }}
+                    onKeyDown={() => {
+                      if (activeTab !== tab) {
+                        setActiveTab(tab);
+                      }
+                    }}
+                  >
+                    {title || defaultTitle}
+                  </NavLink>
+                )}
               </div>
             );
           })}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/TabsWidget.jsx

@@ -12,8 +12,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faIcons, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import trashSVG from '@plone/volto/icons/delete.svg';
 import plusSVG from '@plone/volto/icons/circle-plus.svg';
+import leftMenuSVG from '@plone/volto/icons/nav.svg';
 import { SidebarPopup } from '@plone/volto/components';
 import { fontAwesomeSchema } from './fontAwesomeSchema';
+import { subTabSchema } from './subTabSchema';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import './fontawesome';
@@ -36,6 +38,7 @@ const TabsWidget = (props) => {
   const [blockStyleVisible, setBlockStyleVisible] = React.useState(false);
   const [activeTabId, setActiveTabId] = React.useState(0);
   const [activeFontAwesomePopup, setActiveFontAwesomePopup] = React.useState(0);
+  const [activeSubTabPopup, setActiveSubTabPopup] = React.useState(0);
 
   const { value = {}, id, onChange } = props;
   const { blocks = {} } = value;
@@ -44,6 +47,7 @@ const TabsWidget = (props) => {
     blocks[id],
   ]);
   const activeTabData = blocks[activeTabId] || {};
+
   return (
     <FormFieldWrapper
       {...props}
@@ -190,6 +194,52 @@ const TabsWidget = (props) => {
                       />
                     </SidebarPopup>
 
+                    <button
+                      onClick={() => {
+                        setActiveTabId(childId);
+                        setActiveSubTabPopup(true);
+                      }}
+                      title="Sub Tab"
+                    >
+                      <Icon size={'24px'} name={leftMenuSVG} />
+                    </button>
+                    <SidebarPopup open={activeSubTabPopup}>
+                      <InlineForm
+                        schema={subTabSchema()}
+                        title={
+                          <>
+                            {subTabSchema().title}
+                            <button
+                              onClick={() => {
+                                setActiveSubTabPopup(false);
+                              }}
+                              style={{ float: 'right' }}
+                            >
+                              <Icon name={clearSVG} size="24px" />
+                            </button>
+                          </>
+                        }
+                        formData={{
+                          ...activeTabData?.subTab,
+                        }}
+                        onChangeField={(idTab, formValue) => {
+                          onChange(id, {
+                            ...value,
+                            blocks: {
+                              ...value.blocks,
+                              [activeTabId]: {
+                                ...(activeTabData || {}),
+                                subTab: {
+                                  ...activeTabData?.subTab,
+                                  [idTab]: formValue,
+                                },
+                              },
+                            },
+                          });
+                        }}
+                      />
+                    </SidebarPopup>
+
                     {value.blocks_layout?.items?.length > 1 ? (
                       <button
                         onClick={() => {

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/subTabSchema.js

@@ -0,0 +1,19 @@
+export const subTabSchema = () => ({
+  title: 'Vertical tab block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['subtab'],
+    },
+  ],
+  properties: {
+    subtab: {
+      title: 'Is subtab',
+      description: 'Define if this tab is a subTab',
+      type: 'boolean',
+      default: false,
+    },
+  },
+  required: [],
+});

package/src/components/CLMSDatasetDetailView/BoundingBoxComponent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const BoundingBoxComponent = (props) => {
+  const { north, south, east, west } = props.bbox;
+
+  return (
+    <div className="bounding-box-container">
+      <h3>Bounding Box</h3>
+      <div className="bounding-box-item">
+        {east && <div className="bounding-box-item">East: {east}</div>}
+        {west && <div className="bounding-box-item">West: {west}</div>}
+        {north && <div className="bounding-box-item">North: {north}</div>}
+        {south && <div className="bounding-box-item">South: {south}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default BoundingBoxComponent;

package/src/components/CLMSDatasetDetailView/ContactComponent.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const ContactComponent = (props) => {
+  const {
+    organisationName,
+    deliveryPoint,
+    city,
+    administrativeArea,
+    postalCode,
+    country,
+    electronicMailAddress,
+    url,
+    urlTitle,
+    roleCode,
+  } = props.contact;
+
+  return (
+    <div className="contact-container">
+      <h3>Contact</h3>
+      <div className="contact-item">
+        {city && <div className="contact-item">{city}</div>}
+        {organisationName && (
+          <div className="contact-item">{organisationName}</div>
+        )}
+        {deliveryPoint && <div className="contact-item">{deliveryPoint}</div>}
+        {city && <div className="contact-item">{city}</div>}
+        {administrativeArea && (
+          <div className="contact-item">{administrativeArea}</div>
+        )}
+        {postalCode && <div className="contact-item">{postalCode}</div>}
+        {country && <div className="contact-item">{country}</div>}
+        {electronicMailAddress && (
+          <div className="contact-item">{electronicMailAddress}</div>
+        )}
+        {url && <div className="contact-item">{url}</div>}
+        {urlTitle && <div className="contact-item">{urlTitle}</div>}
+        {roleCode && <div className="contact-item">Role: {roleCode}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default ContactComponent;

package/src/components/CLMSDatasetDetailView/DistributionInfoComponent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const DistributionInfoComponent = (props) => {
+  const { resourceLocator, services } = props.resource;
+
+  return (
+    <div className="distribution-info-container">
+      <h3>Resource</h3>
+      <div className="distribution-info-item">
+        {resourceLocator && (
+          <div className="distribution-info-item">{resourceLocator}</div>
+        )}
+        {services && <div className="distribution-info-item">{services}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default DistributionInfoComponent;

package/src/components/CLMSDatasetDetailView/MetadataContent.jsx

@@ -1,6 +1,10 @@
-import React from 'react';
-import { CclInfoDescription, CclInfoContainer } from '../CclInfoDescription';
+import { CclInfoContainer, CclInfoDescription } from '../CclInfoDescription';
+
+import BoundingBoxComponent from './BoundingBoxComponent';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+import ContactComponent from './ContactComponent';
+import DistributionInfoComponent from './DistributionInfoComponent';
+import React from 'react';
 import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 const MetadataContent = (data) => {
@@ -34,11 +38,27 @@ const MetadataContent = (data) => {
 
       <CclInfoContainer>
         <h2>Data identification</h2>
-        <CclInfoDescription
-          title="Resource title"
-          tooltip="Name by which the cited resource is known"
-          description={data.dataResourceTitle}
-        />
+        {data.dataResourceTitle && (
+          <CclInfoDescription
+            title="Resource title"
+            tooltip="Name by which the cited resource is known"
+            description={data.dataResourceTitle}
+          />
+        )}
+        {data.resourceEffective && (
+          <CclInfoDescription
+            title="Date of publication"
+            tooltip=""
+            description={data.resourceEffective}
+          />
+        )}
+        {data.resourceModified && (
+          <CclInfoDescription
+            title="Revision date"
+            tooltip=""
+            description={data.resourceModified}
+          />
+        )}
         <CclInfoDescription
           title="Resource abstract"
           tooltip="Brief narrative summary of the content of the resource(s) with coverage, main attributes, data sources, important of the work, etc."
@@ -46,38 +66,110 @@ const MetadataContent = (data) => {
             <StringToHTML string={data.dataResourceAbstract?.data || ''} />
           }
         />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Classification of spatial data</h2>
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Geographic reference</h2>
-        <CclInfoDescription
-          title="Coordinate Reference System"
-          tooltip="CRS of the resource"
-          description={data.coordinateReferenceSystem}
-        />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Temporal reference</h2>
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Quality and validity</h2>
+        {data.keywords?.length > 0 && (
+          <CclInfoDescription
+            title="Keywords"
+            tooltip=""
+            description={data.keywords.map((keyword) => keyword).join(', ')}
+          />
+        )}
+        {data.geographicCoverage && (
+          <CclInfoDescription
+            title="Geographic coverage"
+            tooltip=""
+            description={JSON.stringify(data.geographicCoverage)}
+          />
+        )}
+        {data.accessAndUseLimitationPublic_line && (
+          <CclInfoDescription
+            title="Limitation of public access"
+            tooltip=""
+            description={data.accessAndUseLimitationPublic_line}
+          />
+        )}
         <CclInfoDescription
-          title="Lineage"
-          tooltip="General explanation of the data produce knowledge's about the lineage of a dataset"
-          description={<StringToHTML string={data.qualityLineage?.data} />}
+          title="Conditions applying to access and use"
+          tooltip=""
+          description={
+            <StringToHTML string={data.accessAndUseConstraints?.data || ''} />
+          }
         />
         <CclInfoDescription
-          title="Spatial resolution"
-          tooltip="A set of zero to many resolution distances (typically for gridded data and imagery-derived products) or equivalent scales (typically for maps or map-derived products)"
+          title="Spatial Resolution"
+          tooltip=""
           description={
-            <StringToHTML string={data.qualitySpatialResolution?.data} />
+            <StringToHTML string={data.qualitySpatialResolution?.data || ''} />
           }
         />
+        {data.classificationTopicCategory && (
+          <CclInfoDescription
+            title="Topic of Category"
+            tooltip=""
+            description={
+              data.classificationTopicCategory &&
+              data.classificationTopicCategory.map((topic) => topic).join(', ')
+            }
+          />
+        )}
+        {data.geographicBoundingBox?.items?.length > 0 && (
+          <CclInfoDescription
+            title="Bounding Boxes"
+            tooltip=""
+            description={data.geographicBoundingBox?.items.map((bbox) => {
+              return <BoundingBoxComponent bbox={bbox} />;
+            })}
+          />
+        )}
+        {data.temporalCoverage && (
+          <CclInfoDescription
+            title="Temporal Extent"
+            tooltip=""
+            description={
+              data.temporalCoverage &&
+              data.temporalCoverage.map((year) => year).join(', ')
+            }
+          />
+        )}
       </CclInfoContainer>
+      {data.dataResourceType && (
+        <CclInfoContainer>
+          <h2>Hierarchy Level</h2>
+          <CclInfoDescription
+            title="Resource Type"
+            tooltip=""
+            description={data.dataResourceType}
+          />
+        </CclInfoContainer>
+      )}
+      {data.responsiblePartyWithRole?.items?.length > 0 && (
+        <CclInfoContainer>
+          <h2>Contacts</h2>
+          <CclInfoDescription
+            title="Responsible Party with Role"
+            tooltip=""
+            description={data.responsiblePartyWithRole?.items.map((item) => {
+              return <ContactComponent contact={item} />;
+            })}
+          />
+        </CclInfoContainer>
+      )}
+      {data.coordinateReferenceSystemList.length > 0 && (
+        <CclInfoContainer>
+          <h2>Reference system info</h2>
+          <CclInfoDescription
+            title="Coordinate Reference System"
+            tooltip="CRS of the resource"
+            description={
+              data.coordinateReferenceSystemList &&
+              data.coordinateReferenceSystemList
+                .map((reference) => reference)
+                .join(', ')
+            }
+          />
+        </CclInfoContainer>
+      )}
       <CclInfoContainer>
-        <h2>Conformity</h2>
+        <h2>Data quality info</h2>
         <CclInfoDescription
           title="Specification"
           tooltip="A citation of the implementing rules adopted under Article 7(1) of Directive 2007/2/EC or other specification to which a particular resource conforms"
@@ -85,39 +177,31 @@ const MetadataContent = (data) => {
             <StringToHTML string={data.conformitySpecification?.data} />
           }
         />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Constraints related to access and use</h2>
-        <CclInfoDescription
-          title="Conditions applying to access and use"
-          tooltip="Restriction on the access and use of a resource or metadata"
-          description={
-            <StringToHTML string={data.accessAndUseConstraints?.data} />
-          }
-        />
-        <CclInfoDescription
-          title="Limitation of public access"
-          tooltip="Limitation and other reason for public access"
-          description={
-            <StringToHTML string={data.accessAndUseLimitationPublic?.data} />
-          }
-        />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Responsible organisation</h2>
-        <CclInfoDescription
-          title="Responsible party"
-          tooltip="Organisation associated with the resource. Organisation name, contact information (email)."
-          description={<StringToHTML string={data.owners?.data} />}
-        />
+        {data.conformityPass && (
+          <CclInfoDescription
+            title="Pass"
+            tooltip=""
+            description={data.conformityPass}
+          />
+        )}
         <CclInfoDescription
-          title="Responsible party role"
-          tooltip="Function performed by the party"
-          description={
-            <StringToHTML string={data.responsiblePartyRole?.data} />
-          }
+          title="Lineage"
+          tooltip="General explanation of the data produce knowledge's about the lineage of a dataset"
+          description={<StringToHTML string={data.qualityLineage?.data} />}
         />
       </CclInfoContainer>
+      {data.distributionInfo?.items?.length > 0 && (
+        <CclInfoContainer>
+          <h2>Distribution info</h2>
+          <CclInfoDescription
+            title="Resource Locator and Services"
+            tooltip=""
+            description={data.distributionInfo?.items.map((resource) => {
+              return <DistributionInfoComponent resource={resource} />;
+            })}
+          />
+        </CclInfoContainer>
+      )}
     </>
   );
 };

package/src/components/CLMSEventView/CLMSEventView.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 export const CLMSEventView = (props) => {
   const { content } = props;
@@ -12,17 +12,19 @@ export const CLMSEventView = (props) => {
         <div className="event-detail-date">
           {new Date(content?.effective).toLocaleDateString()}
         </div>
-        <figure className="news-detail-image">
-          <img
-            src={
-              content?.image
-                ? content?.image?.download
-                : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-            }
-            alt={content?.image ? content?.image?.filename : 'Placeholder'}
-          />
-          <figcaption>{content?.image_caption}</figcaption>
-        </figure>
+        {content?.image && (
+          <figure className="news-detail-image">
+            <img
+              src={
+                content?.image
+                  ? content?.image?.download
+                  : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+              }
+              alt={content?.image ? content?.image?.filename : 'Placeholder'}
+            />
+            <figcaption>{content?.image_caption}</figcaption>
+          </figure>
+        )}
         <div className="event-detail-when">
           <FontAwesomeIcon icon={['far', 'calendar-alt']} />
           <div className="event-detail-when-text">

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -10,17 +10,19 @@ const CLMSNewsItemView = (props) => {
         <div className="news-detail-date">
           {new Date(content?.effective).toLocaleDateString()}
         </div>
-        <figure className="news-detail-image">
-          <img
-            src={
-              content?.image
-                ? content?.image?.download
-                : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-            }
-            alt={content?.image ? content?.image?.filename : 'Placeholder'}
-          />
-          <figcaption>{content?.image_caption}</figcaption>
-        </figure>
+        {content?.image && (
+          <figure className="news-detail-image">
+            <img
+              src={
+                content?.image
+                  ? content?.image?.download
+                  : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+              }
+              alt={content?.image ? content?.image?.filename : 'Placeholder'}
+            />
+            <figcaption>{content?.image_caption}</figcaption>
+          </figure>
+        )}
         <div className="news-detail-content">
           <StringToHTML string={content.text?.data || ''} />
         </div>

package/src/components/CclCard/CclCard.jsx

@@ -1,10 +1,12 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
 import './cards.less';
-import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import * as mime from 'react-native-mime-types';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import React from 'react';
+
 function bytesToSize(bytes) {
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes === 0) return '0 Byte';
@@ -26,7 +28,7 @@ function CclCard(props) {
           {type === 'doc' && (
             <>
               <div className="card-doc-title">
-                <a href={card?.file?.download || '#'}>
+                <a href={card?.file?.download || url}>
                   {card?.title || 'Card default title'}
                 </a>
               </div>
@@ -47,6 +49,7 @@ function CclCard(props) {
               <div className="card-block-image">
                 <img
                   src={
+                    card?.image?.scales?.preview ||
                     card?.image?.download ||
                     'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
                   }

package/src/components/CclInfoDescription/CclInfoDescription.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
 /**
@@ -16,14 +16,16 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
       </CclInfoDescription>
  * 
  */
-function CclInfoDescription({ title, description, tooltip = 'Info' }) {
+function CclInfoDescription({ title, description, tooltip }) {
   return (
     <div className="dataset-info-field">
       <div className="dataset-field-title">
         <h3>{title}</h3>
-        <span className="info-icon" tooltip={tooltip} direction="up">
-          <FontAwesomeIcon icon={faInfoCircle} />
-        </span>
+        {tooltip && (
+          <span className="info-icon" tooltip={tooltip} direction="up">
+            <FontAwesomeIcon icon={faInfoCircle} />
+          </span>
+        )}
       </div>
       <div className="dataset-field-description">{description}</div>
     </div>

package/theme/clms/css/menu.css

@@ -208,6 +208,10 @@
   background-color: #a0b128;
 }
 
+.left-menu .subcard {
+  margin-left: 1rem;
+}
+
 .left-menu a {
   display: inline-block;
   width: 100%;