Updated News page template

[loogart]

We've updated the Challenge News content type on the DEV site as follows:

• Challenge field changed to "field_parent_challenge" for consistency with Challenge Subpage content type
• Created a URL link field (field_url)
• Renamed Department field to Source

The PRESS content type on the dev site should be removed (I can't seem to delete it)

Proposed revisions to the News page: Chris prepared a mock-up: https://loogart.github.io/impact-canada/news.html#

Notable changes to the page:

• Simplified (no body text shown)
• Parent Challenge instead of department should be shown
• The Published Date is simplified
• No longer a 'read more' button
• smaller tiles

We would like the user to be redirected to whatever URL is entered in the field_url field (whether they click the image or the title). We'd also like to limit the length of the title and add "..." in the event it exceeds 3/4 lines in the compressed view.

Chris has is set to change to 2 and then 1 column as the window is resized.

[djsutter]

I updated the news template on the dev site. You will see that the layout breaks because it's not doing equal heights. Even if we trim the title length, it won't fix it. BTW for trim length we need #chars. Suggest we might want to try flex layout with fixed-width cards.

[loogart]

@djsutter i can redesign with flexbox. but i don't understand the diff between the html prototype i created and the dev site. I assume you updated the css as well since it looks the same. Sometimes the web has a way of hurting my brain.

[djsutter]

Yours will do the same if you make the titles longer

[djsutter]

And yes my brain still hurting from a drupal experience earlier in the day!

[loogart]

which browser are you on ? because i might be using a webkit technique to trim the text

[djsutter]

Firefox

[loogart]

yessss, so i didnt account for that. My bad. I think it's the webkit-specific property -webkit-line-clamp: 1; which doesn't work on Mozilla. Let me go back to the drawing board

[loogart]

@djsutter actually, i you add the wet css class to the parent div row news-cards wb-eqht it should work. I took it out, but just add the wb-eqht. let me know!

[djsutter]

I did try that. All the cards went really thin.

[loogart]

ill look into it

[loogart]

@djsutter here is the fix, works on all browsers. I updated the css which you can pull. the main code to update is the p.department and the h2.

&#newsContent {
        .news-cards {
            a {
                text-decoration: none;
            }

            img {
                margin-bottom: $space-md;
                object-fit: cover;
                width: 100%;
                height: 190px;
            }

            p.department {
                color: $red;
                font-weight: 500;
                margin-bottom: $space-sm;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            h2 {
                margin-bottom: $space-sm;
                color: $navy-blue;
                margin-top: 0;
                font-size: 1.25em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            p.small {
                color: slategray;
                font-weight: 500;
            }
        }

[djsutter]

I think you nailed that sucker! Check it out...

[loogart]

Looks good to me!