💄 [#1021] Make entire Product card clickable

[jiromaykin]

See #453
and: #454

these need to become fully clickable:

• Product cards
• Category (theme) cards
• Plans (samenwerken) cards
• extra: plans cards on the Home page, if possible.

Note for accessibility: "... Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive. In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. ..."

[vaszig]

• The card is still not entirely clickable (areas 1,3,5 are clickable, 2 and 4 are not)

• If we put the button inside the card__body it should be flex or grid (it doesn't have the right position)

• And another page is affected as well (by the card__body css modication)
  

Generally, I am not the best person to review frontend, but I think we should see this from another view. Maybe change the whole card in order to achieve a clickable card and not specifically the body (if there is a link). Bart can tell us his opinion as well.

[vaszig]

This change in the code linting creates a problem in rendering the page (template syntax error). The linebreaks in the template tags breaks the template.

[Bartvaderkin]

@jiromaykin This is the same thing we had yesterday at your desk with the if/else statement. Breaking template tags insde the tag delimiters is a bity fishy (not as robust as html itself)

[jiromaykin]

Yes, I had not seen this break yet; also it seems like my IDE is a bit fishy with templates/html.

[Bartvaderkin]

I think it would be a good idea to collect a little overview of the places in the site where these card CSS/template tags are re-used so we can decide if these changes on the card body would affect things we're not aware of.

Also I don't know what is best practice on 'the whole card clickable', if it should include the background or just all elements.

[Bartvaderkin]

Also if this is a bit complicated for comments we can do a quick call next time when we all work, it is easier to talk about things verbally.

[jiromaykin]

• The card is still not entirely clickable (areas 1,3,5 are clickable, 2 and 4 are not)

Yes, thank you @vaszig and @Bartvaderkin - I was hoping to create a relatively easy "CSS only" solution, but this won't work for all situations, so next step for me is to learn how Django templates work, because I will definitely need to change the structure of the Cards.
I'm working on a list of where exactly the different cards can be found in the front-end views (browser).

+Also it seems the design is suggesting all arrows need to always be all the way at the bottom of each card (instead of moving along with content) but we will need to check this with @alextreme and Roxanne.

[Bartvaderkin]

Also earlier I didn't configure Jiro's Pycharm to use Django templates (it picked Jinja) so it didn't catch and highlight some of the formatting issues we encountered. This should work better now.

[jiromaykin]

Overview of cards on frontend:
-Home/Themas theme-cards (RenderCard), with or without image, no description, no arrow:
https://open-inwoner-test.maykin.nl/themas/
-Description Cards with title, description and arrows, no selected image:
https://open-inwoner-test.maykin.nl/themas/opvoeding-en-gezin/
-small CategoryCard with out description or image, just a title:
https://open-inwoner-test.maykin.nl/themas/zorg-en-ondersteuning/
-Cards from a Theme/Product hierarchy with lots of arrows linking to products:
https://open-inwoner-test.maykin.nl/themas/gezond-blijven/
-larger DescriptionCard (inside RenderCard) with image on the left + description:
https://open-inwoner-test.maykin.nl/themas/zorg-en-ondersteuning/
-Inloggen/login card, (with tinted cards inside):
https://open-inwoner-test.maykin.nl/accounts/login/
-Samenwerken overview cards (after logging in), RenderCard with date and arrow
https://open-inwoner-test.maykin.nl/plans/
-table-like RenderCard in Mijn Aanvragen/Cases (after logging in) with date and status and arrow
http://127.0.0.1:8000/accounts/cases/open/
-Location card with text only, no links (scroll to bottom of page)
https://open-inwoner-test.maykin.nl/themas/opvoeding-en-gezin/products/ditiseenredelijklangetitelvan-een-product-en-levert-problemen-op-in-anchor-menu/
-Card (type?) with a lot of links:
https://preproductie.mijnleeuwarden.nl/themas/schulden-en-armoede/#question-1-answer

[codecov-commenter]

Codecov Report

Merging #457 (0dee2dc) into develop (4b09a8c) will decrease coverage by 0.02%.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop     #457      +/-   ##
===========================================
- Coverage    96.48%   96.46%   -0.02%     
===========================================
  Files          527      538      +11     
  Lines        19003    19204     +201     
===========================================
+ Hits         18335    18526     +191     
- Misses         668      678      +10     

Impacted Files	Coverage Δ
.../open_inwoner/components/templatetags/card_tags.py	96.96% <ø> (ø)
.../open_inwoner/components/templatetags/icon_tags.py	100.00% <ø> (ø)
.../open_inwoner/components/templatetags/link_tags.py	91.83% <ø> (-8.17%)	⬇️

... and 31 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[jiromaykin]

Closing this older messy branch for now, and starting a new one here that is more up to date: #554