decrease size of featured resource pagination (#414)

GeoNode · Aug 11, 2021 · 12d43fd · 12d43fd
1 parent 8fd2bae
commit 12d43fd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/geonode_mapstore_client/client/js/components/FeaturedList/FeaturedList.jsx b/geonode_mapstore_client/client/js/components/FeaturedList/FeaturedList.jsx
@@ -13,6 +13,10 @@ import HTML from '@mapstore/framework/components/I18N/HTML';
 import ResourceCard from '@js/components/ResourceCard';
 import FaIcon from '@js/components/FaIcon';
 import { withResizeDetector } from 'react-resize-detector';
+import {
+    ProcessTypes,
+    ProcessStatus
+} from '@js/utils/ResourceServiceUtils';
 
 const Cards = withResizeDetector(({
     resources,
@@ -48,37 +52,48 @@ const Cards = withResizeDetector(({
             : {
                 width: cardWidth,
                 marginRight: (idx + 1) % count === 0 ? 0 : margin,
-                marginTop: margin
+                marginTop: 8
             };
 
         return gridSpace;
     };
 
     const containerStyle = isSingleCard
         ? {
-            paddingBottom: margin
+            paddingBottom: 0
         }
         : {
             paddingLeft: ulPadding,
-            paddingBottom: margin
+            paddingBottom: 0
         };
     return (
         <ul
             style={containerStyle}
         >
             {resources.map((resource, idx) => {
+
+                const { processes, ...data } = resource;
+                const isProcessing = processes
+                    ? !!processes.find(({ completed }) => !completed)
+                    : false;
+                const deleteProcess = processes && processes.find(({ processType }) => processType === ProcessTypes.DELETE_RESOURCE);
+                const isDeleting = !!deleteProcess?.output?.status;
+                const isDeleted = deleteProcess?.output?.status === ProcessStatus.FINISHED;
                 return (
                     <li
                         key={resource?.pk}
                         style={(gridLayoutSpace(idx))}
                     >
                         <ResourceCard
                             active={isCardActive(resource)}
-                            data={resource}
+                            className={`${isDeleted ? 'deleted' : ''}`}
+                            data={data}
                             formatHref={formatHref}
                             options={options}
                             buildHrefByTemplate={buildHrefByTemplate}
                             layoutCardsStyle="grid"
+                            loading={isProcessing}
+                            readOnly={isDeleted || isDeleting}
                         />
                     </li>
                 );
@@ -105,12 +120,12 @@ const FeaturedList = withResizeDetector(({
 
     const [count, setCount] = useState();
     const nextIconStyles = {
-        fontSize: '2rem',
+        fontSize: '1rem',
         ...(!isNextPageAvailable || loading ? {color: 'grey', cursor: 'not-allowed'} : {cursor: 'pointer'})
     };
 
     const previousIconStyles = {
-        fontSize: '2rem',
+        fontSize: '1rem',
         ...(!isPreviousPageAvailable || loading ? {color: 'grey', cursor: 'not-allowed'} : {cursor: 'pointer'})};
 
     return (

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_card-grid.less b/geonode_mapstore_client/client/themes/geonode/less/_card-grid.less
@@ -78,6 +78,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        padding: 0.5rem;
         button, button:focus {
             color: black;
             background: none;