@eeacms/volto-cca-policy 0.1.86 → 0.1.88

package/CHANGELOG.md

@@ -4,6 +4,32 @@ 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.1.88](https://github.com/eea/volto-cca-policy/compare/0.1.87...0.1.88) - 1 March 2024
+
+#### :bug: Bug Fixes
+
+- fix(views): remove unused import [kreafox - [`b90c40c`](https://github.com/eea/volto-cca-policy/commit/b90c40c8d15d79ad670794710b6a7a1274657cb7)]
+- fix(views): show missing metadata on DB items [kreafox - [`6ed7638`](https://github.com/eea/volto-cca-policy/commit/6ed763854172398446d6c5f4dc1d34ea516df7ef)]
+
+#### :hammer_and_wrench: Others
+
+- test: update [kreafox - [`3bb98b1`](https://github.com/eea/volto-cca-policy/commit/3bb98b1f36d92eea76fa46af56ecfbf9a2d5201e)]
+### [0.1.87](https://github.com/eea/volto-cca-policy/compare/0.1.86...0.1.87) - 1 March 2024
+
+#### :bug: Bug Fixes
+
+- fix(news): replace banner component [kreafox - [`ff8daf9`](https://github.com/eea/volto-cca-policy/commit/ff8daf901feff11fad95099a302014a25fbbd501)]
+- fix(views): show logo on organisation view; split CSS in separate files [kreafox - [`5666679`](https://github.com/eea/volto-cca-policy/commit/5666679bd55072f2d61c8e83681846f2ce0b1f7f)]
+
+#### :nail_care: Enhancements
+
+- change(banner): more improvements on banner component [kreafox - [`f341525`](https://github.com/eea/volto-cca-policy/commit/f341525f53048d461fcc6d9c79bba7dbfb9e7cdc)]
+
+#### :hammer_and_wrench: Others
+
+- test: update tests on db items [kreafox - [`9d3a03d`](https://github.com/eea/volto-cca-policy/commit/9d3a03d364d0143be5efb3dc0793a6ff9c4807f3)]
+- Cleanup [Tiberiu Ichim - [`a6581bf`](https://github.com/eea/volto-cca-policy/commit/a6581bf00dba2c99bd1ab4622c7a4f14a55b24c2)]
+- Expand siblings on country profiles [Tiberiu Ichim - [`4cc075a`](https://github.com/eea/volto-cca-policy/commit/4cc075aca6be95a266b732c8ca836de7b39f7d4e)]
 ### [0.1.86](https://github.com/eea/volto-cca-policy/compare/0.1.85...0.1.86) - 1 March 2024
 
 #### :nail_care: Enhancements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.86",
+  "version": "0.1.88",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/theme/BannerTitle/BannerTitle.jsx

@@ -1,11 +1,22 @@
 import config from '@plone/volto/registry';
 
-const hasTypeOfBlock = (type, blocks) => {
-  const block = blocks
-    ? Object.keys(blocks).find((id) => blocks?.[id]?.['@type'] === type)
-    : null;
+const hasTypeOfBlock = (obj, targetKey, targetValue) => {
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (key === targetKey && obj[key] === targetValue) {
+        // console.log(`Key "${targetKey}" with value "${targetValue}" found`);
+        return true;
+      }
 
-  return block;
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        if (hasTypeOfBlock(obj[key], targetKey, targetValue)) {
+          return true;
+        }
+      }
+    }
+  }
+
+  return false;
 };
 
 const BannerTitle = (props) => {
@@ -15,8 +26,8 @@ const BannerTitle = (props) => {
     blocks: { blocksConfig },
   } = config;
   const TitleBlockView = blocksConfig?.title?.view;
-  const hasTitleBlock = hasTypeOfBlock('title', blocks);
-  const hasCountryFlagBlock = hasTypeOfBlock('countryFlag', blocks);
+  const hasTitleBlock = hasTypeOfBlock(blocks, '@type', 'title');
+  const hasCountryFlagBlock = hasTypeOfBlock(blocks, '@type', 'countryFlag');
   const types = ['Subsite', 'LRF', 'Plone Site'];
   const isHomePage = types.indexOf(content?.['@type']) > -1;
 

package/src/components/theme/Views/AdaptationOptionView.jsx

@@ -7,7 +7,7 @@ import {
   ShareInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Segment, Divider } from 'semantic-ui-react';
+import { Segment, Divider, Image } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
 
@@ -109,6 +109,7 @@ function AdaptationOptionView(props) {
     websites,
     source,
     ipcc_category,
+    logo,
   } = content;
 
   const usedSections = dataDisplay.filter((data) =>
@@ -120,6 +121,13 @@ function AdaptationOptionView(props) {
       <BannerTitle content={content} type="Adaptation Option" />
 
       <div className="ui container">
+        {logo && (
+          <Image
+            src={logo?.scales?.mini?.download}
+            alt={content.title}
+            className="db-logo"
+          />
+        )}
         <HTMLField value={long_description} />
         <SectionsMenu sections={usedSections} />
         <Divider />

package/src/components/theme/Views/CaseStudyView.jsx

@@ -8,19 +8,17 @@ import {
   ShareInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Divider, Segment, Grid, Icon } from 'semantic-ui-react';
+import { Divider, Segment, Grid, Icon, Image } from 'semantic-ui-react';
 import { ImageGallery } from '@eeacms/volto-cca-policy/components';
 
 const PrimaryPhoto = (props) => {
   const { content } = props;
+  const { primary_photo, primary_photo_copyright, title } = content;
 
-  return content.primary_photo !== null ? (
+  return primary_photo !== null ? (
     <div className="case-studies-review-image-wrapper">
-      <img
-        src={content?.primary_photo?.scales?.mini?.download}
-        alt={content.title}
-      />
-      <p>{content.primary_photo_copyright}</p>
+      <Image src={primary_photo?.scales?.mini?.download} alt={title} />
+      <p>{primary_photo_copyright}</p>
     </div>
   ) : null;
 };

package/src/components/theme/Views/CcaEventView.jsx

@@ -31,7 +31,7 @@ function CcaEventView(props) {
 
   return (
     <div className="cca-event-view">
-      <BannerTitle content={content} type="CCA Event" />
+      <BannerTitle content={content} />
 
       <div className="ui container">
         <Grid columns="12">

package/src/components/theme/Views/EventView.jsx

@@ -11,7 +11,7 @@ function CcaEventView(props) {
 
   return (
     <div className="cca-event-view">
-      <BannerTitle content={content} type="Event" />
+      <BannerTitle content={content} />
 
       <div className="ui container">
         <Grid columns="12">

package/src/components/theme/Views/GuidanceView.jsx

@@ -8,7 +8,7 @@ import {
   BannerTitle,
   DocumentsList,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Segment, Divider } from 'semantic-ui-react';
+import { Segment, Divider, Image } from 'semantic-ui-react';
 
 const ContributorsList = (props) => {
   const { content } = props;
@@ -32,12 +32,19 @@ const ContributorsList = (props) => {
 
 function GuidanceView(props) {
   const { content } = props;
-  const { long_description, websites, source, cca_files } = content;
+  const { long_description, websites, source, cca_files, logo } = content;
 
   return (
     <div className="db-item-view guidance-view">
       <BannerTitle content={content} type="Guidance Document" />
       <div className="ui container">
+        {logo && (
+          <Image
+            src={logo?.scales?.mini?.download}
+            alt={content.title}
+            className="db-logo"
+          />
+        )}
         <h2>Description</h2>
         <HTMLField value={long_description} />
         <Divider />

package/src/components/theme/Views/IndicatorView.jsx

@@ -7,7 +7,7 @@ import {
   ShareInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Segment, Divider } from 'semantic-ui-react';
+import { Segment, Divider, Image } from 'semantic-ui-react';
 
 function IndicatorView(props) {
   const { content } = props;
@@ -17,13 +17,21 @@ function IndicatorView(props) {
     source,
     contributor_list,
     other_contributor,
+    logo,
   } = content;
 
   return (
     <div className="db-item-view indicator-view">
-      <BannerTitle content={content} type="Indicator" />
+      <BannerTitle content={{ ...content, image: '' }} type="Indicator" />
 
       <div className="ui container">
+        {logo && (
+          <Image
+            src={logo?.scales?.mini?.download}
+            alt={content.title}
+            className="db-logo"
+          />
+        )}
         <h2>Description</h2>
         <HTMLField value={long_description} />
         <Divider />

package/src/components/theme/Views/InformationPortalView.jsx

@@ -7,17 +7,24 @@ import {
   ShareInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Segment } from 'semantic-ui-react';
+import { Segment, Image } from 'semantic-ui-react';
 
 function InformationPortalView(props) {
   const { content } = props;
-  const { long_description, websites, source } = content;
+  const { long_description, websites, source, logo } = content;
 
   return (
     <div className="db-item-view information-portal-view">
       <BannerTitle content={content} type="Information Portal" />
 
       <div className="ui container">
+        {logo && (
+          <Image
+            src={logo?.scales?.mini?.download}
+            alt={content.title}
+            className="db-logo"
+          />
+        )}
         <h2>Description</h2>
         <HTMLField value={long_description} />
 

package/src/components/theme/Views/NewsItemView.jsx

@@ -2,8 +2,8 @@
 import React from 'react';
 import { HTMLField } from '@eeacms/volto-cca-policy/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-import config from '@plone/volto/registry';
 import { Label } from 'semantic-ui-react';
+import { BannerTitle } from '@eeacms/volto-cca-policy/components';
 
 // const Date = (props) => {
 //   const date = props.content?.effective;
@@ -27,19 +27,11 @@ const SubjectTags = (props) => {
 };
 
 function CcaEventView(props) {
-  const {
-    blocks: { blocksConfig },
-  } = config;
-  const TitleBlockView = blocksConfig?.title?.view;
   const { content } = props;
 
   return (
     <div className="cca-newsitem-view">
-      <TitleBlockView
-        {...props}
-        data={{ info: [{ description: '' }] }}
-        metadata={content}
-      />
+      <BannerTitle content={content} />
       <div className="ui container">
         <p>{content.description}</p>
         <HTMLField value={content.text} className="long_description" />

package/src/components/theme/Views/OrganisationView.jsx

@@ -8,11 +8,11 @@ import {
   ShareInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Segment, Divider } from 'semantic-ui-react';
+import { Segment, Divider, Image } from 'semantic-ui-react';
 
 function OrganisationView(props) {
   const { content } = props;
-  const { long_description, websites, relatedItems } = content;
+  const { long_description, websites, relatedItems, logo } = content;
 
   let organisationDocuments = [];
   let contentRelatedItems = [];
@@ -32,7 +32,15 @@ function OrganisationView(props) {
 
       <div className="ui container">
         <div>
+          {logo && (
+            <Image
+              src={logo?.scales?.mini?.download}
+              alt={content.title}
+              className="db-logo"
+            />
+          )}
           <h2>Description</h2>
+
           <HTMLField value={long_description} />
           <Divider />
           <h2>Reference information</h2>

package/src/components/theme/Views/ProjectView.jsx

@@ -6,7 +6,7 @@ import {
   PublishedModifiedInfo,
   ShareInfo,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Divider, Segment } from 'semantic-ui-react';
+import { Divider, Segment, Image } from 'semantic-ui-react';
 
 import config from '@plone/volto/registry';
 
@@ -20,6 +20,7 @@ function ProjectView(props) {
     acronym,
     title,
     websites,
+    logo,
   } = content;
 
   const {
@@ -49,6 +50,13 @@ function ProjectView(props) {
       />
 
       <div className="ui container">
+        {logo && (
+          <Image
+            src={logo?.scales?.mini?.download}
+            alt={content.title}
+            className="db-logo"
+          />
+        )}
         <h2>Description</h2>
         <HTMLField value={long_description} />
 

package/src/components/theme/Views/PublicationReportView.jsx

@@ -7,17 +7,25 @@ import {
   ReferenceInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Segment } from 'semantic-ui-react';
+import { Segment, Image } from 'semantic-ui-react';
 
 function PublicationReportView(props) {
   const { content } = props;
-  const { cca_files } = content;
+  const { cca_files, logo } = content;
 
   return (
     <div className="db-item-view publication-report-view">
       <BannerTitle content={content} type="Publications and Report" />
 
       <div className="ui container">
+        {logo && (
+          <Image
+            src={logo?.scales?.mini?.download}
+            alt={content.title}
+            className="db-logo"
+          />
+        )}
+
         <ReferenceInfo content={content} />
         <PublishedModifiedInfo {...props} />
         <ShareInfo {...props} />

package/src/components/theme/Views/ToolView.jsx

@@ -5,16 +5,23 @@ import {
   ReferenceInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Segment } from 'semantic-ui-react';
+import { Segment, Image } from 'semantic-ui-react';
 
 function ToolView(props) {
-  const { content } = props;
+  const { content, logo } = props;
 
   return (
     <div className="db-item-view tool-view">
       <BannerTitle content={content} type="Tools" />
 
       <div className="ui container">
+        {logo && (
+          <Image
+            src={logo?.scales?.mini?.download}
+            alt={content.title}
+            className="db-logo"
+          />
+        )}
         <ReferenceInfo content={content} />
         <PublishedModifiedInfo {...props} />
 

package/src/components/theme/Views/VideoView.jsx

@@ -7,7 +7,7 @@ import {
   ShareInfo,
   BannerTitle,
 } from '@eeacms/volto-cca-policy/helpers';
-import { Divider, Segment } from 'semantic-ui-react';
+import { Divider, Segment, Image } from 'semantic-ui-react';
 
 function VideoView(props) {
   const { content } = props;
@@ -19,6 +19,7 @@ function VideoView(props) {
     long_description,
     other_contributor,
     related_documents_presentations,
+    logo,
   } = content;
 
   const share_eea = ['https://cmshare.eea.eu', 'shareit.eea.europa.eu'];
@@ -39,6 +40,14 @@ function VideoView(props) {
       <BannerTitle content={content} type="Video" />
 
       <div className="ui container">
+        {logo && (
+          <Image
+            src={logo?.scales?.mini?.download}
+            alt={content.title}
+            className="db-logo"
+          />
+        )}
+
         {is_cmshare_video && (
           <div className="video-wrapper">
             <center>

package/src/customizations/volto/middleware/api.js

@@ -50,7 +50,10 @@ export function addExpandersToPath(path, type, isAnonymous) {
   } = qs.parseUrl(path, { decode: false });
 
   const expandersFromConfig = apiExpanders
-    .filter((expand) => matchPath(url, expand.match) && expand[type])
+    .filter((expand) => {
+      const res = matchPath(url, expand.match) && expand[type];
+      return res;
+    })
     .map((expand) => expand[type]);
 
   const expandMerge = compact(

package/src/index.js

@@ -485,6 +485,16 @@ const applyConfig = (config) => {
     },
   ];
 
+  config.settings.apiExpanders = [
+    ...config.settings.apiExpanders,
+    {
+      match: {
+        path: /(.*)\/policy-context\/country-profiles\/(.*)/,
+      },
+      GET_CONTENT: ['siblings'],
+    },
+  ];
+
   return compose(installBlocks, installSearchEngine, installStore)(config);
 };
 

package/theme/globals/search.less

@@ -0,0 +1,18 @@
+.section-search-the-database .block.call-to-action.align.center a {
+  display: block;
+}
+
+body.searchlib-page .searchlib-block {
+  .ui.secondary.pointing.content-section-tabs.menu {
+    .active.item .tab-icon .count {
+      border-color: @ccaGreenColor;
+      background-color: @ccaGreenColor;
+    }
+  }
+}
+
+.searchlib-page .content-section-tabs.menu .item i.icon.small {
+  width: 32px;
+  height: 32px;
+  font-size: 32px;
+}

package/theme/globals/site.overrides

@@ -3,6 +3,8 @@
 *******************************/
 @import './mission.less';
 @import './observatory.less';
+@import './views.less';
+@import './search.less';
 
 // [class~='view-defaultview'] [id='page-document'] > *,
 // [class~='view-viewview'] [id='page-document'] > * {
@@ -15,8 +17,11 @@
   @green-2 97.12%
 );
 
-.section-search-the-database .block.call-to-action.align.center a {
-  display: block;
+.ui.ordered.list,
+.ui.ordered.list .list,
+ol.ui.list,
+ol.ui.list ol {
+  padding-left: 1.25rem;
 }
 
 body.subsite-root .content-area {
@@ -79,216 +84,7 @@ p.has--clear--both:empty {
 //   // }
 // }
 
-// Case study view styles
-.case-study-view {
-  .case-studies-review-image-wrapper {
-    position: relative;
-    margin-right: 1.5em;
-    float: left;
-
-    p {
-      font-size: 90%;
-    }
-  }
-}
-
-// Video view styles
-div.video-view {
-  video {
-    margin-top: 1.5em;
-  }
-
-  div.external-video {
-    margin-top: 1.5em;
-  }
-}
-
-// C3S Indicator view styles
-div.c3sindicator-view {
-  iframe {
-    border: none;
-  }
-
-  .ui.accordion {
-    margin: 1.5em 0;
-  }
-}
-
-// Geochars widget
-div.geochars-field {
-  div.checkbox {
-    margin-right: 1em;
-
-    label {
-      padding-left: 1.5em;
-    }
-  }
-}
-
-.section-metadata {
-  .content-area {
-    margin-bottom: 0 !important;
-  }
-}
-
-hr {
-  height: 1px;
-  border: none;
-  margin: 2em 0;
-  background-color: #e6e7e8;
-}
-
-.ui.modal.slider-modal {
-  .content {
-    padding: 2em;
-  }
-
-  .slick-slider {
-    padding: 1em 2em;
-  }
-
-  .slide-image-count {
-    text-align: center;
-  }
-
-  .slick-arrow {
-    width: 35px;
-    height: 35px;
-
-    &:before {
-      font-size: 30px;
-    }
-  }
-
-  .slick-prev {
-    left: -13px;
-  }
-
-  .slick-next {
-    right: -13px;
-  }
-}
-
-.db-item-view {
-  .ui.divider {
-    margin: 2em 0;
-  }
-
-  .casetstudy-gallery {
-    cursor: pointer;
-
-    .gallery-title {
-      padding: 2px 4px;
-      background-color: #f2c94c;
-      font-weight: bold;
-      text-align: center;
-    }
-  }
-
-  .bottom-text {
-    margin-bottom: 2em;
-  }
-
-  .c3s-buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .adaptation-details {
-    display: flex;
-    flex-direction: row;
-    margin: 2em 0;
-    gap: 5em;
-  }
-
-  .ui.segment {
-    margin-bottom: 1.5em;
-  }
-
-  .section {
-    .section-title {
-      margin-top: 1em;
-    }
-  }
-
-  .documents-list {
-    padding: 0;
-    list-style-type: none;
-
-    li a:before {
-      content: '' !important;
-    }
-  }
-
-  .share-info {
-    margin: 3.5em 0 !important;
-
-    .ui.button {
-      margin: 0 !important;
-    }
-  }
-
-  .ui.button {
-    margin: 1.5em 0 !important;
-  }
-
-  .content-box {
-    margin: 0;
-
-    h5 {
-      color: @secondaryColor;
-    }
-
-    .content-box-inner {
-      padding: 3.5em 0;
-    }
-  }
-
-  .video-wrapper {
-    margin-bottom: 2em;
-  }
-
-  .content-metadata {
-    h5 {
-      margin: 1em 0 0.5em 0;
-      color: @secondaryColor;
-
-      &:first-child {
-        margin-top: 0;
-      }
-    }
-
-    p,
-    span {
-      color: @grey-4;
-    }
-  }
-}
-
 // General styles
-.btn-right {
-  margin: calc(2rem - 0.1em) 0em 1rem;
-  float: right;
-}
-
-.published-modified-info {
-  margin: 2em 0;
-  font-size: 0.8em;
-}
-
-.content-metadata {
-  .columned.related-case-studies {
-    column-count: 2;
-    column-gap: 4em;
-  }
-
-  .related-case-studies {
-    li {
-      margin-bottom: 0.5em;
-    }
-  }
-}
 
 .listing-body-dates:empty {
   margin-bottom: 0;
@@ -346,21 +142,6 @@ body.subsite {
   margin-right: auto;
 }
 
-body.searchlib-page .searchlib-block {
-  .ui.secondary.pointing.content-section-tabs.menu {
-    .active.item .tab-icon .count {
-      border-color: @ccaGreenColor;
-      background-color: @ccaGreenColor;
-    }
-  }
-}
-
-.searchlib-page .content-section-tabs.menu .item i.icon.small {
-  width: 32px;
-  height: 32px;
-  font-size: 32px;
-}
-
 // Fix margin in simple item listing
 .u-item.listing-item.simple-listing-item .listing-body {
   margin-top: 0;

package/theme/globals/views.less

@@ -0,0 +1,215 @@
+// Case study view styles
+.case-study-view {
+  .case-studies-review-image-wrapper {
+    position: relative;
+    margin-right: 1.5em;
+    float: left;
+
+    p {
+      font-size: 90%;
+    }
+  }
+}
+
+// Video view styles
+div.video-view {
+  video {
+    margin-top: 1.5em;
+  }
+
+  div.external-video {
+    margin-top: 1.5em;
+  }
+}
+
+// C3S Indicator view styles
+div.c3sindicator-view {
+  iframe {
+    border: none;
+  }
+
+  .ui.accordion {
+    margin: 1.5em 0;
+  }
+}
+
+// Geochars widget
+div.geochars-field {
+  div.checkbox {
+    margin-right: 1em;
+
+    label {
+      padding-left: 1.5em;
+    }
+  }
+}
+
+.content-metadata {
+  .columned.related-case-studies {
+    column-count: 2;
+    column-gap: 4em;
+  }
+
+  .related-case-studies {
+    li {
+      margin-bottom: 0.5em;
+    }
+  }
+}
+
+.btn-right {
+  margin: calc(2rem - 0.1em) 0em 1rem;
+  float: right;
+}
+
+.published-modified-info {
+  margin: 2em 0;
+  font-size: 0.8em;
+}
+
+.section-metadata,
+.section-\+\+aq\+\+metadata {
+  .content-area {
+    margin-bottom: 0 !important;
+  }
+}
+
+hr {
+  height: 1px;
+  border: none;
+  margin: 2em 0;
+  background-color: #e6e7e8;
+}
+
+.ui.modal.slider-modal {
+  .content {
+    padding: 2em;
+  }
+
+  .slick-slider {
+    padding: 1em 2em;
+  }
+
+  .slide-image-count {
+    text-align: center;
+  }
+
+  .slick-arrow {
+    width: 35px;
+    height: 35px;
+
+    &:before {
+      font-size: 30px;
+    }
+  }
+
+  .slick-prev {
+    left: -13px;
+  }
+
+  .slick-next {
+    right: -13px;
+  }
+}
+
+.db-item-view {
+  .db-logo {
+    max-width: 150px !important;
+    margin-bottom: 1em;
+  }
+
+  .ui.divider {
+    margin: 2em 0;
+  }
+
+  .casetstudy-gallery {
+    cursor: pointer;
+
+    .gallery-title {
+      padding: 2px 4px;
+      background-color: #f2c94c;
+      font-weight: bold;
+      text-align: center;
+    }
+  }
+
+  .bottom-text {
+    margin-bottom: 2em;
+  }
+
+  .c3s-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .adaptation-details {
+    display: flex;
+    flex-direction: row;
+    margin: 2em 0;
+    gap: 5em;
+  }
+
+  .ui.segment {
+    margin-bottom: 1.5em;
+  }
+
+  .section {
+    .section-title {
+      margin-top: 1em;
+    }
+  }
+
+  .documents-list {
+    padding: 0;
+    list-style-type: none;
+
+    li a:before {
+      content: '' !important;
+    }
+  }
+
+  .share-info {
+    margin: 3.5em 0 !important;
+
+    .ui.button {
+      margin: 0 !important;
+    }
+  }
+
+  .ui.button {
+    margin: 1.5em 0 !important;
+  }
+
+  .content-box {
+    margin: 0;
+
+    h5 {
+      color: @secondaryColor;
+    }
+
+    .content-box-inner {
+      padding: 3.5em 0;
+    }
+  }
+
+  .video-wrapper {
+    margin-bottom: 2em;
+  }
+
+  .content-metadata {
+    h5 {
+      margin: 1em 0 0.5em 0;
+      color: @secondaryColor;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    p,
+    span {
+      color: @grey-4;
+    }
+  }
+}