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[]; export let preview: Generic.StringList[];
</script> </script>
<table id="preview"> <div class="outer">
{#each columnOptions.slice(1) as { label }} <table class="preview">
<th> {#each columnOptions.slice(1) as { label }}
{label} <th>
</th> {label}
{/each} </th>
{#each preview as row} {/each}
<tr> {#each preview as row}
{#each row.vals as cell} <tr>
<td>{cell}</td> {#each row.vals as cell}
{/each} <td>{cell}</td>
</tr> {/each}
{/each} </tr>
</table> {/each}
</table>
</div>
<style lang="scss"> <style lang="scss">
#preview { .outer {
// approximate size based on body max width + margins
width: min(90vw, 65em);
overflow: auto;
}
.preview {
border-collapse: collapse; border-collapse: collapse;
width: 100%;
white-space: nowrap; white-space: nowrap;
th, th,
td { td {
text-overflow: ellipsis;
overflow: hidden;
border: 1px solid var(--faint-border); border: 1px solid var(--faint-border);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
max-width: 15em;
} }
th { th {