From 763ec7a6d3ac93be4dc0b35943e524c1c2d84c9f Mon Sep 17 00:00:00 2001 From: allyoucanmap Date: Tue, 1 Oct 2024 10:58:19 +0200 Subject: [PATCH] updates to improve templates customizations --- .../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 +- .../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 +- 20 files changed, 279 insertions(+), 310 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/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 %}