Merge pull request #161 from miropaananen/miropaananen-issues-73-87-1…

…10-fix-summersprint Fix for plone.org issues 73 and 110
plone · Jan 24, 2024 · 91de044 · 91de044
2 parents c0f259d + efaea6c
commit 91de044
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 59 deletions.
diff --git a/frontend/src/components/Blocks/IconsAndText/Edit.jsx b/frontend/src/components/Blocks/IconsAndText/Edit.jsx
@@ -106,11 +106,7 @@ const Edit = (props) => {
           />
         ))}
       </div>
-      <ListingLinkMore
-        linkTitle={data.href_title}
-        linkHref={data.href}
-        buttonClassName="site--button-blue"
-      />
+      <ListingLinkMore linkTitle={data.href_title} linkHref={data.href} buttonClassName="site--button-blue" />
     </>
   );
 

diff --git a/frontend/src/components/Blocks/IconsAndText/Sidebar.jsx b/frontend/src/components/Blocks/IconsAndText/Sidebar.jsx
@@ -1,19 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Segment } from 'semantic-ui-react';
-import {
-  FormattedMessage,
-  useIntl,
-  injectIntl,
-  defineMessages,
-} from 'react-intl';
-import {
-  CheckboxWidget,
-  ObjectListWidget,
-  TextWidget,
-  ObjectBrowserWidget,
-  SelectWidget,
-} from '@plone/volto/components';
+import { FormattedMessage, useIntl, injectIntl, defineMessages } from 'react-intl';
+import { CheckboxWidget, ObjectListWidget, TextWidget, ObjectBrowserWidget, SelectWidget } from '@plone/volto/components';
 
 import { ColorListWidget, AlignWidget } from '@package/components/Widgets';
 
@@ -64,6 +53,10 @@ const messages = defineMessages({
     id: 'icon',
     defaultMessage: 'Icon',
   },
+  mobileStyles: {
+    id: 'mobileStyles',
+    defaultMessage: 'Center column heading on mobile',
+  },
 });
 
 const Sidebar = (props) => {
@@ -74,11 +67,7 @@ const Sidebar = (props) => {
     <Segment.Group raised>
       <header className="header pulled">
         <h2>
-          <FormattedMessage
-            id="IconsAndTextBlock"
-            defaultMessage="Icons and text block"
-          />
-          :
+          <FormattedMessage id="IconsAndTextBlock" defaultMessage="Icons and text block" />:
         </h2>
       </header>
       <Segment className="form">
@@ -93,9 +82,7 @@ const Sidebar = (props) => {
             { name: 'light-grey', label: intl.formatMessage(messages.grey) },
           ]}
           value={data.bg_color ?? 'outline-white'}
-          onChange={(name, value) =>
-            onChangeBlock(block, { ...data, [name]: value })
-          }
+          onChange={(name, value) => onChangeBlock(block, { ...data, [name]: value })}
         />
         <CheckboxWidget
           id="fullWidth"
@@ -114,9 +101,7 @@ const Sidebar = (props) => {
             { name: 'blue', label: intl.formatMessage(messages.blue) },
           ]}
           value={data.title_color ?? 'grey'}
-          onChange={(name, value) =>
-            onChangeBlock(block, { ...data, [name]: value })
-          }
+          onChange={(name, value) => onChangeBlock(block, { ...data, [name]: value })}
         />
 
         <AlignWidget
@@ -162,9 +147,7 @@ const Sidebar = (props) => {
           {...props}
           id="columns"
           value={data?.columns ?? []}
-          onChange={(id, value) =>
-            onChangeBlock(block, { ...data, [id]: value })
-          }
+          onChange={(id, value) => onChangeBlock(block, { ...data, [id]: value })}
           schema={() => {
             const columnsSchema = {
               title: intl.formatMessage(messages.column),
@@ -173,21 +156,13 @@ const Sidebar = (props) => {
                 {
                   id: 'default',
                   title: 'Default',
-                  fields: [
-                    'iconImage',
-                    'iconSize',
-                    'headerTextPosition',
-                    'dividerPosition',
-                    'href',
-                    'href_title',
-                  ],
+                  fields: ['iconImage', 'iconSize', 'headerTextPosition', 'dividerPosition', 'href', 'href_title'],
                 },
               ],
               properties: {
                 iconImage: {
                   title: intl.formatMessage(messages.icon),
-                  description:
-                    'The image must be a PNG or SVG. The maximum recommended size for PNG is 200x200px.',
+                  description: 'The image must be a PNG or SVG. The maximum recommended size for PNG is 200x200px.',
                   widget: 'image_upload_widget',
                   openObjectBrowser: props.openObjectBrowser,
                 },
@@ -229,8 +204,7 @@ const Sidebar = (props) => {
                 },
                 href_title: {
                   title: 'Link title',
-                  description:
-                    'If no title is entered, and a link is selected, the link will be added to the block title.',
+                  description: 'If no title is entered, and a link is selected, the link will be added to the block title.',
                 },
               },
 
@@ -266,6 +240,18 @@ const Sidebar = (props) => {
           }}
         />
       </Segment>
+      <Segment>
+        <label>Mobile Appearance</label>
+
+        <CheckboxWidget
+          id="mobileStyles"
+          title={intl.formatMessage(messages.mobileStyles)}
+          value={data.mobileStyles ? data.mobileStyles : false}
+          onChange={(name, value) => {
+            onChangeBlock(block, { ...data, [name]: value });
+          }}
+        />
+      </Segment>
     </Segment.Group>
   );
 };

diff --git a/frontend/src/components/Blocks/IconsAndText/View.jsx b/frontend/src/components/Blocks/IconsAndText/View.jsx
@@ -18,27 +18,15 @@ const View = ({ data }) => {
       {(data.title || checkHasContent(data.description)) && (
         <div className="block-content-header">
           {data.title && <div className={cx('title')}>{data.title}</div>}
-          {checkHasContent(data.description) && (
-            <div className="description">
-              {redraft(
-                data.description,
-                config.settings.richtextViewSettings.ToHTMLRenderers,
-                config.settings.richtextViewSettings.ToHTMLOptions,
-              )}
-            </div>
-          )}
+          {checkHasContent(data.description) && <div className="description">{redraft(data.description, config.settings.richtextViewSettings.ToHTMLRenderers, config.settings.richtextViewSettings.ToHTMLOptions)}</div>}
         </div>
       )}
       <div className="columns-wrapper">
         {data?.columns?.map((numberBlock, i) => (
           <ViewBlock data={numberBlock} {...data} key={i} />
         ))}
       </div>
-      <ListingLinkMore
-        linkTitle={data.href_title}
-        linkHref={data.href}
-        buttonClassName="site--button-blue"
-      />
+      <ListingLinkMore linkTitle={data.href_title} linkHref={data.href} buttonClassName="site--button-blue" />
     </>
   );
 
@@ -54,6 +42,7 @@ const View = ({ data }) => {
         ['title-' + data.title_color]: data.title_color,
         ['header-align-' + data.header_align]: data.header_align ?? 'center',
         ['columns-' + [ncolumns]]: ncolumns,
+        'mobile-block': data.mobileStyles,
       })}
     >
       {data.fullWidth ? <Container>{content}</Container> : content}

diff --git a/frontend/theme/extras/site/components/blocks/icons_and_text.less b/frontend/theme/extras/site/components/blocks/icons_and_text.less
@@ -311,3 +311,14 @@
     }
   }
 }
+@media (max-width: @largestMobileScreen) {
+  .block-icons-text.mobile-block .column-block {
+    .column-head {
+      display: flex;
+      justify-content: center;
+      .header-text {
+        flex: none;
+      }
+    }
+  }
+}
diff --git a/frontend/theme/globals/site.overrides b/frontend/theme/globals/site.overrides
@@ -7,7 +7,6 @@ h1 {
 h2 {
   color: @headerColor;
   line-height: @h2LineHeight;
-  text-align: center;
 }
 
 h3 {
@@ -72,3 +71,19 @@ h5:last-child {
     font-size: unit((7 / 18), em);
   }
 }
+
+#page-document, #page-edit {
+
+  p a, ul a, ol a {
+    text-decoration:underline;
+    text-underline-position: under;
+    &:hover {
+      text-decoration:none;
+    }
+  }
+}
+#page-edit {
+  p a:hover, ul a:hover, ol a:hover {
+      text-decoration:underline;
+    }
+  }