fix: styling and visual issues in CartellaModulisticaView on desktop …

…and mobile (#366) Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Oct 13, 2023 · 5206265 · 5206265
1 parent fcd942c
commit 5206265
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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 {