GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-23 00:12:25 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Fix padding and alignment inside revlog table (#1576)

Browse source 
* Use nested tables in revlog

This allows for centered rows, while still preserving internal
alignment.

* Fix hidden columns

* Replace inner tables with flexbox divs

* Replace revlog table with flexbox divs

* Replace flex-gap in revlog

Unsupported on iOS and Qt5.
This commit is contained in:
RumovZ 2022-01-10 03:50:48 +01:00 committed by GitHub
parent 81cc5a0914
commit 1cee864875
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 90 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
ts/card-info/Revlog.svelte
View file

@ -77,47 +77,100 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
{#if revlog.length > 0} {#if revlog.length > 0}
<table class="revlog-table"> <div class="revlog-table">
<tr> <div class="column">
<th class="left">{tr2.cardStatsReviewLogDate()}</th> <div class="column-head">{tr2.cardStatsReviewLogDate()}</div>
<th class="center hidden-xs">{tr2.cardStatsReviewLogType()}</th> <div class="column-content">
<th class="center">{tr2.cardStatsReviewLogRating()}</th> {#each revlogRows as row, _index}
<th class="right">{tr2.cardStatsInterval()}</th> <div><b>{row.date}</b> @ {row.time}</div>
<th class="center hidden-xs">{tr2.cardStatsEase()}</th> {/each}
<th class="right">{tr2.cardStatsReviewLogTimeTaken()}</th> </div>
</tr> </div>
{#each revlogRows as row, _index} <div class="column hidden-xs">
<tr> <div class="column-head">{tr2.cardStatsReviewLogType()}</div>
<td class="left"><b>{row.date}</b> @ {row.time}</td> <div class="column-content">
<td class="center hidden-xs {row.reviewKindClass}"> {#each revlogRows as row, _index}
{row.reviewKind} <div class={row.reviewKindClass}>
</td> {row.reviewKind}
<td class="center {row.ratingClass}">{row.rating}</td> </div>
<td class="right">{row.interval}</td> {/each}
<td class="center hidden-xs">{row.ease}</td> </div>
<td class="right">{row.takenSecs}</td> </div>
</tr> <div class="column">
{/each} <div class="column-head">{tr2.cardStatsReviewLogRating()}</div>
</table> <div class="column-content">
{#each revlogRows as row, _index}
<div class={row.ratingClass}>{row.rating}</div>
{/each}
</div>
</div>
<div class="column">
<div class="column-head">{tr2.cardStatsInterval()}</div>
<div class="column-content right">
{#each revlogRows as row, _index}
<div>{row.interval}</div>
{/each}
</div>
</div>
<div class="column hidden-xs">
<div class="column-head">{tr2.cardStatsEase()}</div>
<div class="column-content">
{#each revlogRows as row, _index}
<div>{row.ease}</div>
{/each}
</div>
</div>
<div class="column">
<div class="column-head">{tr2.cardStatsReviewLogTimeTaken()}</div>
<div class="column-content right">
{#each revlogRows as row, _index}
<div>{row.takenSecs}</div>
{/each}
</div>
</div>
</div>
{/if} {/if}
<style> <style lang="scss">
.left {
text-align: start;
}
.right {
text-align: end;
}
.center {
text-align: center;
}
.revlog-table { .revlog-table {
width: 100%; width: 100%;
border-spacing: 1em 0; max-width: 50em;
border-collapse: collapse; display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
white-space: nowrap;
}
.column {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&:not(:last-child) {
margin-right: 0.5em;
}
}
.column-head {
font-weight: bold;
}
.column-content {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.right {
align-items: flex-end;
}
> div:empty::after {
/* prevent collapsing of empty rows */
content: "\00a0";
}
} }
.revlog-learn { .revlog-learn {