fix: layout and style issues, customized bootstrap-italia/_avatar.scs…

…s due to nonsense scaling for avatar-lg sizes, figma compliant

RELEASE.md

@@ -49,7 +49,6 @@
 - Nei blocchi elenco, gli stili dei testi nelle card che richiamano un CT persona sono conformi alle card che rappresentano gli altri CT.
 - Impostando degli heading all'interno delle sezioni di testo nei vari CT, gli stili sono ora coerenti con l'ordine corretto dei titoli utilizzati.
 
-
 ### Novità
 
 - ...
@@ -58,7 +57,7 @@
 
 - I bottoni del menu nel pannello di controllo dei cookies visualizzano correttamente le icone.
 - Gli argomenti nelle card con immagine sono allineati correttamente.
-
+- Sistemati alcuni problemi di visualizzazione delle card con avatar.
 
 ## Versione 11.26.3 (15/01/2025)
 

src/components/ItaliaTheme/View/Commons/LocationItem.jsx

@@ -105,7 +105,9 @@ const LocationItem = ({
           )}
         </div>
       </div>
-      {image && <div className="avatar size-lg">{image}</div>}
+      {image && location['@type'] === 'Venue' && (
+        <div className="avatar size-lg">{image}</div>
+      )}
     </div>
   ) : (
     ''

src/components/ItaliaTheme/View/Commons/OfficeCard.jsx

@@ -74,7 +74,7 @@ const OfficeCard = ({
 
         {children && <div className="card-text">{children}</div>}
       </div>
-      {image && <div className="image-container">{image}</div>}
+      {image && <div className="avatar size-lg">{image}</div>}
     </div>
   );
 };

src/components/ItaliaTheme/View/Commons/VenuesSmall.jsx

@@ -29,10 +29,12 @@ const Location = ({ location, show_icon }) => {
   const image = Image({ item: location, loading: 'lazy', sizes: '80px' });
   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>
@@ -51,7 +53,7 @@ const Location = ({ location, show_icon }) => {
             </p>
           </div>
         </div>
-        {image && <div className="avatar size-xl">{image}</div>}
+        {image && <div className="avatar size-lg">{image}</div>}
       </div>
     )
   );
@@ -65,7 +67,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} />
       ))}

src/theme/ItaliaTheme/Components/_cardLocationItem.scss

@@ -9,3 +9,9 @@
   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%;
+}

src/theme/bootstrap-override/bootstrap-italia/_avatar.scss

@@ -4,8 +4,9 @@
 
 .avatar {
   &.size-lg {
-    width: $avatar-base-size * 7;
-    height: $avatar-base-size * 7;
+    //  Dal figma, sti tondi sono 64x64
+    width: $avatar-base-size * 8;
+    height: $avatar-base-size * 8;
     p {
       font-size: 24px;
     }