copyright dont show other than large image, and better alignment on h…

…over
eea · Feb 2, 2023 · ceb1058 · ceb1058
1 parent d195a26
commit ceb1058
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx b/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx
@@ -240,6 +240,9 @@ class Edit extends Component {
       this.props.data.placeholder ||
       this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
     const { copyright, copyrightIcon, copyrightPosition } = data;
+
+    const showCopyright = data?.size === 'l' || !data.size;
+
     return (
       <div
         className={cx(
@@ -251,9 +254,7 @@ class Edit extends Component {
         )}
       >
         <div
-          className={`image-block-container ${
-            data?.align ? data?.align : 'left'
-          }`}
+          className={`image-block-container ${data?.align ? data?.align : ''}`}
         >
           {data.url ? (
             <>
@@ -287,7 +288,7 @@ class Edit extends Component {
                 alt={data.alt || ''}
               />
               <div className={`copyright-image ${copyrightPosition}`}>
-                {copyright ? (
+                {copyright && showCopyright ? (
                   <Copyright copyrightPosition={copyrightPosition}>
                     <Copyright.Icon>
                       <IconSemantic name={copyrightIcon} />

diff --git a/src/customizations/volto/components/manage/Blocks/Image/View.jsx b/src/customizations/volto/components/manage/Blocks/Image/View.jsx
@@ -25,6 +25,8 @@ export const View = ({ data, detached }) => {
 
   const [hovering, setHovering] = React.useState(false);
 
+  const showCopyright = data?.size === 'l' || !data.size;
+
   return (
     <p
       className={cx(
@@ -37,9 +39,7 @@ export const View = ({ data, detached }) => {
       )}
     >
       <div
-        className={`image-block-container ${
-          data?.align ? data?.align : 'left'
-        }`}
+        className={`image-block-container ${data?.align ? data?.align : ''}`}
       >
         {data.url && (
           <>
@@ -89,7 +89,7 @@ export const View = ({ data, detached }) => {
                       copyrightPosition ? copyrightPosition : 'left'
                     }`}
                   >
-                    {copyright ? (
+                    {copyright && showCopyright ? (
                       <Copyright copyrightPosition={copyrightPosition}>
                         <Copyright.Icon>
                           <Icon className={copyrightIcon} />

diff --git a/src/customizations/volto/components/manage/Blocks/Image/style.less b/src/customizations/volto/components/manage/Blocks/Image/style.less
@@ -43,6 +43,7 @@
   img {
     max-width: 100% !important;
     float: none !important;
+    margin-left: 0 !important;
   }
 }
 
@@ -56,17 +57,28 @@
 }
 
 .image-block-container {
-  max-width: 50%;
-  padding-right: 1rem;
+  max-width: 100%;
   position: relative;
 }
 
 .image-block-container.left {
+  max-width: 50%;
+  padding-right: 1rem;
   float: left;
+
+  .copyright-hover-container {
+    width: 92%;
+  }
 }
 
 .image-block-container.right {
+  max-width: 50%;
+  padding-left: 1rem;
   float: right;
+
+  .copyright-hover-container {
+    width: 92%;
+  }
 }
 
 .copyright-hover-container {