Improve dataset view

eea · Feb 7, 2023 · f7eafe0 · f7eafe0
1 parent 3470c25
commit f7eafe0
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 61 deletions.
diff --git a/src/components/ItemView/ItemView.jsx b/src/components/ItemView/ItemView.jsx
@@ -153,9 +153,9 @@ function ItemView(props) {
 
       <Datasets item={item} appConfig={appConfig} />
 
-      <div className="dataset-container">
-        <MetadataSection item={item} appConfig={appConfig} docid={docid} />
+      <MetadataSection item={item} appConfig={appConfig} docid={docid} />
 
+      <div className="dataset-container">
         <MoreLikeThis docid={docid} title={title?.raw} appConfig={appConfig} />
       </div>
 

diff --git a/src/components/ItemView/MetadataSection.jsx b/src/components/ItemView/MetadataSection.jsx
@@ -15,77 +15,84 @@ const MetadataSection = (props) => {
   const organisations = org.filter((org) => org !== EEA);
 
   return (
-    <div className="metadata-wrapper">
-      <h2>More information</h2>
+    <>
+      <div className="dataset-container metadata-wrapper">
+        <h2>More information</h2>
 
-      {!!rod && (
-        <div className="metadata-section">
-          <h5>Reporting obligations (ROD)</h5>
+        <div className="metadata-list">
+          {!!rod && (
+            <div className="metadata-section">
+              <h5>Reporting obligations (ROD)</h5>
 
-          {Array.isArray(rod?.raw) ? (
-            <>
-              {rod?.raw.map((item, i) => {
+              {Array.isArray(rod?.raw) ? (
+                <>
+                  {rod?.raw.map((item, i) => {
+                    return <div key={i}>{item}</div>;
+                  })}
+                </>
+              ) : (
+                <div>{rod?.raw}</div>
+              )}
+            </div>
+          )}
+
+          {!!organisations && organisations.length > 0 && (
+            <div className="metadata-section">
+              <h5>Organisation:</h5>
+
+              {organisations.map((item, i) => {
                 return <div key={i}>{item}</div>;
               })}
-            </>
-          ) : (
-            <div>{rod?.raw}</div>
+            </div>
           )}
-        </div>
-      )}
 
-      {!!organisations && organisations.length > 0 && (
-        <div className="metadata-section">
-          <h5>Organisation:</h5>
+          {merged_time_coverage_range &&
+            merged_time_coverage_range?.length > 0 && (
+              <div className="metadata-section">
+                <h5>Temporal coverage:</h5>
 
-          {organisations.map((item, i) => {
-            return <div key={i}>{item}</div>;
-          })}
+                {merged_time_coverage_range.map((tc, i) => {
+                  const tc_start = tc.start || '';
+                  const tc_end = tc.end || '';
+                  return (
+                    <React.Fragment key={i}>
+                      <span>
+                        {tc_start === tc_end && tc_start}
+                        {tc_start !== tc_end && tc_start + ' - ' + tc_end}
+                      </span>
+                      {i !== merged_time_coverage_range.length - 1 ? ', ' : ' '}
+                    </React.Fragment>
+                  );
+                })}
+              </div>
+            )}
         </div>
-      )}
-
-      {merged_time_coverage_range && merged_time_coverage_range?.length > 0 && (
-        <div className="metadata-section">
-          <h5>Temporal coverage:</h5>
+      </div>
 
-          {merged_time_coverage_range.map((tc, i) => {
-            const tc_start = tc.start || '';
-            const tc_end = tc.end || '';
-            return (
-              <React.Fragment key={i}>
-                <span>
-                  {tc_start === tc_end && tc_start}
-                  {tc_start !== tc_end && tc_start + ' - ' + tc_end}
-                </span>
-                {i !== merged_time_coverage_range.length - 1 ? ', ' : ' '}
-              </React.Fragment>
-            );
-          })}
+      <div className="dataset-container">
+        <div className="d-link">
+          <Icon className="file pdf" />
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href={`${appConfig.indexBaseUrl}/catalogue/datahub/api/records/${docid}/formatters/xsl-view?output=pdf&language=eng&approved=true`}
+          >
+            Metadata Factsheet
+          </a>
         </div>
-      )}
-
-      <div className="d-link">
-        <Icon className="file pdf" />
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href={`${appConfig.indexBaseUrl}/catalogue/datahub/api/records/${docid}/formatters/xsl-view?output=pdf&language=eng&approved=true`}
-        >
-          Metadata Factsheet
-        </a>
-      </div>
 
-      <div className="d-link">
-        <i className="ri-external-link-line"></i>
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href={`${appConfig.indexBaseUrl}/catalogue/srv/eng/catalog.search#/metadata/${docid}`}
-        >
-          Metadata catalogue
-        </a>
+        <div className="d-link">
+          <i className="ri-external-link-line"></i>
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href={`${appConfig.indexBaseUrl}/catalogue/srv/eng/catalog.search#/metadata/${docid}`}
+          >
+            Metadata catalogue
+          </a>
+        </div>
       </div>
-    </div>
+    </>
   );
 };