search

tjikko-studio / components

Component library for Tjikko Studio apps
0 stars 0 forks source link

Improve the tertiary block component layout when there are three horizontal blocks with longer titles #221

Closed miherb closed 2 years ago

miherb commented 2 years ago

I don't if it was here we should work on that, but I assume it's a component task

Screen Shot 2021-11-06 at 5 17 17 PM
miherb commented 2 years ago

Also the tertiary media space looks much bigger than in the mockups where we could place 4 blocks.

Screen Shot 2021-11-06 at 5 21 59 PM

ktryndchrs commented 2 years ago

Yeah, this one is a little tricky… @shawninder … Any idea to prevent this layouting issue?

shawninder commented 2 years ago

For the 3 vs 4 columns thing, a simple resize should do. As for the headers with multiple lines, I think we might need a solution similar to what I put in place for the forms, using a grid.

Example: https://codepen.io/shawninder/pen/XWaqXMJ?editors=1100 The semantics are horrible, there is more to do to standardize widths, and the CSS could be shorter (perhaps using counters?) but this illustrates the idea that the height of any heading influences the height of its siblings because they are in the same row of the grid… Another approach might be using display: table-cell or I forget the exact thing…

miherb commented 2 years ago

For now, we can play with the text content to make sure everything is on the same line

ktryndchrs commented 2 years ago

Grid is a fantastic way to do it when your blocks are all the same (here they are a component called three time) My best advice remain a wording what make things fits together

shawninder commented 2 years ago

Indeed. Here's another version that seems to work (to my surprise) using display: inline-block

https://codepen.io/shawninder/pen/WNEyyyN?editors=0100

Of course only aligning vertically to the bottom works here, aligning to the middle or top is just as problematic as ever…