From 65336194fb2f4130f56a803e5ccc2d67fda52413 Mon Sep 17 00:00:00 2001 From: stefano bovio Date: Tue, 1 Oct 2024 12:54:22 +0200 Subject: [PATCH] Updates to improve templates customizations (#1871) * updates to improve templates customizations * review delete redirect --- .../js/components/CardGrid/CardGrid.jsx | 172 ++++++------------ .../js/components/FeaturedList/Cards.jsx | 55 +----- .../components/FeaturedList/FeaturedList.jsx | 73 ++++---- .../js/components/FiltersMenu/FiltersMenu.jsx | 72 ++++---- .../client/js/epics/gnresource.js | 3 +- .../client/js/plugins/ResourcesGrid.jsx | 3 +- .../client/js/utils/ResourceUtils.js | 30 +-- .../themes/geonode/less/_card-grid.less | 21 ++- .../client/themes/geonode/less/_menu.less | 3 + .../templates/documents/document_embed.html | 9 +- .../geonode-mapstore-client/catalogue.html | 9 +- .../dashboard_embed.html | 9 +- .../dataset_embed.html | 9 +- .../geostory_embed.html | 9 +- .../geonode-mapstore-client/map_embed.html | 9 +- .../snippets/head.html | 21 +++ .../snippets/menu_item.html | 2 +- .../snippets/resource_card.html | 57 ++++++ .../snippets/resources_grid.html | 37 ++++ geonode_mapstore_client/templates/index.html | 8 +- geonode_mapstore_client/templates/page.html | 8 +- 21 files changed, 287 insertions(+), 332 deletions(-) create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/head.html create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/resource_card.html create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/resources_grid.html diff --git a/geonode_mapstore_client/client/js/components/CardGrid/CardGrid.jsx b/geonode_mapstore_client/client/js/components/CardGrid/CardGrid.jsx index 84ad61fc14..ae7be0e4a5 100644 --- a/geonode_mapstore_client/client/js/components/CardGrid/CardGrid.jsx +++ b/geonode_mapstore_client/client/js/components/CardGrid/CardGrid.jsx @@ -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, @@ -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 ( ); }; -export default withResizeDetector(Cards); +export default Cards; diff --git a/geonode_mapstore_client/client/js/components/FeaturedList/FeaturedList.jsx b/geonode_mapstore_client/client/js/components/FeaturedList/FeaturedList.jsx index a6f1b044ed..d062f22869 100644 --- a/geonode_mapstore_client/client/js/components/FeaturedList/FeaturedList.jsx +++ b/geonode_mapstore_client/client/js/components/FeaturedList/FeaturedList.jsx @@ -6,7 +6,7 @@ * LICENSE file in the root directory of this source tree. */ -import React, { useState } from 'react'; +import React, { useEffect } from 'react'; import Button from '@js/components/Button'; import Spinner from '@js/components/Spinner'; import HTML from '@mapstore/framework/components/I18N/HTML'; @@ -28,11 +28,10 @@ const FeaturedList = withResizeDetector(({ onLoad, width, downloading, - getDetailHref + getDetailHref, + cardsCount = 4 }) => { - const [count, setCount] = useState(); - const nextIconStyles = { fontSize: '1rem', ...(!isNextPageAvailable || loading ? {color: 'grey', cursor: 'not-allowed'} : {cursor: 'pointer'}) @@ -43,48 +42,42 @@ const FeaturedList = withResizeDetector(({ ...(!isPreviousPageAvailable || loading ? { color: 'grey', cursor: 'not-allowed' } : { cursor: 'pointer' }) }; + useEffect(() => { + onLoad(undefined, cardsCount); + }, [cardsCount]); + return (
{header} -
-
-
-

- { - !isNaN(cardsCount) && onLoad(undefined, cardsCount); - setCount(cardsCount); - }} - downloading={downloading} - getDetailHref={getDetailHref} - /> -
+
+

+ +
- + -
- { loading && - Loading... - } -
- -
+
+ { loading && + Loading... + }
+
diff --git a/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx b/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx index 459988e72b..c95999e256 100644 --- a/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx +++ b/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx @@ -21,26 +21,61 @@ const ButtonWithTooltip = tooltip(Button); const FiltersMenu = forwardRef(({ formatHref, - orderOptions, order, cardsMenu, style, onClick, - defaultLabelId, totalResources, totalFilters, loading, hideCardLayoutButton, cardLayoutStyle, - setCardLayoutStyle + setCardLayoutStyle, + orderConfig }, ref) => { + const { + defaultLabelId, + options: orderOptions, + variant: orderVariant, + align: orderAlign = 'right' + } = orderConfig; + const { isMobile } = getConfigProp('geoNodeSettings'); const selectedSort = orderOptions.find(({ value }) => order === value); function handleToggleCardLayoutStyle() { setCardLayoutStyle(cardLayoutStyle === 'grid' ? 'list' : 'grid'); } + const orderButtonNode = orderOptions.length > 0 && + + + + + + {orderOptions.map(({ labelId, value }) => { + return ( + + + + ); + })} + + ; + return (
{isMobile ? : } } - {' '} + {orderAlign === 'left' ? orderButtonNode : null} {loading ? : } @@ -83,34 +118,7 @@ const FiltersMenu = forwardRef(({ > } - {orderOptions.length > 0 && - - - - - - {orderOptions.map(({ labelId, value }) => { - return ( - - - - ); - })} - - } + {orderAlign === 'right' ? orderButtonNode : null}
diff --git a/geonode_mapstore_client/client/js/epics/gnresource.js b/geonode_mapstore_client/client/js/epics/gnresource.js index 8899bb6486..202da7888a 100644 --- a/geonode_mapstore_client/client/js/epics/gnresource.js +++ b/geonode_mapstore_client/client/js/epics/gnresource.js @@ -442,11 +442,12 @@ export const gnViewerRequestNewResourceConfig = (action$, store) => const { newResourceObservable } = resourceTypes[action.resourceType] || {}; const state = store.getState(); if (!canAddResource(state)) { + const pathname = state?.router?.location?.pathname; const formattedUrl = url.format({ ...window.location, pathname: '/account/login/', hash: '', - search: `?next=${getCataloguePath('/catalogue')}` + search: `?next=${getCataloguePath('/catalogue')}${pathname ? `/#${pathname}` : ''}` }); window.location.href = formattedUrl; window.reload(); diff --git a/geonode_mapstore_client/client/js/plugins/ResourcesGrid.jsx b/geonode_mapstore_client/client/js/plugins/ResourcesGrid.jsx index 91de2287d1..92571d0318 100644 --- a/geonode_mapstore_client/client/js/plugins/ResourcesGrid.jsx +++ b/geonode_mapstore_client/client/js/plugins/ResourcesGrid.jsx @@ -781,8 +781,7 @@ function ResourcesGrid({ order={query?.sort} onClear={handleClear} onClick={handleShowFilterForm.bind(null, true)} - orderOptions={parsedConfig.order?.options} - defaultLabelId={parsedConfig.order?.defaultLabelId} + orderConfig={parsedConfig.order} totalResources={totalResources} totalFilters={queryFilters.length} filtersActive={!!(queryFilters.length > 0)} diff --git a/geonode_mapstore_client/client/js/utils/ResourceUtils.js b/geonode_mapstore_client/client/js/utils/ResourceUtils.js index 850228fc0f..a2c2b6ec26 100644 --- a/geonode_mapstore_client/client/js/utils/ResourceUtils.js +++ b/geonode_mapstore_client/client/js/utils/ResourceUtils.js @@ -337,8 +337,7 @@ export const getResourceTypesInfo = () => ({ name: 'Dataset', formatMetadataUrl: (resource) => isDefaultDatasetSubtype(resource?.subtype) ? `/datasets/${resource.store ? resource.store + ":" : ''}${resource.alternate}/metadata` - : `/resources/${resource.pk}/metadata`, - catalogPageUrl: '/datasets' + : `/resources/${resource.pk}/metadata` }, [ResourceTypes.MAP]: { icon: 'map', @@ -348,8 +347,7 @@ export const getResourceTypesInfo = () => ({ config: 'map_preview' })), formatDetailUrl: (resource) => resource?.detail_url && parseDevHostname(resource.detail_url), - formatMetadataUrl: (resource) => (`/maps/${resource.pk}/metadata`), - catalogPageUrl: '/maps' + formatMetadataUrl: (resource) => (`/maps/${resource.pk}/metadata`) }, [ResourceTypes.DOCUMENT]: { icon: 'file', @@ -359,8 +357,7 @@ export const getResourceTypesInfo = () => ({ formatEmbedUrl: (resource) => isDocumentExternalSource(resource) ? undefined : resource?.embed_url && parseDevHostname(resource.embed_url), formatDetailUrl: (resource) => resource?.detail_url && parseDevHostname(resource.detail_url), formatMetadataUrl: (resource) => (`/documents/${resource.pk}/metadata`), - metadataPreviewUrl: (resource) => (`/documents/${resource.pk}/metadata_detail?preview`), - catalogPageUrl: '/documents' + metadataPreviewUrl: (resource) => (`/documents/${resource.pk}/metadata_detail?preview`) }, [ResourceTypes.GEOSTORY]: { icon: 'book', @@ -368,8 +365,7 @@ export const getResourceTypesInfo = () => ({ canPreviewed: (resource) => resourceHasPermission(resource, 'view_resourcebase'), formatEmbedUrl: (resource) => resource?.embed_url && parseDevHostname(resource.embed_url), formatDetailUrl: (resource) => resource?.detail_url && parseDevHostname(resource.detail_url), - formatMetadataUrl: (resource) => (`/apps/${resource.pk}/metadata`), - catalogPageUrl: '/geostories' + formatMetadataUrl: (resource) => (`/apps/${resource.pk}/metadata`) }, [ResourceTypes.DASHBOARD]: { icon: 'dashboard', @@ -377,8 +373,7 @@ export const getResourceTypesInfo = () => ({ canPreviewed: (resource) => resourceHasPermission(resource, 'view_resourcebase'), formatEmbedUrl: (resource) => resource?.embed_url && parseDevHostname(resource.embed_url), formatDetailUrl: (resource) => resource?.detail_url && parseDevHostname(resource.detail_url), - formatMetadataUrl: (resource) => (`/apps/${resource.pk}/metadata`), - catalogPageUrl: '/dashboards' + formatMetadataUrl: (resource) => (`/apps/${resource.pk}/metadata`) }, [ResourceTypes.VIEWER]: { icon: 'cogs', @@ -386,8 +381,7 @@ export const getResourceTypesInfo = () => ({ canPreviewed: (resource) => resourceHasPermission(resource, 'view_resourcebase'), formatEmbedUrl: () => false, formatDetailUrl: (resource) => resource?.detail_url && parseDevHostname(resource.detail_url), - formatMetadataUrl: (resource) => (`/apps/${resource.pk}/metadata`), - catalogPageUrl: '/all' + formatMetadataUrl: (resource) => (`/apps/${resource.pk}/metadata`) } }); @@ -831,14 +825,6 @@ export const getResourceAdditionalProperties = (_resource = {}) => { }; }; -export const onDeleteRedirectTo = (resources = []) => { - let redirectUrl = '/'; - if (!isEmpty(resources) && resources?.length === 1) { - const types = getResourceTypesInfo(); - const { catalogPageUrl } = types[resources[0].resource_type] ?? {}; - if (catalogPageUrl) { - redirectUrl = catalogPageUrl; - } - } - return redirectUrl; +export const onDeleteRedirectTo = () => { + 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 index 36eec773f8..8aaa8743e3 100644 --- a/geonode_mapstore_client/client/themes/geonode/less/_card-grid.less +++ b/geonode_mapstore_client/client/themes/geonode/less/_card-grid.less @@ -51,6 +51,8 @@ .gn-card-grid { padding-top: 20px; + container-name: card-grid; + container-type: inline-size; .gn-card-grid-container { position: relative; max-width: @gn-page-max-width; @@ -74,9 +76,13 @@ max-width: @gn-page-max-width; margin: auto; width: 100%; - li { + > li { padding: 0; - margin: 0; + width: calc(100% - 1rem); + margin: 0.5rem; + } + &.gn-cards-type-grid > li { + width: calc(25% - 1rem); } .gn-cards-loader { z-index: 2; @@ -128,6 +134,17 @@ } } +@container card-grid (width < 1100px) { + .gn-card-grid .gn-card-grid-container>ul.gn-cards-type-grid > li { + width: calc(50% - 1rem); + } +} +@container card-grid (width < 600px) { + .gn-card-grid .gn-card-grid-container>ul.gn-cards-type-grid > li { + width: calc(100% - 1rem); + } +} + p.gn-resource-status-text { margin: 0; } diff --git a/geonode_mapstore_client/client/themes/geonode/less/_menu.less b/geonode_mapstore_client/client/themes/geonode/less/_menu.less index 1168b9b26c..2a1613fda5 100644 --- a/geonode_mapstore_client/client/themes/geonode/less/_menu.less +++ b/geonode_mapstore_client/client/themes/geonode/less/_menu.less @@ -259,6 +259,9 @@ nav.hide-navigation#gn-topbar { position: sticky; top: 0px; z-index: 10; + .gn-menu-fill { + gap: 0.25rem; + } } .gn-action-navbar-title { diff --git a/geonode_mapstore_client/templates/documents/document_embed.html b/geonode_mapstore_client/templates/documents/document_embed.html index b263a2e1b4..9e0c0c9b8a 100644 --- a/geonode_mapstore_client/templates/documents/document_embed.html +++ b/geonode_mapstore_client/templates/documents/document_embed.html @@ -4,20 +4,13 @@ - - - + {% include 'geonode-mapstore-client/snippets/head.html' %} {% if TWITTER_CARD %} {% include "base/_resourcebase_twittercard.html" %} {% endif %} {% if OPENGRAPH_ENABLED %} {% include "base/_resourcebase_opengraph.html" %} {% endif %} - - - - {{ SITE_NAME }} - {% include 'geonode-mapstore-client/snippets/loader_style.html' %} {% block custom_theme %} diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/catalogue.html b/geonode_mapstore_client/templates/geonode-mapstore-client/catalogue.html index 2237ca9df6..2f5031e70a 100644 --- a/geonode_mapstore_client/templates/geonode-mapstore-client/catalogue.html +++ b/geonode_mapstore_client/templates/geonode-mapstore-client/catalogue.html @@ -4,14 +4,7 @@ - - - - - - - {{ SITE_NAME }} - + {% include './snippets/head.html' %} {% include './snippets/loader_style.html' %} {% block custom_theme %} diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/dashboard_embed.html b/geonode_mapstore_client/templates/geonode-mapstore-client/dashboard_embed.html index 0e47c71669..b615253b19 100644 --- a/geonode_mapstore_client/templates/geonode-mapstore-client/dashboard_embed.html +++ b/geonode_mapstore_client/templates/geonode-mapstore-client/dashboard_embed.html @@ -4,14 +4,7 @@ - - - - - - - {{ SITE_NAME }} - + {% include './snippets/head.html' %} {% include './snippets/loader_style.html' %} {% block custom_theme %} diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/dataset_embed.html b/geonode_mapstore_client/templates/geonode-mapstore-client/dataset_embed.html index 7b9b82259c..dd98cc1437 100644 --- a/geonode_mapstore_client/templates/geonode-mapstore-client/dataset_embed.html +++ b/geonode_mapstore_client/templates/geonode-mapstore-client/dataset_embed.html @@ -4,20 +4,13 @@ - - - + {% include './snippets/head.html' %} {% if TWITTER_CARD %} {% include "base/_resourcebase_twittercard.html" %} {% endif %} {% if OPENGRAPH_ENABLED %} {% include "base/_resourcebase_opengraph.html" %} {% endif %} - - - - {{ SITE_NAME }} - {% include './snippets/loader_style.html' %} {% block custom_theme %} diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/geostory_embed.html b/geonode_mapstore_client/templates/geonode-mapstore-client/geostory_embed.html index 331f6d360a..8869f83039 100644 --- a/geonode_mapstore_client/templates/geonode-mapstore-client/geostory_embed.html +++ b/geonode_mapstore_client/templates/geonode-mapstore-client/geostory_embed.html @@ -4,14 +4,7 @@ - - - - - - - {{ SITE_NAME }} - + {% include './snippets/head.html' %} {% include './snippets/loader_style.html' %} {% block custom_theme %} diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/map_embed.html b/geonode_mapstore_client/templates/geonode-mapstore-client/map_embed.html index 516d583e08..18af7711cb 100644 --- a/geonode_mapstore_client/templates/geonode-mapstore-client/map_embed.html +++ b/geonode_mapstore_client/templates/geonode-mapstore-client/map_embed.html @@ -4,14 +4,7 @@ - - - - - - - {{ SITE_NAME }} - + {% include './snippets/head.html' %} {% include './snippets/loader_style.html' %} {% block custom_theme %} diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/head.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/head.html new file mode 100644 index 0000000000..3e4c6eebc4 --- /dev/null +++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/head.html @@ -0,0 +1,21 @@ +{% load static %} +{% load client_lib_tags %} +{% load client_version %} + + + + + +{%block font%} + +{%endblock font %} + + +{{ SITE_NAME }} + +{%block favicon%} + +{%endblock favicon%} + +{%block extras%} +{%endblock extras%} diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item.html index d75a52c355..5c993ab697 100644 --- a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item.html +++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item.html @@ -3,7 +3,7 @@ {% if menu_item.type == 'link' %}
  • + {% if params.detail_panel_url %} + + {% else %} + + {% endif %} +
    + {% if params.thumbnail_url %} + + {% else %} +
    + {% endif %} +
    +
    +
    +
    + + + {% trans params.title %} + +

    {% trans params.description %}

    +
    +
    +

    +
    +
    +
    +
    +
    +

    + {% if params.avatar %} + + {% endif %} + {{ params.username }} +

    + {% if params.detail_url and params.detail_panel_url %} +
    +
    + + {% trans "View" %} + +
    +
    + {% endif %} +
    +
    +
    +
    +
    • diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/resources_grid.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/resources_grid.html new file mode 100644 index 0000000000..738875c70a --- /dev/null +++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/resources_grid.html @@ -0,0 +1,37 @@ +{% load i18n %} +
    +
    +
    +
    + {%if not params.hide_filter_menu %} +
    +
    +
    +
    + {% for item in params.left_menu_items %} + {{item.label}} + {% endfor %} + + {{ params.count }} {% trans "Resource found" %} + +
    +
      + {% for item in params.right_menu_items %} +
    • {{item.label}}
      • + {% endfor %} +
    +
    +
    +
    + {%endif%} +
      + {% for resource in params.resources %} +
    • + {% include './resource_card.html' with params=resource %} +
      • + {% endfor %} +
    +
    +
    +
    +
    diff --git a/geonode_mapstore_client/templates/index.html b/geonode_mapstore_client/templates/index.html index 18ba072ca0..1f7e19a368 100644 --- a/geonode_mapstore_client/templates/index.html +++ b/geonode_mapstore_client/templates/index.html @@ -3,13 +3,7 @@ - - - - - - {{ SITE_NAME }} - + {% include './geonode-mapstore-client/snippets/head.html' %} {% include './geonode-mapstore-client/snippets/loader_style.html' %} {% block custom_theme %} diff --git a/geonode_mapstore_client/templates/page.html b/geonode_mapstore_client/templates/page.html index fe578980d6..30e068a382 100644 --- a/geonode_mapstore_client/templates/page.html +++ b/geonode_mapstore_client/templates/page.html @@ -3,13 +3,7 @@ - - - - - - {{ SITE_NAME }} - + {% include './geonode-mapstore-client/snippets/head.html' %} {% include './geonode-mapstore-client/snippets/loader_style.html' %} {% block custom_theme %}