From 219926279567ac28ecd1fde265a59d32d1afe5c1 Mon Sep 17 00:00:00 2001
From: Martina Bustacchini <41484878+deodorhunter@users.noreply.github.com>
Date: Thu, 6 Feb 2025 13:08:20 +0100
Subject: [PATCH] fix: layout and style issues, customized _avatar.scss to be
 figma compliant (#876)

* wip: fix card with avatar

* fix: layout and style issues, customized bootstrap-italia/_avatar.scss due to nonsense scaling for avatar-lg sizes, figma compliant

* fix: review fixes
---
 RELEASE.md                                    |  5 ++++
 .../ItaliaTheme/View/Commons/LocationItem.jsx | 19 +++++++------
 .../ItaliaTheme/View/Commons/OfficeCard.jsx   |  2 +-
 .../ItaliaTheme/View/Commons/VenuesSmall.jsx  | 12 ++++----
 .../Components/_cardLocationItem.scss         | 12 ++++++++
 .../_bootstrap-italia-site.scss               |  1 +
 .../bootstrap-italia/_avatar.scss             | 28 +++++++++++++++++++
 7 files changed, 64 insertions(+), 15 deletions(-)
 create mode 100644 src/theme/bootstrap-override/bootstrap-italia/_avatar.scss

diff --git a/RELEASE.md b/RELEASE.md
index f339655fe..bf50c5873 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -49,6 +49,10 @@
 - Impostando degli heading all'interno delle sezioni di testo nei vari CT, gli stili sono ora coerenti con l'ordine corretto dei titoli utilizzati.
 - La sezione contatti del CT Evento è stata riorganizzata per una maggiore chiarezza e coerenza.
 
+### Novità
+
+- ...
+
 ### Fix
 
 - I bottoni del menu nel pannello di controllo dei cookies visualizzano correttamente le icone.
@@ -57,6 +61,7 @@
 - Sistemata la visualizzazione del blocco griglia su mobile: disposti verticalmente ogni blocco della griglia
 - Sistemata la visualizzazione delle card con immagine in cui il contenuto rappresentato non ha un'immagine da mostrare.
 - a11y - Migliorata l'accessibilità in modifica dei blocchi Contatti, Icone, Numeri.
+- Sistemati alcuni problemi di visualizzazione delle card con avatar.
 
 ## Versione 11.26.3 (15/01/2025)
 
diff --git a/src/components/ItaliaTheme/View/Commons/LocationItem.jsx b/src/components/ItaliaTheme/View/Commons/LocationItem.jsx
index b1c11cb1a..a63ecaccd 100644
--- a/src/components/ItaliaTheme/View/Commons/LocationItem.jsx
+++ b/src/components/ItaliaTheme/View/Commons/LocationItem.jsx
@@ -42,24 +42,25 @@ const LocationItem = ({
 }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const showImage = contentHasImage(location);
+  const showImage = contentHasImage(location) && location['@type'] === 'Venue';
   const address = ['street', 'city', 'zip_code']
     .map((key) => location?.[key])
     .filter(Boolean)
     .join(' - ');
 
   return location ? (
-    <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune p-4 rounded location-item">
-      {show_icon && (
-        <Icon
-          icon={'it-pin'}
-          title={intl.formatMessage(messages.icona_luoghi)}
-        />
-      )}
+    <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune pt-4 pb-4 ps-3 pe-4 rounded location-item">
       <div className="card-body">
         <div className="card-title h5 venue-card-title">
           {(location.nome_sede || location.title) && (
             <>
+              {show_icon && (
+                <Icon
+                  icon={'it-pin'}
+                  title={intl.formatMessage(messages.icona_luoghi)}
+                  className="pin-icon"
+                />
+              )}
               {location['@type'] === 'Venue' ||
               (location['@type'] === 'UnitaOrganizzativa' &&
                 show_title_link) ? (
@@ -106,7 +107,7 @@ const LocationItem = ({
         </div>
       </div>
       {showImage && (
-        <div className="avatar size-xl">
+        <div className="avatar size-lg">
           <Image item={location} sizes="80px" loading="lazy" />
         </div>
       )}
diff --git a/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx b/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx
index 1e7e65e50..68314d9b5 100644
--- a/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx
+++ b/src/components/ItaliaTheme/View/Commons/OfficeCard.jsx
@@ -75,7 +75,7 @@ const OfficeCard = ({
         {children && <div className="card-text">{children}</div>}
       </div>
       {showImage && (
-        <div className="image-container">
+        <div className="avatar size-lg">
           <Image item={office} sizes="80px" loading="lazy" />
         </div>
       )}
diff --git a/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx b/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx
index a856ff00f..23c9f92fa 100644
--- a/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx
+++ b/src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx
@@ -30,10 +30,12 @@ const Location = ({ location, show_icon }) => {
   const showImage = contentHasImage(location);
   return (
     location && (
-      <div className="card card-teaser shadow border-left-card mt-3 rounded location-item">
-        {show_icon && <Icon icon={'it-pin'} />}
+      <div className="card card-teaser shadow border-left-card mt-3 card-small rounded location-item">
         <div className="card-body">
-          <div className="card-title h5">{location.title}</div>
+          <div className="card-title h5">
+            {show_icon && <Icon icon={'it-pin'} />}
+            {location.title}
+          </div>
           <div className="card-text">
             {(location.street || location.zip_code) && (
               <p>
@@ -53,7 +55,7 @@ const Location = ({ location, show_icon }) => {
           </div>
         </div>
         {showImage && (
-          <div className="avatar size-xl">
+          <div className="avatar size-lg">
             <Image item={location} loading="lazy" sizes="80px" />
           </div>
         )}
@@ -70,7 +72,7 @@ const Location = ({ location, show_icon }) => {
  */
 const VenuesSmall = ({ venues, show_icon }) => {
   return venues ? (
-    <div className="card-wrapper card-teaser-wrapper">
+    <div className="card-wrapper card-teaser-wrapper align-items-stretch">
       {venues.map((item) => (
         <Location key={item['@id']} location={item} show_icon={show_icon} />
       ))}
diff --git a/src/theme/ItaliaTheme/Components/_cardLocationItem.scss b/src/theme/ItaliaTheme/Components/_cardLocationItem.scss
index f8279a491..7296fcd6f 100644
--- a/src/theme/ItaliaTheme/Components/_cardLocationItem.scss
+++ b/src/theme/ItaliaTheme/Components/_cardLocationItem.scss
@@ -3,3 +3,15 @@
     flex: 0 0 100%;
   }
 }
+
+.card-wrapper.card-teaser-wrapper .card-teaser.location-item .pin-icon {
+  margin-left: -0.5rem;
+  margin-right: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+// Full width for last odd card in locations
+.card-wrapper.card-teaser-wrapper
+  .card-teaser.location-item:nth-child(odd):last-child {
+  flex: 0 0 100%;
+}
diff --git a/src/theme/bootstrap-override/_bootstrap-italia-site.scss b/src/theme/bootstrap-override/_bootstrap-italia-site.scss
index e1717280a..fd660d8e1 100644
--- a/src/theme/bootstrap-override/_bootstrap-italia-site.scss
+++ b/src/theme/bootstrap-override/_bootstrap-italia-site.scss
@@ -141,6 +141,7 @@
   @import 'bootstrap-italia/src/scss/custom/dialog';
   @import 'bootstrap-italia/src/scss/custom/notifications';
   @import 'bootstrap-italia/src/scss/custom/avatar';
+  @import './bootstrap-italia/avatar';
   @import 'bootstrap-italia/src/scss/custom/thumbnav';
   @import 'bootstrap-italia/src/scss/custom/steppers';
   @import './bootstrap-italia/steppers';
diff --git a/src/theme/bootstrap-override/bootstrap-italia/_avatar.scss b/src/theme/bootstrap-override/bootstrap-italia/_avatar.scss
new file mode 100644
index 000000000..f7b40096f
--- /dev/null
+++ b/src/theme/bootstrap-override/bootstrap-italia/_avatar.scss
@@ -0,0 +1,28 @@
+// @import 'bootstrap-italia/src/scss/variables';
+@use 'sass:math';
+// $avatar-base-size: 8px;
+
+.avatar {
+  &.size-lg {
+    //  Dal figma, sti tondi sono 64x64
+    width: $avatar-base-size * 8;
+    height: $avatar-base-size * 8;
+    p {
+      font-size: 24px;
+    }
+    .icon {
+      height: 28px;
+      width: 28px;
+    }
+    .avatar-presence,
+    .avatar-status {
+      right: 2px;
+      width: 14px;
+      height: 14px;
+    }
+
+    .avatar-status {
+      top: math.div($avatar-base-size, 28);
+    }
+  }
+}