search

canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
821 stars 166 forks source link

Equal height row 50-50 split #5292

Open petesfrench opened 1 month ago

petesfrench commented 1 month ago

Component/pattern to amend

p-equal-height-row

Visual

Currently (09/08/24) this is still in development, but should be live at https://ubuntu.com/azure/sql shortly image

Currently this is being achieved with some fairly basic inline styling: https://github.com/canonical/ubuntu.com/pull/14159/files#diff-16fd2f7f033564bcb20aa492f48eb2ead58f0a3c262579f799159544ea7bbf1dR170

Context

In what context does your amendment solve a problem?

syncronize-issues-to-jira[bot] commented 1 month ago

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-14073.

This message was autogenerated

bartaz commented 1 month ago

I guess we would need wait for @lyubomir-popov do decide if it should be replaced by something or do we need another variant of equal heights… There are already a quite a few of them…

pastelcyborg commented 1 month ago

In addition to @bartaz comment, this is somewhat similar to #5276, which adds a new wrapped variant of the Equal Height Row component, effectively achieving a 50/50 split at medium screen sizes. I'm curious how extending this 50/50 split (and/or wrapping columns in this manner) would extend to large screen sizes, and how such a variant would be named to differentiate the two.

dgtlntv commented 3 weeks ago

Vanilla WG: As @pastelcyborg linked above there is an update coming out soon to the equal height row component. Does that solve your problem? If not more context on the needs of your update are required.

petesfrench commented 3 weeks ago

I tried to look at the brunch that I made this request for but the demo is not rebuilding and I don't have time to look into why (also it is not my branch. However, this doesn't appear to address the problem highlighted. The need here is for a 2-column equal height component on large screens.

pastelcyborg commented 3 weeks ago

We may need a larger conversation about Equal Height Row in general, as this component has seen updates/changes from a few disparate sources now and it'd be nice to align on all the possible variants. @lyubomir-popov thoughts?