Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🎨 [#1168] Make Theme cards entirely clickable #519

Merged
merged 2 commits into from
Mar 8, 2023
Merged

🎨 [#1168] Make Theme cards entirely clickable #519

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d9ec17c
:art: [#1168] Made Theme/Category cards entirely clickable, unless th…
jiromaykin Mar 6, 2023
f8a1647
:art: [#1168] Set if/else statement for theme cards with/without prod…
jiromaykin Mar 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 32 additions & 9 deletions src/open_inwoner/components/templates/components/Card/CategoryCard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,33 @@
{% load card_tags icon_tags link_tags helpers %}
{% load card_tags icon_tags link_tags helpers utils %}

{% render_card title=category href=category.get_absolute_url %}
{% for product in category.products.published %}
{% with category as parent %}
{% get_product_url product as product_url %}
{% link href=product_url icon='arrow_forward' icon_position='before' secondary=True text=product.name %}
{% endwith %}
{% endfor %}
{% endrender_card %}
{# create tag for anchor around card - never use anchors within anchors for valid HTML. #}
{% if category.products.published %}
<div title="{{ category }}" aria-label="{{ category.name }}" class="card">
<div class="card__body">
{% if category %}
<p class="h3">
<a href="{{ category.slug }}" class="link link__text">{{ category }}</a>
</p>
{% endif %}
{% for product in category.products.published %}
{% with category as parent %}
<div class="card__categories">
{% get_product_url product as product_url %}
{% link href=product_url icon='arrow_forward' icon_position='before' secondary=True text=product.name %}
</div>
{% endwith %}
{% endfor %}
</div>
</div>

{% else %}
<a href="{{ category.slug }}" title="{{ category }}" class="card">
<div class="card__body">
{% if category %}
<p class="h3">
<span class="link link__text">{{ category }}</span>
</p>
{% endif %}
</div>
</a>
{% endif %}
18 changes: 8 additions & 10 deletions src/open_inwoner/components/templates/components/Card/RenderCard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
{% load link_tags %}
{% load utils link_tags %}

{# Utilizes same template as Card. #}
<div class="card{% if compact %} card--compact{% endif %}{% if inline %} card--inline{% endif %}{% if stretch %} card--stretch{% endif %}{% if tinted %} card--tinted{% endif %}{% if type %} card--type-{{ type }}{% endif %}">
{% capture as tag %}{{ href|yesno:'a,div'}}{% endcapture %}
{# create tag for anchor around card - never use anchors within anchors for valid HTML. #}
<{{ tag }}{% if href %} href="{{ href }}"{% endif %} title="{{ title }}" aria-label="{{ title }}" class="card{% if compact %} card--compact{% endif %}{% if inline %} card--inline{% endif %}{% if stretch %} card--stretch{% 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 }}">
<span class="card__header">
<img class="card__img{% if image_object_fit %} card__img--{{ image_object_fit }}{% endif %}" src="{{ src }}" alt="{{ alt }}"/>
</a>
</span>
{% endif %}

<div class="card__body{% if direction %} card__body--direction-{{ direction }}{% endif %}{% if grid %} card__body--grid{% endif %}">
{% if title %}
<p class="{% if compact %}h4{% else %}h3{% endif %}">
{% if href %}
{% link href=href text=title %}
{% else %}
{{ title }}
{% endif %}
<span class="link link__text">{{ title }}</span>
</p>
{% endif %}
{{ contents }}
</div>
</div>
</{{ tag }}>