fix: layout and style issues, customized _avatar.scss to be figma com…

…pliant (#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
RedTurtle · Feb 6, 2025 · be54848 · be54848
1 parent c2f10fb
commit be54848
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 15 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -49,6 +49,9 @@
 - 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à
+
+- ...
 
 ### Fix
 
@@ -59,6 +62,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -140,6 +140,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
@@ -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);
+    }
+  }
+}