From 3c29edc1712e5bd29e3284ac1537015aa24df8df Mon Sep 17 00:00:00 2001
From: Sabrina Bongiovanni <sabrina.bongiovanni@redturtle.it>
Date: Fri, 17 Nov 2023 17:09:44 +0100
Subject: [PATCH] fix: BandiInEvidenceTemplate layout to space bando dati when
 titles have different lengths

---
 .../Listing/BandiInEvidenceTemplate.jsx       | 214 +++++++++---------
 .../Blocks/_bandiInEvidenceTemplate.scss      |   1 +
 2 files changed, 111 insertions(+), 104 deletions(-)

diff --git a/src/components/ItaliaTheme/Blocks/Listing/BandiInEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/BandiInEvidenceTemplate.jsx
index 0cb3f1148..4ed98b6d7 100644
--- a/src/components/ItaliaTheme/Blocks/Listing/BandiInEvidenceTemplate.jsx
+++ b/src/components/ItaliaTheme/Blocks/Listing/BandiInEvidenceTemplate.jsx
@@ -103,126 +103,132 @@ const BandiInEvidenceTemplate = ({
                   {show_description && listingText && (
                     <div className="bando-description">{listingText}</div>
                   )}
-
-                  <div className="bando-dati mb-2">
-                    {/* Ente */}
-                    {show_ente && item.ente_bando?.length > 0 && (
-                      <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
-                        <div className="bando-dati-label me-2">
-                          {intl.formatMessage(messages.ente)}:
-                        </div>
-                        <span className="bando-dati-date">
-                          {item.ente_bando.map((ente, i) => (
-                            <span>
-                              {ente}
-                              {i < item.ente_bando.length - 1 ? ', ' : ''}
-                            </span>
-                          ))}
-                        </span>
-                      </span>
-                    )}
-
-                    {/* Tipologia */}
-                    {show_tipologia && item?.tipologia_bando && (
-                      <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
-                        <div className="bando-dati-label me-2">
-                          {intl.formatMessage(messages.tipologia)}:
-                        </div>
-                        <span className="bando-dati-date">
-                          {item.tipologia_bando}
+                  <div className="bando-lower-section">
+                    <div className="bando-dati mb-2">
+                      {/* Ente */}
+                      {show_ente && item.ente_bando?.length > 0 && (
+                        <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
+                          <div className="bando-dati-label me-2">
+                            {intl.formatMessage(messages.ente)}:
+                          </div>
+                          <span className="bando-dati-date">
+                            {item.ente_bando.map((ente, i) => (
+                              <span>
+                                {ente}
+                                {i < item.ente_bando.length - 1 ? ', ' : ''}
+                              </span>
+                            ))}
+                          </span>
                         </span>
-                      </span>
-                    )}
+                      )}
 
-                    {/* Pubblicazione */}
-                    {item.effective && (
-                      <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
-                        <div className="bando-dati-label me-2">
-                          {intl.formatMessage(messages.pubblicazione)}:
-                        </div>
-                        <span className="bando-dati-date">
-                          {viewDate(intl.locale, item.effective, 'DD-MM-YYYY')}
+                      {/* Tipologia */}
+                      {show_tipologia && item?.tipologia_bando && (
+                        <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
+                          <div className="bando-dati-label me-2">
+                            {intl.formatMessage(messages.tipologia)}:
+                          </div>
+                          <span className="bando-dati-date">
+                            {item.tipologia_bando}
+                          </span>
                         </span>
-                      </span>
-                    )}
+                      )}
 
-                    {/* Scadenza */}
-                    {item.scadenza_bando && (
-                      <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
-                        <div className="bando-dati-label me-2">
-                          {intl.formatMessage(messages.scadenza)}:
-                        </div>
-                        <span className="bando-dati-date">
-                          {item.scadenza_bando &&
-                            viewDate(
+                      {/* Pubblicazione */}
+                      {item.effective && (
+                        <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
+                          <div className="bando-dati-label me-2">
+                            {intl.formatMessage(messages.pubblicazione)}:
+                          </div>
+                          <span className="bando-dati-date">
+                            {viewDate(
                               intl.locale,
-                              item.scadenza_bando,
+                              item.effective,
                               'DD-MM-YYYY',
                             )}
+                          </span>
                         </span>
-                      </span>
-                    )}
+                      )}
 
-                    {/* Chiusura procedimento */}
-                    {item.chiusura_procedimento_bando && (
-                      <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
-                        <div className="bando-dati-label me-2">
-                          {intl.formatMessage(messages.chiusura_procedimento)}:
-                        </div>
-                        <span className="bando-dati-date">
-                          {item.chiusura_procedimento_bando &&
-                            viewDate(
-                              intl.locale,
-                              item.chiusura_procedimento_bando,
-                              'DD-MM-YYYY',
-                            )}
+                      {/* Scadenza */}
+                      {item.scadenza_bando && (
+                        <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
+                          <div className="bando-dati-label me-2">
+                            {intl.formatMessage(messages.scadenza)}:
+                          </div>
+                          <span className="bando-dati-date">
+                            {item.scadenza_bando &&
+                              viewDate(
+                                intl.locale,
+                                item.scadenza_bando,
+                                'DD-MM-YYYY',
+                              )}
+                          </span>
                         </span>
-                      </span>
-                    )}
-
-                    {/* Stato */}
-                    {item?.bando_state?.length > 0 && (
-                      <span className="d-flex align-items-baseline bando-dati-info">
-                        <div className="bando-dati-label me-3">
-                          {intl.formatMessage(messages.stato)}:
-                        </div>
+                      )}
 
-                        <span className="bando-dati-date">
-                          <div
-                            className={cx('bando-state', {
-                              open: item.bando_state?.includes('open'),
-                              closed: item.bando_state?.includes('closed'),
-                              scheduled: item.bando_state?.includes(
-                                'scheduled',
-                              ),
-                              'in-progress': item.bando_state?.includes(
-                                'inProgress',
-                              ),
-                            })}
-                          >
-                            <BandoStatus content={item} />
+                      {/* Chiusura procedimento */}
+                      {item.chiusura_procedimento_bando && (
+                        <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
+                          <div className="bando-dati-label me-2">
+                            {intl.formatMessage(messages.chiusura_procedimento)}
+                            :
                           </div>
+                          <span className="bando-dati-date">
+                            {item.chiusura_procedimento_bando &&
+                              viewDate(
+                                intl.locale,
+                                item.chiusura_procedimento_bando,
+                                'DD-MM-YYYY',
+                              )}
+                          </span>
                         </span>
-                      </span>
-                    )}
+                      )}
 
-                    {/* Note aggiornamenti */}
-                    {item.update_note &&
-                      (item.bando_state?.includes('open') ||
-                        item.bando_state?.includes('inProgress')) && (
-                        <span className="d-flex bando-note">
-                          <strong>{item.update_note}</strong>
+                      {/* Stato */}
+                      {item?.bando_state?.length > 0 && (
+                        <span className="d-flex align-items-baseline bando-dati-info">
+                          <div className="bando-dati-label me-3">
+                            {intl.formatMessage(messages.stato)}:
+                          </div>
+
+                          <span className="bando-dati-date">
+                            <div
+                              className={cx('bando-state', {
+                                open: item.bando_state?.includes('open'),
+                                closed: item.bando_state?.includes('closed'),
+                                scheduled: item.bando_state?.includes(
+                                  'scheduled',
+                                ),
+                                'in-progress': item.bando_state?.includes(
+                                  'inProgress',
+                                ),
+                              })}
+                            >
+                              <BandoStatus content={item} />
+                            </div>
+                          </span>
                         </span>
                       )}
-                  </div>
-                  <div className="read-more">
-                    <CardReadMore
-                      iconName="it-arrow-right"
-                      tag={UniversalLink}
-                      item={!isEditMode ? item : null}
-                      href={isEditMode ? '#' : null}
-                      text={intl.formatMessage(messages.vedi)}
-                    />
+
+                      {/* Note aggiornamenti */}
+                      {item.update_note &&
+                        (item.bando_state?.includes('open') ||
+                          item.bando_state?.includes('inProgress')) && (
+                          <span className="d-flex bando-note">
+                            <strong>{item.update_note}</strong>
+                          </span>
+                        )}
+                    </div>
+                    <div className="read-more">
+                      <CardReadMore
+                        iconName="it-arrow-right"
+                        tag={UniversalLink}
+                        item={!isEditMode ? item : null}
+                        href={isEditMode ? '#' : null}
+                        text={intl.formatMessage(messages.vedi)}
+                      />
+                    </div>
                   </div>
                 </CardBody>
               </Card>
diff --git a/src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss b/src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss
index d30e554b2..446b53500 100644
--- a/src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss
+++ b/src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss
@@ -20,6 +20,7 @@
       flex-direction: column;
       padding: 2.5rem;
       padding-bottom: 0rem;
+      justify-content: space-between;
     }
   }