The blue row is only shown on hover (I took the color from dae’s profile picture).
The revlog (second) table should look more like the first (regarding the borders and maybe text alignment as well).
The styles are largely copied from the deck options screen. See CSS below.
Blockers
I’ve got a working prototype, but to make this work properly I’d have to modify the html code. This is the only way I see to make the styling better, which in this case actually means making the styling consistent.
E.g. the second “table” (revlog) doesn’t apply the dashed border like in the first table. The reason is that the revlog table consists of a lot of divs, rather than an actual html table.
This means dae might not accept it.
ToDos (in case changes were accepted)
Fix card stats table, so that it could be centered, if desired.
Fix revlog “table”, to make it an actual html table (which would fix the styling, which is way off currently).
CSS
I don’t have a PR for you to test. But if you use the dev console addon, you can add the following css to achieve my proposed design:
/* TABLE AT THE TOP (CardStats.svelte) */
:root {
--anki-color: #01bcff;
}
.row {
margin-bottom: 2rem;
justify-content: center;
overflow:hidden; /* Hack. Wrapping the table around a second div would be better. Needed, because the dashed lines otherwise overflow. */
/* Styles below have been copied from the deck options styles */
box-shadow: 0 3px 3px -2px #14141433, 0 3px 4px #14141424, 0 1px 8px #1414141f;
background: var(--canvas-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-medium, 10px);
padding: 1rem 1.75rem 0.75rem 1.25rem;
}
.stats-table {
margin: 1.5rem 2.5rem;
border-collapse: separate;
}
th, td {
padding: 0.25em 0;
}
tr:hover {
background-color: var(--anki-color);
}
tr:nth-child(4n):not(:last-child) {
border-bottom: 2px dashed #ccc;
}
/* TABLE IN THE MIDDLE (Revlog.svelte) */
/*
* Note: This isn't a real table, just a bunch of divs that look like a table.
* This does break styling though. If this change would be accepted, and dae
* would accept rewriting the divs into a table, the styling issues will be
* fixed. It was supposed to look like the first table.
*/
.revlog-table {
margin: 1.5rem 2.5rem;
}
.column-content, .column-content > div {
padding: 0.25em 0;
}
.column-content > div:hover {
background-color: var(--anki-color);
}
.column-content > div:nth-child(4n):not(:last-child) {
border-bottom: 2px dashed #ccc;
}
/* FORGETTING CURVE AT THE BOTTOM (ForgettingCurve.svelte) */
.forgetting-curve {
margin: 1.5rem 2.5rem !important;
}
.forgetting-curve > div.container {
box-shadow: none !important;
border: 0;
border-radius: initial;
padding: 0;
}
The highlighting/emphasis lines seem strange to me.
I don’t know what purpose is served by having the blue-on-hover in the top info. [I expect you could find a color that blends better with the interface – maybe the hover-color from the menus or the Decks list? Or something from Stats?]
Similarly, I don’t know what purpose is served by having the dotted underline in the revlog section. [Is that also on-hover?]
The division of the top info into sections/bands seems to be done haphazardly. I’m not sure it’s necessary at all, but if it’s going to be happen, the divisions should make sense (i.e., like with like).
As far as everything else – I don’t know what is gained by making this page prettier or more animated, since it’s in the “most users will never see it” category. But if it doesn’t hurt anything [make sure it works well with Reduce motion, Minimalist mode, and Dark Theme] and it doesn’t make support more difficult, I’ll just be “meh” about it.
I think max-height is useful for the revlog table, given there’s forgetting curve after it now. If you have too many reviews (which some of us do, think filtered reviews), this takes too much space.
I think that could be great from a usability perspective. But it might make things more difficult for support (users are sometimes asked to make screenshots of this list). I’m assuming there’s more margin for error, if users for some reason don’t realize it’s scrollable.
I just don’t want to work on something that’ll be rejected anyways. So far, this topic received 3 votes against and 0 votes for the changes (or similar changes) I proposed.
But if there’s some demand in the future, I’d gladly pick this up.
Another potential issue with the card info window is cards with a really long history. It’s quite annoying having to scroll down pages every time I want to see the chart.
Some discussion here, before I knew about this thread. I think a more general solution is better than my proposed “fix”.
A scrollable container within a scrollable page doesn’t seem like it’d be pleasant to use. Perhaps an alternative would be to crop the revlog and add “Show more” at the bottom to expand it fully
