From 88b3f6bfc4ca93f795fdab85cd66e162a939df58 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Mon, 21 Nov 2022 13:01:15 +0100 Subject: [PATCH] :lipstick: #768 - Homepage styling. --- .../templates/components/Card/CardContainer.html | 10 +++++----- .../templates/components/Card/RenderCard.html | 2 +- src/open_inwoner/components/templatetags/card_tags.py | 2 ++ src/open_inwoner/scss/components/Card/Card.scss | 3 +++ src/open_inwoner/scss/components/Typography/P.scss | 7 ++++++- src/open_inwoner/templates/pages/home.html | 8 +++----- src/open_inwoner/templates/pages/user-home.html | 4 ++-- 7 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/open_inwoner/components/templates/components/Card/CardContainer.html b/src/open_inwoner/components/templates/components/Card/CardContainer.html index 54de06581d..d9f09bbf09 100644 --- a/src/open_inwoner/components/templates/components/Card/CardContainer.html +++ b/src/open_inwoner/components/templates/components/Card/CardContainer.html @@ -4,29 +4,29 @@ {% for category in categories %} {% url 'pdc: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 %} + {% card src=category.icon.file.url alt=category.icon.name title=category.name href=category_url image_object_fit=image_object_fit %} {% else %} - {% card src=category.image.file.url alt=category.image.name title=category.name href=category_url %} + {% card src=category.image.file.url alt=category.image.name title=category.name href=category_url image_object_fit=image_object_fit %} {% endif %} {% endfor %} {% endif %} {% if subcategories %} {% for subcategory in subcategories %} - {% category_card category=subcategory parent_category=parent_category %} + {% category_card category=subcategory parent_category=parent_category image_object_fit=image_object_fit %} {% endfor %} {% endif %} {% if products %} {% for product in products %} {% get_product_url product as product_url %} - {% description_card title=product.name description=product.summary url=product_url image=product.icon %} + {% description_card title=product.name description=product.summary url=product_url image=product.icon 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 %} + {% description_card title=plan.title description=plan.goal|truncatechars:51 url=plan.get_absolute_url elypsis=True object=plan image_object_fit=image_object_fit %} {% endfor %} {% endif %} diff --git a/src/open_inwoner/components/templates/components/Card/RenderCard.html b/src/open_inwoner/components/templates/components/Card/RenderCard.html index 6c370a1fea..167818e154 100644 --- a/src/open_inwoner/components/templates/components/Card/RenderCard.html +++ b/src/open_inwoner/components/templates/components/Card/RenderCard.html @@ -4,7 +4,7 @@
{% if src %} - {{ alt }} + {{ alt }} {% endif %} diff --git a/src/open_inwoner/components/templatetags/card_tags.py b/src/open_inwoner/components/templatetags/card_tags.py index d4a9a1c9a0..9210610321 100644 --- a/src/open_inwoner/components/templatetags/card_tags.py +++ b/src/open_inwoner/components/templatetags/card_tags.py @@ -25,6 +25,7 @@ def card(href, title, **kwargs): - 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} @@ -100,6 +101,7 @@ def card_container(categories=[], subcategories=[], products=[], plans=[], **kwa - 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 diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss index cc4f0c6821..a8cdb06fc0 100644 --- a/src/open_inwoner/scss/components/Card/Card.scss +++ b/src/open_inwoner/scss/components/Card/Card.scss @@ -64,6 +64,9 @@ width: 100%; } + &__img--contain { + object-fit: contain; + } &__body { padding: var(--card-spacing); } diff --git a/src/open_inwoner/scss/components/Typography/P.scss b/src/open_inwoner/scss/components/Typography/P.scss index 022f88e2a7..5ac3828267 100644 --- a/src/open_inwoner/scss/components/Typography/P.scss +++ b/src/open_inwoner/scss/components/Typography/P.scss @@ -22,7 +22,12 @@ } *[class^='h'] + .p { - margin-top: var(--font-line-height-body); + margin-top: var(--spacing-small); +} +.p + .h1, +.p + .h2, +.p + .h3 { + margin-top: var(--gutter-width); } .p + .p { diff --git a/src/open_inwoner/templates/pages/home.html b/src/open_inwoner/templates/pages/home.html index 3310521fe6..a7e92b1494 100644 --- a/src/open_inwoner/templates/pages/home.html +++ b/src/open_inwoner/templates/pages/home.html @@ -24,9 +24,9 @@

{{configurable_text.home_page.home_theme_intro|linebreaksbr}}

{% if request.user.is_authenticated %} - {% card_container categories=categories columns=3 %} + {% card_container categories=categories columns=3 image_object_fit="contain" %} {% else %} - {% card_container categories=categories %} + {% card_container categories=categories image_object_fit="container" %} {% endif %} {% if questionnaire_roots.exists %} @@ -37,9 +37,7 @@

{% trans "Waar bent u naar op zoek?" %}

{% endif %} {% if condition %} - {% render_grid %} - {% product_finder condition=condition form=condition_form form_action="pdc:product_finder" primary_text=_("Start") %} - {% endrender_grid %} + {% product_finder condition=condition form=condition_form form_action="pdc:product_finder" primary_text=_("Start") %} {% endif %}

{{configurable_text.home_page.home_map_title}}

diff --git a/src/open_inwoner/templates/pages/user-home.html b/src/open_inwoner/templates/pages/user-home.html index 1d82a7b91b..e4a2519420 100644 --- a/src/open_inwoner/templates/pages/user-home.html +++ b/src/open_inwoner/templates/pages/user-home.html @@ -7,7 +7,7 @@

{{ configurable_text.home_page.home_welcome_title }} {{ request.user.get_full_name }}

{{ configurable_text.home_page.home_welcome_intro|linebreaksbr }}

-

+

Samenwerken {% button href="plans:plan_list" text=_("Naar samenwerken") icon="arrow_forward" icon_position="after" %}

@@ -15,7 +15,7 @@

{% if plans %}
{% for plan in plans %} - {% render_card %} + {% render_card image_object_fit="contain" %}

{{ plan.title }}

{{ plan.goal|truncatewords:20 }}