fix: use html tags instead of semantic ui components and remove the c…

…oloring
plone · Sep 26, 2024 · de18708 · de18708
1 parent 8f07a4c
commit de18708
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 35 deletions.
diff --git a/packages/volto/src/components/manage/Blocks/Listing/SummaryTemplate.jsx b/packages/volto/src/components/manage/Blocks/Listing/SummaryTemplate.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ConditionalLink, Component } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { List } from 'semantic-ui-react';
 
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
@@ -23,9 +22,9 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
   return (
     <>
       <div className="items">
-        <List role="list">
+        <ul className="ui list summary-listing">
           {items.map((item) => (
-            <List.Item key={item['@id']}>
+            <li key={item['@id']}>
               <div
                 className={`listing-item ${
                   item.review_state ? `state-${item.review_state}` : ''
@@ -35,16 +34,16 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
                 <ConditionalLink item={item} condition={!isEditMode}>
                   <Component componentName="PreviewImage" item={item} alt="" />
                   <div className="listing-body">
-                    <List.Header className="summary-listing-item-header">
+                    <div className="listing-item-header">
                       {item.title ? item.title : item.id}
-                    </List.Header>
-                    <p>{item.description}</p>
+                    </div>
+                    {item.description && <p>{item.description}</p>}
                   </div>
                 </ConditionalLink>
               </div>
-            </List.Item>
+            </li>
           ))}
-        </List>
+        </ul>
       </div>
 
       {link && <div className="footer">{link}</div>}

diff --git a/packages/volto/theme/themes/pastanaga/elements/list.overrides b/packages/volto/theme/themes/pastanaga/elements/list.overrides
@@ -42,33 +42,17 @@
   }
 }
 
-#main {
-  .ui.list > .item {
-    .header.summary-listing-item-header {
-      &:extend(h3);
-    }
+#main .items .ui.list.summary-listing {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
 
-    // Apply different colors based on the state-x class
-    .listing-item {
-      &.state-published .header.summary-listing-item-header,
-      &.state-publish .header.summary-listing-item-header {
-        color: @itemPublishedColor; // Published and publish state color
-      }
-
-      &.state-private .header.summary-listing-item-header,
-      &.state-send_back .header.summary-listing-item-header,
-      &.state-retract .header.summary-listing-item-header,
-      &.state-reject .header.summary-listing-item-header {
-        color: @itemPrivateColor; // Private, send_back, retract, reject state color
-      }
-
-      &.state-pending .header.summary-listing-item-header {
-        color: @itemPendingColor; // Pending state color
-      }
-
-      &.state-submit .header.summary-listing-item-header {
-        color: @itemSubmitColor; // Submit state color
-      }
-    }
+  li::before {
+    content: none;
   }
 }
+
+#main .items .ui.list.summary-listing .listing-item-header {
+  &:extend(h3 all);
+  color: @linkColor;
+}