UTCWeb / particle

A starter kit for using the prototyping tool, Pattern Lab, in tandem with a Drupal theme. Utilizes Webpack for all asset management.
https://phase2.gitbook.io/frontend/
GNU General Public License v2.0
0 stars 10 forks source link

Remove body text div if no body is entered on UTC Cards. #639

Open UTCbridget opened 3 weeks ago

UTCbridget commented 3 weeks ago

We need to create a condition that only shows the body text div "utc-card-2__body" if body text is present. The reason is that there is padding associated with that div that creates a blank white space under images if there is no text.

Screenshot 2024-06-04 at 10 33 09 AM

The variables (for each individual card) is found in this file: block--utc-card.html.twig The condition is currently on line 89 (closing on 92), but needs to be moved to line 80 (closing on 103): block--utc-card-base.html.twig

weston-gentry commented 6 days ago

@UTCbridget I have a couple of questions.

  1. I'm unable to find block--utc-card-base.html.twig in my codebase. I was able to find block--utc-card.html.twig. Is it hiding from me?
  2. I'm curious if we should still do this as the utc-card-2title appears to be in utc-card-2content (see screenshot.) In cases with a title but not a body on the block, this could be a problem (although that's probably rare.) Maybe it would be better to make the title and description fields required on the card when creating/editing the block?

Screenshot 2024-06-24 at 3 09 49 PM

UTCbridget commented 6 days ago

That's a good point. The problem I see is that some section editors use the cards with words within the image and then use the card as a link, resulting in a blank white space below the image like this: Screenshot 2024-06-24 at 4 24 21 PM

So, let's try this instead of what I said above to solve both problems:

On line 48, insert this code

{% elseif (card_title is empty) and (card_text is empty) %}
  {% set card_classes = [
    'utc-card-2',
    card_type ? 'utc-card-2--' ~ card_type,
    card_width ? 'utc-card-2--w-' ~ card_width,
    card_link ? 'utc-card-2--card-link',
    card_img_fill ? card_img_fill
  ] | sort | join(' ') | trim %}

That will change this Screenshot 2024-06-24 at 4 45 35 PM

to this, which still looks weird if one card has a headline Screenshot 2024-06-24 at 4 46 15 PM

but not if all the cards are consistently sans headline and text. Screenshot 2024-06-24 at 4 46 50 PM

We can hope that if they see something weird they'll change it or we can force all three cards to have the same treatment regardless of whether it's empty or not.

UTCbridget commented 6 days ago

This was one culprit I recently came by (though this page is no longer existent). https://utcclouddev2.prod.acquia-sites.com/enrollment-management-and-student-affairs/pre-health-professions-advising/events/2024-pre-health-expo-events-and-information

But I've seen several like this sporadically done.

UTCbridget commented 6 days ago

regarding the block--utc-card-base.html.twig... It should be right above the block--utc-card.html.twig Screenshot 2024-06-24 at 4 20 06 PM