Skip to content

Commit

Permalink
fix: BandiInEvidenceTemplate layout to space bando dati when titles h…
Browse files Browse the repository at this point in the history 
…ave different lengths
  • Loading branch information
@sabrina-bongiovanni
sabrina-bongiovanni committed Nov 17, 2023
1 parent 4cd2850 commit 3c29edc
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 104 deletions.
214 changes: 110 additions & 104 deletions src/components/ItaliaTheme/Blocks/Listing/BandiInEvidenceTemplate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/theme/ItaliaTheme/Blocks/_bandiInEvidenceTemplate.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
flex-direction: column;
padding: 2.5rem;
padding-bottom: 0rem;
justify-content: space-between;
}
}

Expand Down

0 comments on commit 3c29edc

Please sign in to comment.