From 520626517ffbd52ce88b65f13fe2768ce7381fd2 Mon Sep 17 00:00:00 2001
From: Martina Bustacchini <41484878+deodorhunter@users.noreply.github.com>
Date: Fri, 13 Oct 2023 15:51:07 +0200
Subject: [PATCH] fix: styling and visual issues in CartellaModulisticaView on
 desktop and mobile (#366)

Co-authored-by: Piero Nicolli <pnicolli@users.noreply.github.com>
---
 RELEASE.md                                    |  2 +
 .../View/CartellaModulisticaView/DocRow.jsx   |  6 ++-
 .../Views/_cartellaModulistica.scss           | 52 +++++++++++++++----
 3 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/RELEASE.md b/RELEASE.md
index 56194c165..9fe905240 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -41,6 +41,7 @@
 - ...
 -->
 
+
 ## Versione X.X.X (dd/mm/yyyy)
 
 ### Migliorie
@@ -53,6 +54,7 @@
 - Non mostrare la fascia colorata del footer di un sottosito quando questo non è compilato
 - Risolto un bug nel componente Object Browser che permetteva di selezionare più elementi di quelli consentiti
 - Alcune icone mancanti nel widget icone fontawesome sono state rese nuovamente visibili
+- Sistemate inconsistenze nella visualizzazione di alcuni tipi di elementi della lista degli allegati in Cartella Modulistica
 
 ## Versione 8.7.8 (12/10/2023)
 
diff --git a/src/components/ItaliaTheme/View/CartellaModulisticaView/DocRow.jsx b/src/components/ItaliaTheme/View/CartellaModulisticaView/DocRow.jsx
index 9c8f6d028..575d2ce60 100644
--- a/src/components/ItaliaTheme/View/CartellaModulisticaView/DocRow.jsx
+++ b/src/components/ItaliaTheme/View/CartellaModulisticaView/DocRow.jsx
@@ -81,7 +81,11 @@ const DocRow = ({ doc }) => {
 
       {/*Single file*/}
       {doc.items?.length === 1 && (
-        <div className="doc">
+        <div
+          className={cx('doc', {
+            'link-to-doc': doc.items[0]?.['@type'] === 'Link',
+          })}
+        >
           {titleWrapper}
           {doc.items?.length === 1 && (
             <Downloads item={doc.items[0]} titleDoc={doc.title} />
diff --git a/src/theme/ItaliaTheme/Views/_cartellaModulistica.scss b/src/theme/ItaliaTheme/Views/_cartellaModulistica.scss
index ae8ab6d11..2856195b3 100644
--- a/src/theme/ItaliaTheme/Views/_cartellaModulistica.scss
+++ b/src/theme/ItaliaTheme/Views/_cartellaModulistica.scss
@@ -46,13 +46,10 @@ $docs-section-margin: 3em;
           align-items: center;
           justify-content: space-between;
           padding: 0.4em 0;
-
+          gap: 4rem;
           .title-wrap {
             flex: 1;
 
-            &.single-row {
-              max-width: 70%;
-            }
             .title {
               font-size: 1.2em;
               font-weight: 500;
@@ -88,13 +85,25 @@ $docs-section-margin: 3em;
 
           a.modulistica-link {
             display: flex;
-            width: 100%;
+            position: relative;
             align-items: center;
             justify-content: space-between;
-
-            svg {
-              width: 2em;
-              font-size: 1.2em;
+            height: fit-content;
+            flex-shrink: 0;
+
+            svg.icon.fa-icon {
+              width: 1.6rem;
+              height: 1.6rem;
+              font-size: 1.3rem;
+              order: 2;
+              margin-right: 1.15rem;
+              margin-left: 0.25rem;
+            }
+            svg.external-link {
+              order: 1;
+              right: 0;
+              top: -2px;
+              position: absolute;
             }
           }
         }
@@ -169,16 +178,37 @@ $docs-section-margin: 3em;
         .doc-row {
           .doc {
             flex-wrap: wrap;
-            align-items: unset;
+            align-items: center;
             justify-content: unset;
+            gap: 2rem;
+            &.link-to-doc {
+              align-items: unset;
+              gap: 0.5rem;
+              .title-wrap,
+              a.modulistica-link {
+                flex-basis: 100%;
+                svg.icon.fa-icon {
+                  margin-left: 0;
+                  margin-right: 1.25rem;
+                }
+              }
+            }
             .title-wrap {
               &.single-row {
                 max-width: none;
               }
             }
+
+            &.modulo {
+              justify-content: space-between;
+              .title,
+              .downloads {
+                flex-basis: unset;
+              }
+            }
             .title,
             .downloads {
-              flex: 1 1 100%;
+              flex: 1 1 unset;
               justify-content: flex-end;
 
               a {