diff --git a/src/open_inwoner/components/templates/components/Card/CardContainer.html b/src/open_inwoner/components/templates/components/Card/CardContainer.html index 97b77f043c..0e2a8fbf13 100644 --- a/src/open_inwoner/components/templates/components/Card/CardContainer.html +++ b/src/open_inwoner/components/templates/components/Card/CardContainer.html @@ -4,31 +4,35 @@ {% for category in categories %} {% url 'products:category_detail' slug=category.slug as category_url %} {% if category.icon %} - {% card src=category.icon.file.url alt=category.icon.name title=category.name href=category_url compact=True image_object_fit=image_object_fit %} + {% include "components/Card/Card.html" with alt=category.icon.name title=category.name href=category_url compact=True image_object_fit=image_object_fit %} {% else %} - {% card src=category.image.file.url alt=category.image.name title=category.name href=category_url compact=True image_object_fit=image_object_fit %} + {% include "components/Card/Card.html" with src=category.image.file.url alt=category.image.name title=category.name href=category_url compact=True image_object_fit=image_object_fit %} {% endif %} {% endfor %} {% endif %} {% if subcategories %} {% for subcategory in subcategories %} - {% category_card category=subcategory parent_category=parent_category compact=True image_object_fit=image_object_fit %} + {% include "components/Card/CategoryCard.html" with category=subcategory parent_category=parent_category compact=True image_object_fit=image_object_fit %} {% endfor %} {% endif %} {% if products %} {% for product in products %} {% get_product_url product as product_url %} - {% product_card title=product.name description=product.summary url=product_url image=product.icon compact=True image_object_fit=image_object_fit %} + {% include "components/Card/ProductCard.html" with title=product.name description=product.summary url=product_url image=product.icon compact=True image_object_fit=image_object_fit %} {% endfor %} {% endif %} {% if plans %} {% for plan in plans %} - {% description_card title=plan.title description=plan.goal|truncatechars:51 url=plan.get_absolute_url elypsis=True object=plan compact=True image_object_fit=image_object_fit %} + {% include "components/Card/DescriptionCard.html" with title=plan.title description=plan.goal|truncatechars:51 url=plan.get_absolute_url elypsis=True object=plan compact=True image_object_fit=image_object_fit %} {% endfor %} {% endif %} - {{ contents }} + {% if locations %} + {% for location in locations %} + {% include "components/Card/LocationCard.html" with location_name=location.name compact=True phonenumber=location.phonenumber email=location.email %} + {% endfor %} + {% endif %} diff --git a/src/open_inwoner/components/templates/components/Card/LocationCard.html b/src/open_inwoner/components/templates/components/Card/LocationCard.html new file mode 100644 index 0000000000..1754c3223a --- /dev/null +++ b/src/open_inwoner/components/templates/components/Card/LocationCard.html @@ -0,0 +1,16 @@ +{% load link_tags string_tags %} +
+ {% if location_name %} + {% link href=location.get_absolute_url primary=True text=location_name extra_classes="h3" %} + {% endif %} +
+

{{ location.address_line_1 }}

+

{{ location.address_line_2 }}

+ {% if phonenumber %} + {% link href='tel:'|addstr:phonenumber secondary=True text=phonenumber %} + {% endif %} + {% if email %} + {% link href='mailto:'|addstr:email secondary=True text=email %} + {% endif %} +
+
\ No newline at end of file diff --git a/src/open_inwoner/components/templatetags/card_tags.py b/src/open_inwoner/components/templatetags/card_tags.py index 843f1d5924..7a2d5d38e1 100644 --- a/src/open_inwoner/components/templatetags/card_tags.py +++ b/src/open_inwoner/components/templatetags/card_tags.py @@ -2,38 +2,9 @@ from open_inwoner.components.utils import ContentsNode, parse_component_with_args -from ...pdc.models import Category - register = template.Library() -@register.inclusion_tag("components/Card/Card.html") -def card(href, title, **kwargs): - """ - Render in a card. Only using variables. - - Usage: - {% card href="https://maykinmedia.nl" %} - - Variables: - + href: url | where the card links to. - + title: string | this will be the card title. - - alt: string | the alt of the header image. - - compact: bool | Whether to use compact styling. - - direction: string | can be set to "horizontal" to show contents horizontally. - - inline: bool | Whether the card should be rendered inline. - - src: string | the src of the header image. - - compact: bool | Whether the card has uniform padding on all sides. - - stretch: bool | Whether to stretch the card vertically. - - tinted: bool | whether to use gray as background color. - - type: string (info) | Set to info for an info card. - - image: FilerImageField | an image that should be used. - - image_object_fit: string | Can be set to either "cover" (default) or "contain". - - grid: boolean | if the card should be a grid. - """ - return {**kwargs, "href": href, "title": title} - - @register.tag def render_card(parser, token): """ @@ -55,113 +26,3 @@ def render_card(parser, token): nodelist = parser.parse(("endrender_card",)) parser.delete_first_token() return ContentsNode(nodelist, "components/Card/RenderCard.html", **context_kwargs) - - -@register.inclusion_tag("components/Card/CategoryCard.html") -def category_card(category: Category, **kwargs): - """ - Renders a card prepopulated based on `category`. - - Usage: - {% category_card category %} - - Available options: - - category: Category | the category to render card for. - """ - return {**kwargs, "category": category} - - -@register.inclusion_tag("components/Card/DescriptionCard.html") -def description_card(title, description, url, **kwargs): - """ - Renders a card prepopulated based on `product`. - - Usage: - {% description_card title=product.title description=product.intro url=product.get_absolute_url %} - {% description_card title="title" description="description" url="https://maykinmedia.nl" %} - - Available options: - + title: string | The title of the card that needs to be displayed. - + description: string | The description that needs to be displayed. - + url: string | The url that the card should point to. - - object: any | The object that needs to render aditional data. - - image: FilerImageField | an image that should be used. - """ - kwargs.update(title=title, description=description, url=url) - return kwargs - - -@register.inclusion_tag("components/Card/ProductCard.html") -def product_card(description, url, **kwargs): - """ - Renders a card with or without an image prepopulated based on `product`. - - Usage: - {% product_card title=product.title description=product.intro url=product.get_absolute_url %} - - Available options: - + description: string | The description that needs to be displayed. - + url: string | The url that the card should point to. - - title: string | The title of the card that may be displayed if there is no image. - - object: any | The object that needs to render aditional data. - - image: FilerImageField | an image that should be used. - """ - kwargs.update(description=description, url=url) - return kwargs - - -@register.inclusion_tag("components/Card/CardContainer.html") -def card_container(categories=[], subcategories=[], products=[], plans=[], **kwargs): - """ - A card container where the category card or product card will be rendered in. - - Usage: - {% card_container categories=categories %} - - Variables: - - categories: Category[] | categories to render. - - subcategories: Category[] | subcategories to render. - - products: Product[] | products to render. - - parent: Category | The parent of the given card_container - - image_object_fit: string | Can be set to either "cover" (default) or "contain". - """ - if ( - categories is None - and subcategories is None - and products is None - and plans is None - ): - assert False, "provide categories, subcategories, products or plans" - - return { - **kwargs, - "categories": categories, - "subcategories": subcategories, - "products": products, - "plans": plans, - } - - -@register.tag() -def render_card_container(parser, token): - """ - Nested content supported. - - Usage: - {% render_card_container %} - {% card href='https://www.example.com' title='example.com' %} - {% endrender_card_container %} - - Variables: - Supports all options from card, but optional. - - Extra context: - - contents: string (HTML) | this is the context between the render_card and endrender_card tags - """ - bits = token.split_contents() - context_kwargs = parse_component_with_args(parser, bits, "render_list") - nodelist = parser.parse(("endrender_card_container",)) # End tag - parser.delete_first_token() - return ContentsNode( - nodelist, "components/Card/CardContainer.html", **context_kwargs - ) # Template diff --git a/src/open_inwoner/templates/cms/products/categories_plugin.html b/src/open_inwoner/templates/cms/products/categories_plugin.html index 08cd19eb57..b4cadfd7bf 100644 --- a/src/open_inwoner/templates/cms/products/categories_plugin.html +++ b/src/open_inwoner/templates/cms/products/categories_plugin.html @@ -8,5 +8,5 @@

{{configurable_text.home_page.home_theme_intro|linebreaksbr}}

- {% card_container categories=categories columns=4 image_object_fit="cover" %} + {% include "components/Card/CardContainer.html" with categories=categories columns=4 image_object_fit="cover" %} {% endif %} diff --git a/src/open_inwoner/templates/pages/category/detail.html b/src/open_inwoner/templates/pages/category/detail.html index 6d325fd7c7..a8e9317338 100644 --- a/src/open_inwoner/templates/pages/category/detail.html +++ b/src/open_inwoner/templates/pages/category/detail.html @@ -20,12 +20,12 @@

{{ category_rendered_description|safe }} {% if subcategories %} - {% card_container subcategories=subcategories parent_category=object %} + {% include "components/Card/CardContainer.html" with subcategories=subcategories parent_category=object %} {% endif %} {% if products %}
- {% card_container products=products small=True parent=object %} + {% include "components/Card/CardContainer.html" with products=products small=True parent=object %}
{% endif %} diff --git a/src/open_inwoner/templates/pages/category/list.html b/src/open_inwoner/templates/pages/category/list.html index 03f6d0f2ef..2e724731d7 100644 --- a/src/open_inwoner/templates/pages/category/list.html +++ b/src/open_inwoner/templates/pages/category/list.html @@ -6,6 +6,6 @@

{{configurable_text.theme_page.theme_title}}

{{configurable_text.theme_page.theme_intro|linebreaksbr}}

- {% card_container categories=object_list %} + {% include "components/Card/CardContainer.html" with categories=object_list %} {% endblock content %} diff --git a/src/open_inwoner/templates/pages/home.html b/src/open_inwoner/templates/pages/home.html index 9ae30e6fc5..0a14a13a41 100644 --- a/src/open_inwoner/templates/pages/home.html +++ b/src/open_inwoner/templates/pages/home.html @@ -25,9 +25,9 @@

{{configurable_text.home_page.home_theme_intro|linebreaksbr}}

{% if request.user.is_authenticated %} - {% card_container categories=categories columns=4 image_object_fit="cover" %} + {% include "components/Card/CardContainer.html" with categories=categories columns=4 image_object_fit="cover" %} {% else %} - {% card_container categories=categories image_object_fit="cover" %} + {% include "components/Card/CardContainer.html" with categories=categories image_object_fit="cover" %} {% endif %} {% if questionnaire_roots.exists %} diff --git a/src/open_inwoner/templates/pages/plans/list.html b/src/open_inwoner/templates/pages/plans/list.html index 12b9b261a3..2d84594b1d 100644 --- a/src/open_inwoner/templates/pages/plans/list.html +++ b/src/open_inwoner/templates/pages/plans/list.html @@ -65,7 +65,7 @@

{% else %} - {% card_container plans=plans.plan_list columns=2 %} + {% include "components/Card/CardContainer.html" with plans=plans.plan_list columns=2 %} {% endif %} {% pagination page_obj=page_obj paginator=paginator request=request %} diff --git a/src/open_inwoner/templates/pages/product/detail.html b/src/open_inwoner/templates/pages/product/detail.html index ddd8faf3f6..a8b9e6bffc 100644 --- a/src/open_inwoner/templates/pages/product/detail.html +++ b/src/open_inwoner/templates/pages/product/detail.html @@ -90,27 +90,7 @@

{% trans "U komt niet in aanmerking" %}

{% map centroid.lat centroid.lng id="locations" title=_('Locaties') geojson_feature_collection=object.locations.get_geojson_feature_collection %} {% endwith %} - {% render_card_container columns=3 %} - {% for location in object.locations.all %} - {% with location_name=location.name phonenumber=location.phonenumber email=location.email %} -
- {% if location_name %} - {% link href=location.get_absolute_url primary=True text=location_name extra_classes="h3" %} - {% endif %} -
-

{{ location.address_line_1 }}

-

{{ location.address_line_2 }}

- {% if phonenumber %} - {% link href='tel:'|addstr:phonenumber secondary=True text=phonenumber %} - {% endif %} - {% if email %} - {% link href='mailto:'|addstr:email secondary=True text=email %} - {% endif %} -
-
- {% endwith %} - {% endfor %} - {% endrender_card_container %} + {% include "components/Card/CardContainer.html" with locations=object.locations.all columns=3 %} {% endif %} {% render_grid %} diff --git a/src/open_inwoner/templates/pages/product/location_detail.html b/src/open_inwoner/templates/pages/product/location_detail.html index 0ee63203ae..b99121cd59 100644 --- a/src/open_inwoner/templates/pages/product/location_detail.html +++ b/src/open_inwoner/templates/pages/product/location_detail.html @@ -23,9 +23,9 @@

{{ object.name }}

- + {% if products %} - {% card_container products=products small=True %} + {% include "components/Card/CardContainer.html" with products=products small=True %} {% else %} {% trans "There are no products available at this location." %} {% endif %} diff --git a/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html b/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html index ef089717ae..0a480a849b 100644 --- a/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html +++ b/src/open_inwoner/templates/pages/questionnaire/questionnaire-step.html @@ -51,7 +51,7 @@

- {% card_container products=form.instance.related_products.published small=True %} + {% include "components/Card/CardContainer.html" with products=form.instance.related_products.published small=True %} {% endif %} {% endrender_form %}