@eeacms/volto-cca-policy 0.1.85 → 0.1.87

package/CHANGELOG.md

@@ -4,6 +4,34 @@ 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.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
+
+- change(banner): improve BannerTitle component [kreafox - [`bb49297`](https://github.com/eea/volto-cca-policy/commit/bb49297ff439dba1b8174cb65c9aae2fc419d047)]
+
+#### :house: Internal changes
+
+- style(stats): CSS fixes [kreafox - [`696c0fd`](https://github.com/eea/volto-cca-policy/commit/696c0fda6241f264f097e76812ada3b30b2ef760)]
+- style(stats): fix z-index on count [kreafox - [`aeaaf1c`](https://github.com/eea/volto-cca-policy/commit/aeaaf1cc912a946b5c2553937c41940b926d3dd8)]
+- style: improve tab items on hover [kreafox - [`7b0bc8b`](https://github.com/eea/volto-cca-policy/commit/7b0bc8b8e398503521d86048f96c5d2749595a55)]
+
 ### [0.1.85](https://github.com/eea/volto-cca-policy/compare/0.1.84...0.1.85) - 29 February 2024
 
 #### :house: Internal changes
@@ -483,10 +511,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #260715 rast-block wip [Tripon Eugen - [`f19d54e`](https://github.com/eea/volto-cca-policy/commit/f19d54e0b9a6a86bf344eb85b6a1cda7f3de91bf)]
 - Refs #260715 rast-block wip [Tripon Eugen - [`2828537`](https://github.com/eea/volto-cca-policy/commit/2828537b6c084cd1a82162d552fb4ef025b71f9f)]
 - Refs #260715 rast-block updates [Tripon Eugen - [`1e803e5`](https://github.com/eea/volto-cca-policy/commit/1e803e5bd3d3fb7558f261c76c68866be7beb8b5)]
+- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`0a15e1b`](https://github.com/eea/volto-cca-policy/commit/0a15e1b2ad081233685e80d5b3c60a8663f6b896)]
+- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`9554e44`](https://github.com/eea/volto-cca-policy/commit/9554e44c92a621a52b2adb5a4830fb084ee5734b)]
 ### [0.1.49](https://github.com/eea/volto-cca-policy/compare/0.1.48...0.1.49) - 15 November 2023
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Refactor automated testing [valentinab25 - [`7b820a6`](https://github.com/eea/volto-cca-policy/commit/7b820a6369c2ddd5203b1a4abe352cb4bb43db7a)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`f0a8061`](https://github.com/eea/volto-cca-policy/commit/f0a8061c275c236deb00087c23fac9860a073106)]
 
 #### :hammer_and_wrench: Others
@@ -503,6 +534,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #259267 - jenkins test [Tripon Eugen - [`cacd31e`](https://github.com/eea/volto-cca-policy/commit/cacd31e7b1afe0983674ed5c7632d2e1d7fa752e)]
 - Refs #259267 - jenkins [Tripon Eugen - [`5b3affe`](https://github.com/eea/volto-cca-policy/commit/5b3affee8401239de10097884c1b7f2349d15ec0)]
 - Refs #259267 - add When, lead image and title to files [Tripon Eugen - [`2cedb23`](https://github.com/eea/volto-cca-policy/commit/2cedb237f898af9057e13fba94b615ef71077204)]
+- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`4d607a5`](https://github.com/eea/volto-cca-policy/commit/4d607a576e9d0a5c34e48c41b409e7df616ee3d6)]
+- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`b7f74d5`](https://github.com/eea/volto-cca-policy/commit/b7f74d53513a6edbfbca5cb6d19687929bb1e5db)]
+- test: [JENKINS] Improve cypress time [valentinab25 - [`db65617`](https://github.com/eea/volto-cca-policy/commit/db656173391f65157098d95d388c25f6429753d8)]
 - Refs #259267 - cca event blocks attachments and check not mandatoty fields [Tripon Eugen - [`3138e5a`](https://github.com/eea/volto-cca-policy/commit/3138e5afb5bfbdbed14e27ed457b16867b7fa414)]
 - Refs #256681 - Fix error in CCA Event view menu. ([React Intl] An id must be provided to format a message.) [GhitaB - [`517eeb8`](https://github.com/eea/volto-cca-policy/commit/517eeb817264a47bbfd6b9b7d22aaf22d44ed224)]
 - Refs #161485 - Fix ECDE name conflict. [GhitaB - [`8bfd99f`](https://github.com/eea/volto-cca-policy/commit/8bfd99ff68bb82a04d1c0ed625fa514fcf46289e)]
@@ -719,6 +753,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`ad1ced0`](https://github.com/eea/volto-cca-policy/commit/ad1ced0971ba116c13a3b5fcc039172cc915c919)]
 
 #### :hammer_and_wrench: Others
 
@@ -1199,6 +1234,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
+- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/manage/Blocks/CollectionStatistics/CollectionStatsView.jsx

@@ -24,7 +24,7 @@ const useStats = (path, id, data) => {
 
 export const StatVoltoIcon = ({ name, value, source, showLabel = false }) => {
   return (
-    <div className="tab-icon" title={value}>
+    <div className="tab-icon" title={name}>
       <div className="tab-icon-wrapper">
         {!source && name}
         {!!source && <Icon title={name} name={source} size="50" />}
@@ -37,7 +37,7 @@ export const StatVoltoIcon = ({ name, value, source, showLabel = false }) => {
 
 export const RemixIcon = ({ name, value, source, showLabel = false }) => {
   return (
-    <div className="tab-icon semantic-icon" title={value}>
+    <div className="tab-icon semantic-icon" title={name}>
       <div className="tab-icon-wrapper">
         {!!source && <UiIcon title={name} name={source} />}
         <span className="count">{value}</span>
@@ -100,6 +100,7 @@ export default function CollectionStatsView(props) {
           .sort((a, b) => a.localeCompare(b))
           .map((k) => (
             <UniversalLink
+              className="tab-item-link"
               key={k}
               href={urlHandler({
                 base,

package/src/components/manage/Blocks/CollectionStatistics/styles.less

@@ -7,11 +7,17 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin: 2em 0;
-  gap: 2.5em;
+  margin: 1em 0;
+  gap: 1em;
 
-  .semantic-icon i.icon {
-    font-size: 3em;
+  .semantic-icon {
+    i.icon {
+      font-size: 2em;
+    }
+
+    .label {
+      width: 85px !important;
+    }
   }
 
   .tab-icon-wrapper {
@@ -19,18 +25,31 @@
     display: inline-block;
   }
 
+  .tab-item-link:hover {
+    .count {
+      background-color: @ccaGreenColor;
+    }
+
+    .tab-icon,
+    .label {
+      color: @primaryColor;
+    }
+  }
+
   .tab-icon {
     color: @secondaryColor;
     text-align: center;
 
     .label {
       display: block;
-      max-width: 130px;
+      width: 120px;
+      color: @contentAreaColor;
+      font-size: 14px;
     }
 
     .count {
       position: absolute;
-      z-index: 100;
+      z-index: 1;
       top: auto;
       bottom: 0;
       left: 100%;

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

@@ -1,22 +1,39 @@
 import config from '@plone/volto/registry';
 
+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;
+      }
+
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        if (hasTypeOfBlock(obj[key], targetKey, targetValue)) {
+          return true;
+        }
+      }
+    }
+  }
+
+  return false;
+};
+
 const BannerTitle = (props) => {
   const { content } = props;
+  const { blocks } = content;
   const {
     blocks: { blocksConfig },
   } = config;
   const TitleBlockView = blocksConfig?.title?.view;
-  const hasTitleBlock = content?.blocks
-    ? Object.keys(content?.blocks).find(
-        (id) => content?.blocks?.[id]?.['@type'] === 'title',
-      )
-    : null;
-  const isHomePage =
-    ['Subsite', 'LRF', 'Plone Site'].indexOf(content?.['@type']) > -1;
+  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;
 
   return !isHomePage ? (
     <>
-      {!hasTitleBlock ? (
+      {!hasTitleBlock && !hasCountryFlagBlock ? (
         <TitleBlockView
           {...props}
           data={{

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/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,12 @@ 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 cx from 'classnames';
 
 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 +33,16 @@ function OrganisationView(props) {
 
       <div className="ui container">
         <div>
-          <h2>Description</h2>
+          <div className={cx({ 'has-logo': logo })}>
+            <h2>Description</h2>
+
+            <Image
+              src={logo?.scales?.mini?.download}
+              alt={content.title}
+              className="org-logo"
+            />
+          </div>
+
           <HTMLField value={long_description} />
           <Divider />
           <h2>Reference information</h2>

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,223 @@
+// 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.organisation-view {
+  .has-logo {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .org-logo {
+    max-width: 150px;
+    margin-bottom: 1em;
+  }
+}
+
+.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;
+    }
+  }
+}