Skip to content

Commit

Permalink
Updates to improve templates customizations (#1871)
Browse files Browse the repository at this point in the history 
* updates to improve templates customizations

* review delete redirect
  • Loading branch information
@allyoucanmap
allyoucanmap authored Oct 1, 2024
1 parent 035fcdc commit 6533619
Show file tree
Hide file tree
Showing 21 changed files with 287 additions and 332 deletions.
172 changes: 51 additions & 121 deletions geonode_mapstore_client/client/js/components/CardGrid/CardGrid.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,14 @@ import Spinner from '@js/components/Spinner';
import HTML from '@mapstore/framework/components/I18N/HTML';
import FaIcon from '@js/components/FaIcon';
import ResourceCard from '@js/components/ResourceCard';
import {withResizeDetector} from 'react-resize-detector';
import useInfiniteScroll from '@js/hooks/useInfiniteScroll';
import {getResourceStatuses} from '@js/utils/ResourceUtils';
import MainLoader from '@js/components/MainLoader';

const Cards = withResizeDetector(({
const Cards = ({
resources,
formatHref,
isCardActive,
containerWidth,
width: detectedWidth,
buildHrefByTemplate,
options,
downloading,
Expand All @@ -30,70 +27,17 @@ const Cards = withResizeDetector(({
children
}) => {

const width = containerWidth || detectedWidth;
const margin = 24;
const size = 320;
const count = Math.floor(width / (size + margin));
const cardWidth = width >= size + margin * 2
? Math.floor((width - margin * count) / count)
: '100%';

const ulPadding = Math.floor(margin / 2);
const isSingleCard = count === 0 || count === 1;

const gridLayoutSpace = (idx) => {
return isSingleCard
? {
width: width - margin,
margin: ulPadding
}
: {
width: cardWidth,
marginRight: (idx + 1) % count === 0 ? 0 : margin,
marginTop: margin
};
};

const listLayoutSpace = {
width: '100%',
margin: ulPadding / 2
};


const layoutSpace = (idx) => {
let cardContainerSpace;
switch (cardLayoutStyle) {
case 'list':
cardContainerSpace = listLayoutSpace;
break;
default:
cardContainerSpace = gridLayoutSpace(idx);
}
return cardContainerSpace;
};

const containerStyle = isSingleCard
? {
paddingBottom: margin
}
: {
paddingLeft: ulPadding,
paddingBottom: margin
};
return (
<ul
className={'gn-card-list'}
style={{...(cardLayoutStyle === 'list' ? {} : containerStyle)}}
className={`gn-card-list gn-cards-type-${cardLayoutStyle}`}
>
{resources.map((resource, idx) => {
{resources.map((resource) => {
const { isProcessing } = getResourceStatuses(resource);
// enable allowedOptions (menu cards)
const allowedOptions = !isProcessing ? options : [];

return (
<li
key={resource.pk2 || resource.pk} // pk2 exists on clones to avoid duplicate keys
style={(layoutSpace(idx))}
>
<ResourceCard
active={isCardActive(resource)}
Expand All @@ -113,7 +57,7 @@ const Cards = withResizeDetector(({
{children}
</ul>
);
});
};

const InfiniteScrollCardGrid = ({
resources,
Expand Down Expand Up @@ -147,37 +91,30 @@ const InfiniteScrollCardGrid = ({

return (
<div className="gn-card-grid">
<div style={{
display: 'flex',
width: '100%'
}}>
<div style={{ flex: 1, width: '100%' }}>
<div className="gn-card-grid-container" style={containerStyle}>
{header}
{children}
{messageId && <div className="gn-card-grid-message">
<h1><HTML msgId={`gnhome.${messageId}Title`}/></h1>
<p>
<HTML msgId={`gnhome.${messageId}Content`}/>
</p>
</div>}
<Cards
resources={resources}
formatHref={formatHref}
getDetailHref={getDetailHref}
isCardActive={isCardActive}
options={cardOptions}
buildHrefByTemplate={buildHrefByTemplate}
downloading={downloading}
cardLayoutStyle={cardLayoutStyle}
/>
<div className="gn-card-grid-pagination">
{loading && <Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>}
{hasResources && !isNextPageAvailable && !loading && <FaIcon name="dot-circle-o" />}
</div>
</div>
<div className="gn-card-grid-container" style={containerStyle}>
{header}
{children}
{messageId && <div className="gn-card-grid-message">
<h1><HTML msgId={`gnhome.${messageId}Title`}/></h1>
<p>
<HTML msgId={`gnhome.${messageId}Content`}/>
</p>
</div>}
<Cards
resources={resources}
formatHref={formatHref}
getDetailHref={getDetailHref}
isCardActive={isCardActive}
options={cardOptions}
buildHrefByTemplate={buildHrefByTemplate}
downloading={downloading}
cardLayoutStyle={cardLayoutStyle}
/>
<div className="gn-card-grid-pagination">
{loading && <Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>}
{hasResources && !isNextPageAvailable && !loading && <FaIcon name="dot-circle-o" />}
</div>
</div>
</div>
Expand All @@ -203,36 +140,29 @@ const FixedCardGrid = ({
}) => {
return (
<div className="gn-card-grid">
<div style={{
display: 'flex',
width: '100%'
}}>
<div style={{ flex: 1, width: '100%' }}>
<div className="gn-card-grid-container" style={containerStyle}>
{header}
{children}
{messageId && <div className="gn-card-grid-message">
<h1><HTML msgId={`gnhome.${messageId}Title`}/></h1>
<p>
<HTML msgId={`gnhome.${messageId}Content`}/>
</p>
</div>}
<Cards
resources={resources}
formatHref={formatHref}
getDetailHref={getDetailHref}
isCardActive={isCardActive}
options={cardOptions}
buildHrefByTemplate={buildHrefByTemplate}
downloading={downloading}
onSelect={onSelect}
cardLayoutStyle={cardLayoutStyle}
>
{loading && resources.length > 0 ? <MainLoader className="gn-cards-loader"/> : null}
</Cards>
{footer}
</div>
</div>
<div className="gn-card-grid-container" style={containerStyle}>
{header}
{children}
{messageId && <div className="gn-card-grid-message">
<h1><HTML msgId={`gnhome.${messageId}Title`}/></h1>
<p>
<HTML msgId={`gnhome.${messageId}Content`}/>
</p>
</div>}
<Cards
resources={resources}
formatHref={formatHref}
getDetailHref={getDetailHref}
isCardActive={isCardActive}
options={cardOptions}
buildHrefByTemplate={buildHrefByTemplate}
downloading={downloading}
onSelect={onSelect}
cardLayoutStyle={cardLayoutStyle}
>
{loading && resources.length > 0 ? <MainLoader className="gn-cards-loader"/> : null}
</Cards>
{footer}
</div>
</div>
);
Expand Down
55 changes: 6 additions & 49 deletions geonode_mapstore_client/client/js/components/FeaturedList/Cards.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,72 +6,29 @@
* LICENSE file in the root directory of this source tree.
*/

import React, { useEffect } from 'react';
import React from 'react';
import ResourceCard from '@js/components/ResourceCard';
import { withResizeDetector } from 'react-resize-detector';
import { getResourceStatuses } from '@js/utils/ResourceUtils';

const Cards = ({
resources,
formatHref,
isCardActive,
buildHrefByTemplate,
containerWidth,
width: detectedWidth,
options,
onResize,
downloading,
getDetailHref
}) => {
const width = detectedWidth || containerWidth;
const margin = 24;
const size = 320;
const countNum = Math.floor(width / (size + margin));
const count = countNum > 4 ? 4 : countNum; // limit count in order not to request for more than 4 per page
const cardWidth = width >= size + margin * 2
? Math.floor((width - margin * count) / count)
: '100%';
useEffect(() => {
onResize(count);
}, [count]);
const ulPadding = Math.floor(margin / 2);
const isSingleCard = count === 0 || count === 1;

const gridLayoutSpace = (idx) => {

const gridSpace = isSingleCard
? {
width: width - margin,
margin: ulPadding
}
: {
width: cardWidth,
marginRight: (idx + 1) % count === 0 ? 0 : margin,
marginTop: 8
};

return gridSpace;
};

const containerStyle = isSingleCard
? {
paddingBottom: 0
}
: {
paddingLeft: ulPadding,
paddingBottom: 0
};
return (detectedWidth ?
return (
<ul
style={containerStyle}
className={`gn-card-list gn-cards-type-grid`}
>
{resources.map((resource, idx) => {
{resources.map((resource) => {
const { isProcessing } = getResourceStatuses(resource);

return (
<li
key={resource?.pk}
style={(gridLayoutSpace(idx))}
>
<ResourceCard
active={isCardActive(resource)}
Expand All @@ -89,8 +46,8 @@ const Cards = ({
</li>
);
})}
</ul> : <div />
</ul>
);
};

export default withResizeDetector(Cards);
export default Cards;
Loading

0 comments on commit 6533619

Please sign in to comment.