[FEATURE] Compact sized timeline cards

[DianaProbst]

Is your feature request related to a problem? Please describe. I would like to be able to change the heights/sizes of timeline cards, and have the coloured lines stay in sync.

Describe the solution you'd like Ideally, I'd be able to change the css and have calculation happen automatically, so I could define the height of headers, the padding, and so on, and still have the timeline colour strips be the right size. That sounds like a horrible amount of work though.

Describe alternatives you've considered Currently I'm just using css to set the display property of the strips to none. I know that's not viable for some people, and I'd like to be able to see them. Having a compact view which has a smaller title, less padding/margin, and potentially smaller text would be a possibility, and that looks like it's the least work and keeps calculations workable. There could also be a css manager where you can choose/toggle sizes, in aat settings.

Additional context Demo of the lengths being out of sync.

I appreciate this is probably a lot of work for a niche case, so I'm fine with thanks, but no thanks.

[April-Gras]

Wouldn't overcharging the classes that make up the cards do the trick tho ? The gutter bars are computed based on the end positions and heights of the cards so there's no reason it couldn't be done as is already

[DianaProbst]

At this point, you're beyond my technical ability, I'm afraid. The way you say it, I think the answer has to be yes - gutter bars based on height should be easily calculable, but I do not know the magic to intone. Is that a css class? Currently the computing is out, which made me think it was buried deeper in the code, and There Be TypeScript.

[DianaProbst]

Hmm. OK, I read what you said for comprehension rather than confusion. It may be that I have an example of timeline gutters not calculating properly, as when I took out the display:none; I ended up with a different look from the screenshot I took, without having altered anything else. I might also have just shaken something loose by quiting and restarting. So I think this isn't an issue, it just looked like one.

If my timelines continue to be weird, I'll add a trimmed version of them to the thread about gutters.

[ThinkWithPbody]

I'm hoping to make the cards more compact too but I'm not familiar with the css classes. What exactly do I need to do to customize their paddings?

[DianaProbst]

Open Obsidian and hit Settings, lower left.

Choose Appearance on the left and scroll down to CSS Snippets at the bottom.

Open the snippets folder and create a snippet for april's timelines.

I have:

h2.aat-card-title {
    font-size: 20px;
}

.aat-card-body p {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 16px;
}

div.aat-card-text-wraper {
    gap: 8px;
}

[DianaProbst]

Added: if you press Ctrl-Shift-i (you might need to use the Ctrl or the Shift on the right-hand side of your keyboard) then you'll get the Developer tab up. You can use that (choose the elements tab) to inspect the screen. You might have to pull it out really wide because it starts stuck on the side of Obsidian.

That's what I used to work out which bits of the HTML to address. After that, you can use whatever css you like.