ashpie/swaf
1
0
Fork 0
Code Issues 22 Pull Requests Releases 11 Wiki Activity

data-table: add data-table-container to overflow-x scroll, use it on relevant pages

Browse Source
This commit is contained in:
Alice Gaudon 2021-11-09 19:27:33 +01:00
parent 5336940dc3
commit 7650238183
4 changed files with 56 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/scss/data-table.scss
View File

@ -24,3 +24,8 @@
background-color: transparent; background-color: transparent;
} }
} }
.data-table-container {
overflow-x: auto;
max-width: 100%;
}

82
src/assets/views/auth/account/account.svelte
View File

@ -41,49 +41,51 @@
<section class="panel"> <section class="panel">
<h2 id="emails"><i data-feather="shield"></i> Email addresses</h2> <h2 id="emails"><i data-feather="shield"></i> Email addresses</h2>
<table class="data-table"> <div class="data-table-container">
<thead> <table class="data-table">
<tr> <thead>
<th>Type</th> <tr>
<th>Address</th> <th>Type</th>
<th>Actions</th> <th>Address</th>
</tr> <th>Actions</th>
</thead> </tr>
</thead>
<tbody> <tbody>
{#each emails as email} {#each emails as email}
{#if email.id === $locals.user.main_email_id} {#if email.id === $locals.user.main_email_id}
<tr> <tr>
<td>Main</td> <td>Main</td>
<td>{email.email}</td> <td>{email.email}</td>
<td></td> <td></td>
</tr> </tr>
{/if} {/if}
{/each} {/each}
{#each emails as email} {#each emails as email}
{#if email.id !== $locals.user.main_email_id} {#if email.id !== $locals.user.main_email_id}
<tr> <tr>
<td>Secondary</td> <td>Secondary</td>
<td>{email.email}</td> <td>{email.email}</td>
<td class="actions"> <td class="actions">
<Form action={$locals.route('set-main-email')} button <Form action={$locals.route('set-main-email')} button
submitIcon="refresh-ccw" submitText="Set as main address" submitClass="warning" submitIcon="refresh-ccw" submitText="Set as main address" submitClass="warning"
confirm="Are you sure you want to set {email.email} as your main address?"> confirm="Are you sure you want to set {email.email} as your main address?">
<Field type="hidden" name="id" value={email.id}/> <Field type="hidden" name="id" value={email.id}/>
</Form> </Form>
<Form action={$locals.route('remove-email')} button <Form action={$locals.route('remove-email')} button
submitIcon="trash" submitText="Remove" submitClass="danger" submitIcon="trash" submitText="Remove" submitClass="danger"
confirm="Are you sure you want to delete {email.email}?"> confirm="Are you sure you want to delete {email.email}?">
<Field type="hidden" name="id" value={email.id}/> <Field type="hidden" name="id" value={email.id}/>
</Form> </Form>
</td> </td>
</tr> </tr>
{/if} {/if}
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div>
<Form action={$locals.route('add-email')} class="sub-panel" <Form action={$locals.route('add-email')} class="sub-panel"
submitIcon="plus" submitText="Add email address"> submitIcon="plus" submitText="Add email address">

2
src/assets/views/backend/accounts_approval.svelte
View File

@ -25,7 +25,7 @@
<Pagination pagination={$locals.pagination} routeName="accounts-approval" contextSize="3" /> <Pagination pagination={$locals.pagination} routeName="accounts-approval" contextSize="3" />
<div class="panel"> <div class="panel data-table-container">
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>

14
test/assets/views/AllTests.svelte
View File

@ -14,16 +14,18 @@
<div class="render-mode">{$locals.isPreRender ? 'SSR' : 'CSR'}</div> <div class="render-mode">{$locals.isPreRender ? 'SSR' : 'CSR'}</div>
<table> <div class="data-table-container">
<thead> <table class="data-table">
<thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Expected value</th> <th>Expected value</th>
<th>Actual value</th> <th>Actual value</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<LocalsTest/> <LocalsTest/>
</tbody> </tbody>
</table> </table>
</div>