improve width of links in tables

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
This commit is contained in:
Ronni Skansing
2025-09-21 15:27:18 +02:00
parent bb51d36ae5
commit f1c9cef492
17 changed files with 96 additions and 52 deletions
@@ -0,0 +1,13 @@
<script>
export let href;
export let title = '';
</script>
<td
class="pl-4 font-regular text-slate-600 dark:text-gray-300 text-ellipsis whitespace-nowrap overflow-hidden pr-4 transition-colors duration-200"
{title}
>
<a href={href} class="block w-full py-1">
<slot />
</a>
</td>
@@ -9,7 +9,7 @@
{#if disabled}
<button
class="px py text-slate-300 dark:text-gray-500 cursor-not-allowed transition-colors duration-200"
class="w-full px py text-slate-300 dark:text-gray-500 cursor-not-allowed text-left transition-colors duration-200"
{disabled}
{title}
>
@@ -17,7 +17,7 @@
</button>
{:else}
<button
class="px py-1 text-slate-600 dark:text-gray-300 hover:bg-red-400 dark:hover:bg-red-500 hover:text-white cursor-pointer transition-colors duration-200"
class="w-full px py-1 text-slate-600 dark:text-gray-300 hover:bg-red-400 dark:hover:bg-red-500 hover:text-white cursor-pointer text-left transition-colors duration-200"
on:click
{title}
>
@@ -17,7 +17,7 @@
{#if disabled}
<button
class="px py-1 text-slate-300 dark:text-gray-500 cursor-not-allowed transition-colors duration-200"
class="w-full px py-1 text-slate-300 dark:text-gray-500 cursor-not-allowed text-left transition-colors duration-200"
{disabled}
{title}
>
@@ -25,7 +25,7 @@
</button>
{:else}
<button
class="px py-1 text-slate-600 dark:text-gray-300 hover:bg-highlight-blue dark:hover:bg-blue-600 hover:text-white cursor-pointer transition-colors duration-200"
class="w-full px py-1 text-slate-600 dark:text-gray-300 hover:bg-highlight-blue dark:hover:bg-blue-600 hover:text-white cursor-pointer text-left transition-colors duration-200"
on:click
on:keydown={handleKeydown}
{title}
@@ -322,6 +322,7 @@
}}
{...globalButtonDisabledAttributes(apiSender, contextCompanyID)}
title={apiSender.name}
class="block w-full py-1 text-left"
>
{apiSender.name}
</button>
@@ -261,6 +261,7 @@
}}
{...globalButtonDisabledAttributes(attachment, contextCompanyID)}
title={attachment.name}
class="block w-full py-1 text-left"
>
{attachment.name}
</button>
@@ -274,6 +275,7 @@
}}
{...globalButtonDisabledAttributes(attachment, contextCompanyID)}
title={attachment.name}
class="block w-full py-1 text-left"
>
{attachment.description}
</button>
@@ -287,6 +289,7 @@
}}
{...globalButtonDisabledAttributes(attachment, contextCompanyID)}
title={attachment.name}
class="block w-full py-1 text-left"
>
{attachment.fileName}
</button>
@@ -7,6 +7,7 @@
import TextField from '$lib/components/TextField.svelte';
import TableRow from '$lib/components/table/TableRow.svelte';
import TableCell from '$lib/components/table/TableCell.svelte';
import TableCellLink from '$lib/components/table/TableCellLink.svelte';
import TableUpdateButton from '$lib/components/table/TableUpdateButton.svelte';
import TableDeleteButton from '$lib/components/table/TableDeleteButton2.svelte';
import TableCellAction from '$lib/components/table/TableCellAction.svelte';
@@ -473,62 +474,70 @@
on:click={() => openUpdateModal(template.id)}
{...globalButtonDisabledAttributes(template, contextCompanyID)}
title={template.name}
class="block w-full py-1 text-left"
>
{template.name}
</button>
</TableCell>
<TableCell>
{#if template.domainID}
<a href={`/domain/?edit=${template.domainID}`}>
<a href={`/domain/?edit=${template.domainID}`} class="block w-full py-1">
{domainMap.byKey(template.domainID)}
</a>
{/if}
</TableCell>
<TableCell>
{#if template.smtpConfigurationID}
<a href={`/smtp-configuration/?edit=${template.smtpConfigurationID}`}>
<a
href={`/smtp-configuration/?edit=${template.smtpConfigurationID}`}
class="block w-full py-1"
>
{smtpConfigurationMap.byKey(template.smtpConfigurationID)}
</a>
{/if}
</TableCell>
<TableCell>
{#if template.apiSenderID}
<a href={`/api-sender/?edit=${template.apiSenderID}`}>
<a href={`/api-sender/?edit=${template.apiSenderID}`} class="block w-full py-1">
{apiSenderMap.byKey(template.apiSenderID)}
</a>
{/if}
</TableCell>
<TableCell>
{#if template.emailID}
<a href={`/email/?edit=${template.emailID}`}>
<a href={`/email/?edit=${template.emailID}`} class="block w-full py-1">
{emailMap.byKey(template.emailID)}
</a>
{/if}
</TableCell>
<TableCell>
{#if template.beforeLandingPageID}
<a href={`/page/?edit=${template.beforeLandingPageID}`}>
<a href={`/page/?edit=${template.beforeLandingPageID}`} class="block w-full py-1">
{beforeLandingPageMap.byKey(template.beforeLandingPageID)}
</a>
{/if}
</TableCell>
<TableCell>
{#if template.landingPageID}
<a href={`/page/?edit=${template.landingPageID}`}>
<a href={`/page/?edit=${template.landingPageID}`} class="block w-full py-1">
{landingPageMap.byKey(template.landingPageID)}
</a>
{/if}
</TableCell>
<TableCell>
{#if template.afterLandingPageID}
<a href={`/page/?edit=${template.afterLandingPageID}`}>
<a href={`/page/?edit=${template.afterLandingPageID}`} class="block w-full py-1">
{afterLandingPageMap.byKey(template.afterLandingPageID)}
</a>
{/if}
</TableCell>
<TableCell>
{#if template.afterLandingPageRedirectURL}
<a href={`${template.afterLandingPageRedirectURL}`} target="_blank">
<a
href={`${template.afterLandingPageRedirectURL}`}
target="_blank"
class="block w-full py-1"
>
{template.afterLandingPageRedirectURL}
</a>
{/if}
+10 -10
View File
@@ -8,6 +8,7 @@
import TextField from '$lib/components/TextField.svelte';
import TableRow from '$lib/components/table/TableRow.svelte';
import TableCell from '$lib/components/table/TableCell.svelte';
import TableCellLink from '$lib/components/table/TableCellLink.svelte';
import TableUpdateButton from '$lib/components/table/TableUpdateButton.svelte';
import TableDeleteButton from '$lib/components/table/TableDeleteButton2.svelte';
import { addToast } from '$lib/store/toast';
@@ -994,22 +995,21 @@
>
{#each campaigns as campaign}
<TableRow>
<TableCell>
<TableCellLink href={`/campaign/${campaign.id}`} title={campaign.name}>
{#if campaign.isTest}
<TestLabel />
{/if}
<a href={`/campaign/${campaign.id}`}>
{campaign.name}
</a>
</TableCell>
{campaign.name}
</TableCellLink>
<TableCell>
{toEvent(campaign.notableEventName).name}
</TableCell>
<TableCell>
<a href={`/campaign-template/?edit=${campaign.templateID}`}>
{templateMap.byKey(campaign.templateID)}
</a>
</TableCell>
<TableCellLink
href={`/campaign-template/?edit=${campaign.templateID}`}
title={templateMap.byKey(campaign.templateID)}
>
{templateMap.byKey(campaign.templateID)}
</TableCellLink>
<TableCell value={campaign.sendStartAt} isDate isRelative />
<TableCell value={campaign.sendEndAt} isDate isRelative />
<TableCell value={campaign.closeAt ?? ''} isDate isRelative />
+16 -6
View File
@@ -10,6 +10,7 @@
import { AppStateService } from '$lib/service/appState';
import TableRow from '$lib/components/table/TableRow.svelte';
import TableCell from '$lib/components/table/TableCell.svelte';
import TableCellLink from '$lib/components/table/TableCellLink.svelte';
import { formatWeekDays, formatTimeConstraint, timeFormat } from '$lib/utils/date.js';
import {
defaultPerPage,
@@ -1362,21 +1363,21 @@
<TableCell isDate value={event.createdAt} />
<TableCell>
{#if event.recipient?.firstName}
<a href={`/recipient/${event.recipient.id}`}>
<a href={`/recipient/${event.recipient.id}`} class="block w-full py-1">
{event.recipient.firstName}
</a>
{/if}
</TableCell>
<TableCell>
{#if event.recipient?.lastName}
<a href={`/recipient/${event.recipient.id}`}>
<a href={`/recipient/${event.recipient.id}`} class="block w-full py-1">
{event.recipient.lastName}
</a>
{/if}
</TableCell>
<TableCell>
{#if event.recipient?.email}
<a href={`/recipient/${event.recipient.id}`}>
<a href={`/recipient/${event.recipient.id}`} class="block w-full py-1">
{event.recipient.email}
</a>
{/if}
@@ -1430,18 +1431,27 @@
<TableCell value={'anonymized'} />
{:else}
<TableCell>
<button on:click={() => openEventsModal(recp.recipientID)}>
<button
on:click={() => openEventsModal(recp.recipientID)}
class="block w-full py-1 text-left"
>
{recp.recipient.firstName}
</button>
</TableCell>
<TableCell>
<button on:click={() => openEventsModal(recp.recipientID)}>
<button
on:click={() => openEventsModal(recp.recipientID)}
class="block w-full py-1 text-left"
>
{recp.recipient.lastName}
</button>
</TableCell>
<TableCell>
{#if recp?.recipient?.email}
<button on:click={() => openEventsModal(recp.recipientID)}>
<button
on:click={() => openEventsModal(recp.recipientID)}
class="block w-full py-1 text-left"
>
{recp.recipient.email}
</button>
{/if}
+1
View File
@@ -246,6 +246,7 @@
on:click={() => {
openUpdateModal(company.id);
}}
class="block w-full py-1 text-left"
>
{company.name}
</button>
+2
View File
@@ -10,6 +10,7 @@
import CheckboxField from '$lib/components/CheckboxField.svelte';
import TableRow from '$lib/components/table/TableRow.svelte';
import TableCell from '$lib/components/table/TableCell.svelte';
import TableCellLink from '$lib/components/table/TableCellLink.svelte';
import TableUpdateButton from '$lib/components/table/TableUpdateButton.svelte';
import TableDeleteButton from '$lib/components/table/TableDeleteButton2.svelte';
import { addToast } from '$lib/store/toast';
@@ -538,6 +539,7 @@
}}
{...globalButtonDisabledAttributes(domain, contextCompanyID)}
title={domain.name}
class="block w-full py-1 text-left"
>
{domain.name}
</button>
+2
View File
@@ -8,6 +8,7 @@
import Headline from '$lib/components/Headline.svelte';
import TextField from '$lib/components/TextField.svelte';
import TableCell from '$lib/components/table/TableCell.svelte';
import TableCellLink from '$lib/components/table/TableCellLink.svelte';
import TableRow from '$lib/components/table/TableRow.svelte';
import TableUpdateButton from '$lib/components/table/TableUpdateButton.svelte';
import TableDeleteButton from '$lib/components/table/TableDeleteButton2.svelte';
@@ -394,6 +395,7 @@
}}
{...globalButtonDisabledAttributes(email, contextCompanyID)}
title={email.name}
class="block w-full py-1 text-left"
>
{email.name}
</button>
+2
View File
@@ -8,6 +8,7 @@
import TextField from '$lib/components/TextField.svelte';
import TableRow from '$lib/components/table/TableRow.svelte';
import TableCell from '$lib/components/table/TableCell.svelte';
import TableCellLink from '$lib/components/table/TableCellLink.svelte';
import TableUpdateButton from '$lib/components/table/TableUpdateButton.svelte';
import TableDeleteButton from '$lib/components/table/TableDeleteButton2.svelte';
import FormError from '$lib/components/FormError.svelte';
@@ -315,6 +316,7 @@
}}
{...globalButtonDisabledAttributes(page, contextCompanyID)}
title={page.name}
class="block w-full py-1 text-left"
>
{page.name}
</button>
+6 -5
View File
@@ -7,6 +7,7 @@
import TextField from '$lib/components/TextField.svelte';
import TableRow from '$lib/components/table/TableRow.svelte';
import TableCell from '$lib/components/table/TableCell.svelte';
import TableCellLink from '$lib/components/table/TableCellLink.svelte';
import TableUpdateButton from '$lib/components/table/TableUpdateButton.svelte';
import TableDeleteButton from '$lib/components/table/TableDeleteButton2.svelte';
import { addToast } from '$lib/store/toast';
@@ -406,19 +407,18 @@
>
{#each recipients as recipient}
<TableRow>
<TableCell>
<TableCellLink href={`/recipient/${recipient.id}`} title={recipient.email}>
{#if recipient.email}
<a href={`/recipient/${recipient.id}`}>
{recipient.email}
</a>
{recipient.email}
{/if}
</TableCell>
</TableCellLink>
<TableCell>
{#if recipient.firstName}
<button
on:click={() => {
openUpdateModal(recipient.id);
}}
class="block w-full py-1 text-left"
>
{recipient.firstName}
</button>
@@ -430,6 +430,7 @@
on:click={() => {
openUpdateModal(recipient.id);
}}
class="block w-full py-1 text-left"
>
{recipient.lastName}
</button>
@@ -8,6 +8,7 @@
import TextField from '$lib/components/TextField.svelte';
import TableRow from '$lib/components/table/TableRow.svelte';
import TableCell from '$lib/components/table/TableCell.svelte';
import TableCellLink from '$lib/components/table/TableCellLink.svelte';
import TableUpdateButton from '$lib/components/table/TableUpdateButton.svelte';
import TableDeleteButton from '$lib/components/table/TableDeleteButton2.svelte';
import { addToast } from '$lib/store/toast';
@@ -232,17 +233,13 @@
>
{#each groups as group}
<TableRow>
<TableCell>
<a href={`/recipient/group/${group.id}`}>
{group.name}
</a>
</TableCell>
<TableCellLink href={`/recipient/group/${group.id}`} title={group.name}>
{group.name}
</TableCellLink>
<TableCell>
<a href={`/recipient/group/${group.id}`}>
{group.recipientCount}
</a>
</TableCell>
<TableCellLink href={`/recipient/group/${group.id}`} title={group.recipientCount}>
{group.recipientCount}
</TableCellLink>
<TableCellEmpty />
<TableCellAction>
<TableDropDownEllipsis>
@@ -9,6 +9,7 @@
import SubHeadline from '$lib/components/SubHeadline.svelte';
import TableRow from '$lib/components/table/TableRow.svelte';
import TableCell from '$lib/components/table/TableCell.svelte';
import TableCellLink from '$lib/components/table/TableCellLink.svelte';
import { addToast } from '$lib/store/toast';
import FormError from '$lib/components/FormError.svelte';
import TableCellEmpty from '$lib/components/table/TableCellEmpty.svelte';
@@ -391,16 +392,16 @@
{#each recipients as recipient}
<TableRow>
<TableCell value={recipient.email} />
<TableCell>
<a href="/recipient/{recipient.id}">{recipient.firstName}</a>
</TableCell>
<TableCell>
<a href="/recipient/{recipient.id}">{recipient.lastName}</a>
</TableCell>
<TableCellLink href="/recipient/{recipient.id}" title={recipient.firstName}>
{recipient.firstName}
</TableCellLink>
<TableCellLink href="/recipient/{recipient.id}" title={recipient.lastName}>
{recipient.lastName}
</TableCellLink>
<TableCell value={recipient.phone} />
<TableCell>
<a href="/recipient/{recipient.id}">{recipient.extraIdentifier}</a>
</TableCell>
<TableCellLink href="/recipient/{recipient.id}" title={recipient.extraIdentifier}>
{recipient.extraIdentifier}
</TableCellLink>
<TableCell value={recipient.position} />
<TableCell value={recipient.department} />
<TableCell value={recipient.city} />
@@ -441,6 +441,7 @@
}}
{...globalButtonDisabledAttributes(conf, contextCompanyID)}
title={conf.name}
class="block w-full py-1 text-left"
>
{conf.name}
</button>
+1
View File
@@ -263,6 +263,7 @@
on:click={() => {
showEditModal(user.id);
}}
class="block w-full py-1 text-left"
>
{user.username}
</button></TableCell