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

Experimental changes to make table fit+scroll

Browse source 
- limit individual cells to 15em, and show ellipses when truncated
- limit total table width to body width, so that inner table is shown
with scrollbar
- use class rather than id - ids are bad practice in Svelte components,
as more than one may be displayed on a single page
This commit is contained in:
Damien Elmes 2022-06-06 14:42:58 +10:00
parent 74af380d32
commit 053ce82588
1 changed files with 26 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
ts/import-csv/Preview.svelte
View file

@ -10,31 +10,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let preview: Generic.StringList[];
</script>
<table id="preview">
{#each columnOptions.slice(1) as { label }}
<th>
{label}
</th>
{/each}
{#each preview as row}
<tr>
{#each row.vals as cell}
<td>{cell}</td>
{/each}
</tr>
{/each}
</table>
<div class="outer">
<table class="preview">
{#each columnOptions.slice(1) as { label }}
<th>
{label}
</th>
{/each}
{#each preview as row}
<tr>
{#each row.vals as cell}
<td>{cell}</td>
{/each}
</tr>
{/each}
</table>
</div>
<style lang="scss">
#preview {
.outer {
// approximate size based on body max width + margins
width: min(90vw, 65em);
overflow: auto;
}
.preview {
border-collapse: collapse;
width: 100%;
white-space: nowrap;
th,
td {
text-overflow: ellipsis;
overflow: hidden;
border: 1px solid var(--faint-border);
padding: 0.25rem 0.5rem;
max-width: 15em;
}
th {