design spacing for century containers

[rlskoeser]

No description provided.

[gissoo]

@rlskoeser here are the specs for century spacing.
I propose the centuries start from 42.3-45.3px above the trunk, and be 42px apart from each other. let me know if you have thoughts on this. Here is the link to Figma

[rlskoeser]

@gissoo I did a little bit of looking at this in tandem with trying to get the svg sizing adjusted so it fits at a 1.0 scale when the page is 1280 wide. I don't think 42px is big enough, the leaves are bigger than that and don't fit very well within those bands. The leaves look too big to me on my actual implementation at that scale, and they don't fit in the layout without a lot of overlap. It looks sort of reasonable on your mockup, although I can't tell from your design which leaves belong in which century. But you only have 28 leaves on this version (I counted); I currently have 102 leaves and I haven't imported the latest version of the data yet.

Please provide spacing starting from the top of the timetree container. In your mockup they don't go all the way up to the top — I don't understand why that is. Please clarify.

I'm not sure what you mean about them starting 42-45 px above the trunk, I don't see how that works in the design you linked — but I think it is less important if you can give me spacing from the top of the container.

In the mockup you shared the century labels have a a wider left margin and the leaves go further to the edge — that is the reverse of what I would expect (labels outside of the leaves / leaves not covering over the labels).

[gissoo]

@rlskoeser thank you for this – would have been easier to talk through this at our co-working session last week – the numbers I gave you above were after factoring in the given heights of the trunk and the roots but I agree with your comments, it's creating problems on the higher end of the tree. You can see the changes I've made here on Figma and hopefully the placement of the leaves are matching the logic

I've made the following revisions:

• shortened the trunk, current height is 148.34px
• shortened the footer section, current height is 118px
• increased the spacing between the centuries, it's now 80px
• the newest century band ends at ~7px below the header at the top

let me know if these are helpful.

[gissoo]

we've made some decisions at PR #81 and at our co-working session which have changed some of the numbers above:

• in PR multiline labels + visual debug #81 we decided to shrink the width of the leaves to 24px (for desktop/pointer inputs), after trying it at our co-working session we decided to go with the width of 30px on desktop
• the height of the footer section is 130px
• the space between each century is 90px
• the footer will stick to the bottom of the tree, therefore there won't be a fixed amount of space between the latest century line and the header