💄 #768 - Homepage styling.

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 %}
 

src/open_inwoner/components/templates/components/Card/RenderCard.html

@@ -4,7 +4,7 @@
 <div class="card{% if inline %} card--inline{% endif %}{% if tinted %} card--tinted{% endif %}{% if type %} card--type-{{ type }}{% endif %}">
     {% if src %}
         <a class="card__header" href="{{ href }}" title="{{ title }}" aria-describedby="{{ title }}">
-            <img class="card__img" src="{{ src }}" alt="{{ alt }}"/>
+            <img class="card__img{% if image_object_fit %} card__img--{{ image_object_fit }}{% endif %}" src="{{ src }}" alt="{{ alt }}"/>
         </a>
     {% endif %}
 

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

src/open_inwoner/scss/components/Card/Card.scss

@@ -64,6 +64,9 @@
     width: 100%;
   }
 
+  &__img--contain {
+    object-fit: contain;
+  }
   &__body {
     padding: var(--card-spacing);
   }

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 {

src/open_inwoner/templates/pages/home.html

@@ -24,9 +24,9 @@ <h2 class="h2">
     <p class="p">{{configurable_text.home_page.home_theme_intro|linebreaksbr}}</p>
 
     {% 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 @@ <h2 class="h2">{% trans "Waar bent u naar op zoek?" %}</h2>
     {% 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 %}
 
     <h2 class="h2">{{configurable_text.home_page.home_map_title}}</h2>

src/open_inwoner/templates/pages/user-home.html

@@ -7,15 +7,15 @@
     <h1 class="h1">{{ configurable_text.home_page.home_welcome_title }} {{ request.user.get_full_name }}</h1>
     <p class="p">{{ configurable_text.home_page.home_welcome_intro|linebreaksbr }}</p>
 
-    <h2 class="h2 h2--extra">
+    <h2 class="h2">
         Samenwerken
         {% button href="plans:plan_list" text=_("Naar samenwerken") icon="arrow_forward" icon_position="after" %}
     </h2>
 
     {% if plans %}
     <div class="card-container card-container--columns-3">
         {% for plan in plans %}
-            {% render_card %}
+            {% render_card image_object_fit="contain" %}
                 <h3 class="h3">{{ plan.title }}</h3>
                 <p class="p">{{ plan.goal|truncatewords:20 }}</p>
                 <a