fix: revert card image height changed like bootstrap-italia templates

RedTurtle · Nov 16, 2023 · d331288 · d331288
1 parent 836258a
commit d331288
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 12 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx
@@ -118,6 +118,7 @@ const CardWithImageTemplate = (props) => {
                 ) : (
                   <Card
                     className={cx('listing-item card-bg', {
+                      'card-img': showImage,
                       'card-teaser-image card-flex no-after':
                         item['@type'] === 'Persona',
                     })}

diff --git a/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/InEvidenceTemplate.jsx
@@ -104,7 +104,12 @@ const InEvidenceTemplate = (props) => {
                 key={index}
               />
             ) : (
-              <Card key={index} className={cx('listing-item card-bg')}>
+              <Card
+                key={index}
+                className={cx('listing-item card-bg', {
+                  'card-img': index === 0 && image,
+                })}
+              >
                 {index === 0 && image && (
                   <div className="img-responsive-wrapper">
                     <div className="img-responsive">

diff --git a/...omponents/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/CardWithImageTemplateSkeleton.jsx b/...omponents/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/CardWithImageTemplateSkeleton.jsx
@@ -41,7 +41,11 @@ const CardWithImageTemplateSkeleton = ({
             {[0, 1, 2, 3, 4, 5].map((i) => {
               return (
                 <Col lg="4" key={i} className="col-item mb-3">
-                  <Card className={cx('listing-item card-bg')}>
+                  <Card
+                    className={cx('listing-item card-bg', {
+                      'card-img': i < 3,
+                    })}
+                  >
                     {/* wrapperClassName="card-overlapping" */}
                     {(i < 3 || always_show_image) && (
                       <div className="img-responsive-wrapper">

diff --git a/src/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/InEvidenceTemplateSkeleton.jsx b/src/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/InEvidenceTemplateSkeleton.jsx
@@ -37,7 +37,12 @@ const InEvidenceTemplateSkeleton = ({
           <div className="in-evidence-cards-wrapper mb-5">
             {[0, 1, 2, 3, 4].map((i) => {
               return (
-                <Card key={i} className={cx('listing-item card-bg')}>
+                <Card
+                  key={i}
+                  className={cx('listing-item card-bg', {
+                    'card-img': i === 0,
+                  })}
+                >
                   {i === 0 && (
                     <div className="img-responsive-wrapper">
                       <div className="img-responsive">

diff --git a/src/components/ItaliaTheme/Blocks/RssBlock/CardWithImageRssTemplate.jsx b/src/components/ItaliaTheme/Blocks/RssBlock/CardWithImageRssTemplate.jsx
@@ -53,7 +53,7 @@ const CardWithImageRssTemplate = ({
           <Row>
             {items.map((item) => (
               <Col lg={3} className="mb-3" key={item['@id']}>
-                <Card className="card-bg" noWrapper={false} tag="div">
+                <Card className="card-bg card-img" noWrapper={false} tag="div">
                   {item.enclosure?.url && (
                     <div className="img-responsive-wrapper">
                       <div className="img-responsive img-responsive-panoramic">

diff --git a/...onents/ItaliaTheme/Blocks/RssBlock/TemplatesSkeleton/CardWithImageRssTemplateSkeleton.jsx b/...onents/ItaliaTheme/Blocks/RssBlock/TemplatesSkeleton/CardWithImageRssTemplateSkeleton.jsx
@@ -25,7 +25,7 @@ const CardWithImageRssTemplateSkeleton = ({ isEditMode, data = {} }) => {
         <Row>
           {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
             <Col lg={3} className="mb-3" key={i}>
-              <Card noWrapper={false} tag="div">
+              <Card className="card-img" noWrapper={false} tag="div">
                 <div className="img-responsive-wrapper">
                   <div className="img-responsive img-responsive-panoramic">
                     <figure className="img-wrapper"></figure>

diff --git a/src/components/ItaliaTheme/View/Commons/GenericCard.jsx b/src/components/ItaliaTheme/View/Commons/GenericCard.jsx
@@ -63,7 +63,7 @@ const GenericCard = ({
 
   return item ? (
     image ? (
-      <div className={cx('genericcard card shadow rounded mt-3')}>
+      <div className={cx('genericcard card card-img shadow rounded mt-3')}>
         <div className="img-responsive-wrapper">
           <div className="img-responsive img-responsive-panoramic">
             <figure className="img-wrapper">{image}</figure>

diff --git a/src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss b/src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss
@@ -14,6 +14,12 @@
       display: inline;
     }
 
+    img.listing-image {
+      max-width: 100%;
+      height: auto;
+      object-position: center;
+    }
+
     .img-responsive-wrapper {
       width: inherit;
       .img-responsive {

diff --git a/src/theme/ItaliaTheme/_main.scss b/src/theme/ItaliaTheme/_main.scss
@@ -51,6 +51,10 @@ a {
   margin-right: unset;
 }
 
+.public-ui .text-secondary {
+  color: $secondary-text !important;
+}
+
 ::selection {
   background-color: default;
 }

diff --git a/src/theme/bootstrap-override/bootstrap-italia/_card.scss b/src/theme/bootstrap-override/bootstrap-italia/_card.scss
@@ -53,12 +53,6 @@
       fill: $gray-secondary;
     }
   }
-  &.rounded {
-    .img-responsive-wrapper {
-      border-top-left-radius: $border-radius;
-      border-top-right-radius: $border-radius;
-    }
-  }
 }
 
 a.read-more {