Feat/ Governance content v2

src/ui/i18n/translations/common_de.json

@@ -20,5 +20,6 @@
   "dataverse": "Dataverse",
   "from": "Von:",
   "to": "Bis:",
-  "know": "Know"
+  "know": "Know",
+  "seeAll": "Mehr lesen"
 }

src/ui/i18n/translations/common_en.json

@@ -20,5 +20,6 @@
   "dataverse": "Dataverse",
   "from": "From:",
   "to": "To:",
-  "know": "Know"
+  "know": "Know",
+  "seeAll": "See all"
 }

src/ui/i18n/translations/common_fr.json

@@ -20,5 +20,6 @@
   "dataverse": "Dataverse",
   "from": "Depuis le :",
   "to": "Jusqu'au :",
-  "know": "Know"
+  "know": "Know",
+  "seeAll": "Afficher plus"
 }

src/ui/page/dataverse/dataspace/governance/governance.scss

@@ -130,7 +130,11 @@
       }
 
       .okp4-dataverse-portal-governance-governance-details-main {
-        @include grid-item($colStart: 4, $colEnd: -1, $rowStart: 2, $rowEnd: auto);
+        @include grid-item($colStart: 4, $colEnd: -1, $rowStart: 2, $rowEnd: 3);
+
+        @include use-breakpoints(('tablet', 'mobile')) {
+          @include grid-item($colStart: 1, $colEnd: -1, $rowStart: 3, $rowEnd: auto);
+        }
       }
     }
   }

src/ui/page/dataverse/dataspace/governance/mockedData.ts

@@ -193,6 +193,13 @@ export const mockedGovernanceChapter: Chapter = {
                   description: 'Must be completed',
                   number: '1.3.1.1.5'
                 },
+                {
+                  id: '25',
+                  title: 'Users',
+                  description:
+                    'did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575655 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575656 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575659 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575660 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575662',
+                  number: '1.3.1.1.6'
+                },
                 {
                   id: '24',
                   title: 'Licence',
@@ -201,11 +208,40 @@ export const mockedGovernanceChapter: Chapter = {
                   number: '1.3.1.1.7'
                 },
                 {
-                  id: '25',
+                  id: '26',
                   title: 'Users',
                   description:
                     'did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575655 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575656 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575659 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575660 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575662',
-                  number: '1.3.1.1.6'
+                  number: '1.3.1.1.8'
+                },
+                {
+                  id: '27',
+                  title:
+                    'A very large name for a very large dataset, so large that it is not possible to display it on a single line',
+                  description: 'a short description of the dataset',
+                  number: '1.3.1.1.9'
+                },
+                {
+                  id: '28',
+                  title:
+                    'A very large name for a very large dataset, so large that it is not possible to display it on a single line',
+                  description:
+                    'did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575655 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575656 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575659 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575660 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575662',
+                  number: '1.3.1.1.10'
+                },
+                {
+                  id: '29',
+                  title: 'Users',
+                  description:
+                    'did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575655 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575656 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575659 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575660 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575662',
+                  number: '1.3.1.1.11'
+                },
+                {
+                  id: '30',
+                  title: 'Users',
+                  description:
+                    'did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575655 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575656 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575659 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575660 did:key:0x04d1f1b8f8a7a28f9a5a254c326a963a22f5a5b5d5f5e5d5c5b5a5958575662',
+                  number: '1.3.1.1.12'
                 }
               ]
             }

src/ui/view/governance/details/details.scss

@@ -47,95 +47,157 @@
       .okp4-dataverse-portal-governance-details-subsection-content {
         @include columns-with-gap(14px);
 
-        .okp4-dataverse-portal-governance-details-article-container {
-          @include columns-with-gap(40px);
-          background: themed(article-background);
-          border-radius: 20px;
-          padding: 40px;
-
-          .okp4-dataverse-portal-governance-details-article-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .okp4-dataverse-portal-governance-details-article-header-left-part {
-              @include columns-with-gap(12px);
-
-              .okp4-dataverse-portal-governance-details-article-title {
-                line-height: 22px;
-              }
-            }
+      }
+    }
 
-            .okp4-dataverse-portal-governance-details-article-header-right-part {
-              display: flex;
-              align-items: center;
-              gap: 40px;
+    .okp4-dataverse-portal-governance-details-article-container {
+      @include columns-with-gap(40px);
+      background: themed(article-background);
+      border-radius: 20px;
+      padding: 40px;
+
+      @include use-breakpoints(('tablet', 'mobile')) {
+        align-items: center;
+        padding: 20px;
+      }
 
-              .okp4-dataverse-portal-governance-details-article-paragraphs-number {
-                padding: 12px 17px;
-                background: themed(background-variant-1);
-                border-radius: 8px;
-              }
+      .okp4-dataverse-portal-governance-details-article-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
 
-              .okp4-dataverse-portal-governance-details-article-expand-button {
-                cursor: pointer;
+        .okp4-dataverse-portal-governance-details-article-header-left-part {
+          @include columns-with-gap(12px);
 
-                &.rotate-down {
-                  @include rotation-animation(-180deg);
-                }
+          .okp4-dataverse-portal-governance-details-article-title {
+            line-height: 22px;
+          }
+        }
 
-                &.rotate-up {
-                  @include rotation-animation(0deg);
-                }
-              }
-            }
+        .okp4-dataverse-portal-governance-details-article-header-right-part {
+          display: flex;
+          align-items: center;
+          gap: 40px;
+
+          .okp4-dataverse-portal-governance-details-article-paragraphs-number {
+            padding: 12px 17px;
+            background: themed(background-variant-1);
+            border-radius: 8px;
           }
 
-          .okp4-dataverse-portal-governance-details-paragraphs-container {
-            @include columns-with-gap(14px);
-            flex-wrap: wrap;
-            align-content: flex-start;
-            column-gap: 28px;
-            max-height: 670px;
-
-            .okp4-dataverse-portal-governance-details-paragraph-container {
-              background: themed(paragraph-background);
-              max-height: 252px;
-              border-radius: 10px;
-              width: 320px;
-              line-height: 20px;
+          .okp4-dataverse-portal-governance-details-article-expand-button {
+            cursor: pointer;
+
+            &.rotate-down {
+              transform: rotate(-180deg);
+              transition: transform 0.1s linear;
             }
 
-            .okp4-dataverse-portal-governance-details-paragraph {
-              @include columns-with-gap(6px);
-              padding: 20px;
+            &.rotate-up {
+              transform: rotate(0deg);
+              transition: transform 0.1s linear;
+            }
+          }
+        }
+      }
 
-              .okp4-dataverse-portal-governance-details-paragraph-title {
-                font-size: 16px;
-              }
+    }
 
-              .okp4-dataverse-portal-governance-details-description {
-                &.paragraph {
-                  max-height: 112px;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  /* stylelint-disable-next-line value-no-vendor-prefix */
-                  display: -webkit-box;
-                  -webkit-line-clamp: 4;
-                  -webkit-box-orient: vertical;
-                }
-              }
+    .okp4-dataverse-portal-governance-details-paragraphs-container {
+      --paragraphs-row-gap: 14px;
+      --paragraph-height: 147px;
+      column-gap: 28px;
+      @include grid-container($colsNb: 3,$colsSize: 320px,$gutter: 28px);
+      row-gap: 14px;
+      max-height: calc((var(--paragraph-height) + var(--paragraphs-row-gap)) * 3);
+      max-width: fit-content;
+      padding-right: 28px;
+      overflow-y: auto;      
+
+      @include use-breakpoints(('desktop')) {
+        @include grid-container($colsNb: 2,$colsSize: 320px,$gutter: 28px);
+        max-height: calc((var(--paragraph-height) + var(--paragraphs-row-gap)) * 4)
+      }
+      @include use-breakpoints(('tablet')) {
+        @include grid-container($colsNb: 2,$colsSize: minmax(0, 1fr),$gutter: 28px);
+        padding: 0;
+        max-height: none;
+      }
+      @include use-breakpoints(('mobile')) {
+        @include grid-container($colsNb: 1,$colsSize: minmax(0, 1fr),$gutter: 28px);
+        padding: 0;
+        max-height: none;
+      }
+
+      .okp4-dataverse-portal-governance-details-paragraph-container {
+        @include columns-with-gap(6px);
+        box-sizing: border-box;
+        background: themed(paragraph-background);
+        border-radius: 10px;
+        line-height: 20px;
+        padding: 20px;
+
+        @include use-breakpoints(('mobile')) {
+          max-width: 302px;
+        }
+        @include use-breakpoints(('tablet')) {
+          max-width: 302px;
+        }
+        @include use-breakpoints(('desktop', 'large-desktop')) {
+          width: 320px;
+          height: var(--paragraph-height);
+        }
+
+        .okp4-dataverse-portal-governance-details-paragraph-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
 
-              .okp4-dataverse-portal-governance-details-button {
-                display: flex;
+          .okp4-dataverse-portal-governance-details-paragraph-icon-and-heading {
+            @include columns-with-gap(6px);
 
-                button {
-                  width: fit-content;
-                }
+            .okp4-dataverse-portal-governance-details-paragraph-icon {
+              width: 22px;
+              height: 22px;
+            }
+
+            .okp4-dataverse-portal-governance-details-paragraph-title {
+              font-size: 16px;
+              line-height: 20px;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              /* stylelint-disable-next-line value-no-vendor-prefix */
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+
+              &.oneline {
+                -webkit-line-clamp: 1;
               }
             }
+
+          }
+
+          .okp4-dataverse-portal-governance-details-button {
+            flex-shrink: 0;
+            width: fit-content;
+            border-radius: 12px;
           }
         }
+
+        .okp4-dataverse-portal-governance-details-description {
+          &.paragraph {
+            font-size: 14px;
+            line-height: 20px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            /* stylelint-disable-next-line value-no-vendor-prefix */
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+          }
+        }
+
       }
     }
   }

src/ui/view/governance/details/details.tsx

@@ -12,6 +12,8 @@ import type {
 } from '@/ui/page/dataverse/dataspace/governance/mockedData'
 
 import './details.scss'
+import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
 
 type ArticleProps = {
   article: ArticleDTO
@@ -44,6 +46,7 @@ const iconMapping: Record<string, string> = {
 }
 
 const Paragraph: FC<ParagraphProps> = ({ paragraph, theme }) => {
+  const { t } = useTranslation('common')
   const [isTextTooLong, setIsTextTooLong] = useState<boolean>(false)
   const paragraphRef = useCallback((node: HTMLParagraphElement | null) => {
     if (node !== null) {
@@ -53,23 +56,31 @@ const Paragraph: FC<ParagraphProps> = ({ paragraph, theme }) => {
 
   return (
     <div className="okp4-dataverse-portal-governance-details-paragraph-container">
-      <div className="okp4-dataverse-portal-governance-details-paragraph">
-        <Icon name={`${iconMapping[paragraph.title] || 'description'}-${theme}` as IconName} />
-        <h3 className="okp4-dataverse-portal-governance-details-paragraph-title">
-          {paragraph.title}
-        </h3>
-        <p
-          className="okp4-dataverse-portal-governance-details-description paragraph"
-          ref={paragraphRef}
-        >
-          {paragraph.description}
-        </p>
+      <div className="okp4-dataverse-portal-governance-details-paragraph-header">
+        <div className="okp4-dataverse-portal-governance-details-paragraph-icon-and-heading">
+          <Icon name={`${iconMapping[paragraph.title] || 'description'}-${theme}` as IconName} />
+          <h3
+            className={classNames('okp4-dataverse-portal-governance-details-paragraph-title', {
+              oneline: isTextTooLong
+            })}
+          >
+            {paragraph.title}
+          </h3>
+        </div>
         {isTextTooLong && (
-          <div className="okp4-dataverse-portal-governance-details-button">
-            <Button disabled label="See more" variant="outlined-tertiary" />
-          </div>
+          <Button
+            className="okp4-dataverse-portal-governance-details-button"
+            label={t('seeAll')}
+            variant="outlined-tertiary"
+          />
         )}
       </div>
+      <p
+        className="okp4-dataverse-portal-governance-details-description paragraph"
+        ref={paragraphRef}
+      >
+        {paragraph.description}
+      </p>
     </div>
   )
 }