fix: card image height changed like bootstrap-italia templates

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

Hide file tree

Showing 11 changed files with 15 additions and 40 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx
@@ -118,7 +118,6 @@ 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,12 +104,7 @@ const InEvidenceTemplate = (props) => {
                 key={index}
               />
             ) : (
-              <Card
-                key={index}
-                className={cx('listing-item card-bg', {
-                  'card-img': index === 0 && image,
-                })}
-              >
+              <Card key={index} className={cx('listing-item card-bg')}>
                 {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,11 +41,7 @@ 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-img': i < 3,
-                    })}
-                  >
+                  <Card className={cx('listing-item card-bg')}>
                     {/* 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,12 +37,7 @@ 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-img': i === 0,
-                  })}
-                >
+                <Card key={i} className={cx('listing-item card-bg')}>
                   {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 card-img" noWrapper={false} tag="div">
+                <Card className="card-bg" 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 className="card-img" noWrapper={false} tag="div">
+              <Card 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
@@ -1,11 +1,8 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 import { UniversalLink } from '@plone/volto/components';
-import { getContent, resetContent } from '@plone/volto/actions';
-import { flattenToAppURL } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { getCalendarDate } from 'design-comuni-plone-theme/helpers';
 import {
@@ -50,7 +47,9 @@ const GenericCard = ({
       )}
     </>
   );
+
   const cooked_image_field = image_field || item.image_field;
+
   // (item.preview_image ? 'preview_image' : 'image');
   const image =
     showimage &&
@@ -64,7 +63,7 @@ const GenericCard = ({
 
   return item ? (
     image ? (
-      <div className={cx('genericcard card card-img shadow rounded mt-3')}>
+      <div className={cx('genericcard card 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,12 +14,6 @@
       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/Blocks/_listing.scss b/src/theme/ItaliaTheme/Blocks/_listing.scss
@@ -1,11 +1,6 @@
 .block.listing {
   .full-width {
     height: unset;
-
-    h2 {
-      @include rem-size(font-size, 32);
-      @include rem-size(line-height, 32);
-    }
   }
 
   .listing-item picture {

diff --git a/src/theme/ItaliaTheme/_main.scss b/src/theme/ItaliaTheme/_main.scss
@@ -51,10 +51,6 @@ 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,6 +53,12 @@
       fill: $gray-secondary;
     }
   }
+  &.rounded {
+    .img-responsive-wrapper {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+  }
 }
 
 a.read-more {