Improving placement and transform for rotated items in a wheel
So I've been playing with this concept of having tasks divided into twelve months, a concept known as a year wheel. The idea is to display only a portion of it, because looking at the whole wheel gives you a headache, no matter how the text is flipped. And when you scroll, the wheel spins (scroll-driven animations). Here's my prototype: https://codepen.io/huma-erik/pen/dyxMwLK
As you can see, it works as intended, except for having each
.month align to the middle of the wheel. They do if there are two task items within .tasks, but that's just because an ugly hack with margin-block-start: -18px. Other amounts of tasks will be slightly misaligned, because their rendered heights isn't 18px * 2 (inspect the month of Nov, and you'll see). I tried using translateY(-50%) instead, but that's in conflict with items being rotated. Should I use trigonometry for this, or is there an easier approach?10 Replies
One option:
Pros: works with 1 or 2 lines of tasks.
Cons: doesn't work with more lines of tasks. However, if you have more than 2 tasks per line, it already breaks, because the size of the wheel is fixed, so...
if there's more than 1 task, just show "<n> tasks to do"
@Alex yeah, in a service, like this, I couple probably get the count for the amount of tasks and pass it in as a custom property. It's not super-smooth, but I love the suggestion!
@ἔρως yeah, that's a sort of "backend" approach to it, but I'm sure there's gotta be a math solution to it, somehow?
How many tasks are you anticipating there being per month? I think if it's more than 2 or maybe 3, this wheel is rapidly going to reach an unwieldy scale.
...that's assuming you don't consider the current version unwieldy, which, to be completely honest, I do. I think it's a cool thing to attempt, but I'd hate to use it 😛
make everything bigger
or make the font smaller
Or have some kind of placeholder icon on each month (or like epic suggested
January ###
12 tasks remaining
and when you hover over it , then it reveals the task(s); maybe a tooltip or perhaps you click/tap on it and it’s triggers the modal which lists out your tasks. If there is more than one or two tasks , embedding them in each month is going to look disorganized and overwhelming as Alex has already pointed out. And that’s the antithesis of the point you described.
Then the design nor the functionality is sacrificed.
or maybe shows one task, and says there are more tasks
So I get the feedback, I really do, but it still doesn't solve my issue. Let's say the text is naturally wrapping across two lines. I just want the placement to be correct, without having to put any fixed values in there.
This is all an experiment and me wanting to learn. Whether it's something that I'm going to implement in the real world or not has nothing to do with my challenge.
maybe this will help?
no magic numbers, no absolute positions, only used grid and placement to position everything. https://codepen.io/MarkBoots/pen/XWvKKpO
no magic numbers, no absolute positions, only used grid and placement to position everything. https://codepen.io/MarkBoots/pen/XWvKKpO
That makes so much more sense. Big thanks, Mark!