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

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

View File

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

View File

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

View File

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

View File

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