Skip to content

Commit

Permalink
Merge pull request #2 from Iteam1337/ny-signatur-design
Browse files Browse the repository at this point in the history 
Uppdaterad mailfooterdesign med nya interaktiva fält
  • Loading branch information
@mull
mull authored Aug 30, 2024
2 parents 8f2fe83 + 076cc11 commit 1fa8750
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 152 deletions.
193 changes: 55 additions & 138 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,147 +1,64 @@
<script>
export const prerender = true;
let name = '';
let title = '';
let email = '';
let phone = '';
</script>

let email = 'alexander';
let name = 'Alexander Czigler';
let office = 'Göteborg';
let phone = '+46 727 14 50 60';
let title = 'Kattvakt';
<div>
<h1>Mail Signature</h1>
<h2>1. Enter your details</h2>

let otherOffice = 'Stockholm';
let officeAddress = 'Järntorgsgatan 12-14, 413 01 Göteborg';
<!-- Namn -->
<label for="name">Name:</label>
<input id="name" type="text" bind:value={name} placeholder="Förnamn Efternamn" />
<br />

const selectOffice = () => {
if (office === 'Göteborg') {
officeAddress = 'Järntorgsgatan 12-14, 413 01 Göteborg';
otherOffice = 'Stockholm';
} else {
otherOffice = 'Göteborg';
officeAddress = 'Götgatan 18, 118 46 Stockholm';
}
};
</script>
<!-- Titel -->
<label for="title"> Title:</label>
<input id="title" type="text" bind:value={title} placeholder="Yrkestitel" />
<br />

<h1>Mail Signature</h1>
<h2>1. Enter your details</h2>
<p>
Email: <input type="text" bind:value={email} />@iteam.se<br />
Name: <input type="text" bind:value={name} /><br />
Office:
<select bind:value={office} on:change={selectOffice} aria-label="office">
<option value="Göteborg" aria-selected="true">Göteborg</option>
<option value="Stockholm" aria-selected="false">Stockholm</option>
</select><br />
Phone: <input type="text" bind:value={phone} /><br />
Title: <input type="text" bind:value={title} /><br />
</p>
<!-- E-postadress -->
<label for="email">Email:</label>
<input id="email" type="text" bind:value={email} placeholder="[email protected]" />
<br />

<h2>2. Copy your signature to your mail client</h2>
<!-- Telefon -->
<label for="phone">Phone:</label>
<input id="phone" type="text" bind:value={phone} placeholder="+46 NNN NN NN NN" />
<br />

<tbody
><tr><td style="font-size:0px;height: 12px;" /></tr>
<tr
><td>
<table
cellpadding="0"
cellspacing="0"
style="border-collapse: collapse; font-family: Helvetica, Arial, sans-serif; color:#000;"
>
<tbody
><tr>
<td
style="vertical-align: top; padding: 0.01px 5px 0.01px 1px; width: 65px; text-align: center;"
>
<img
src="favicon.png"
height="86"
width="86"
style=" width:86px; vertical-align: middle; border-radius:0; height: 86px;"
alt="Iteam"
/>
</td>
<td style="padding: 0.01px 0.01px 0.01px 5px; vertical-align:top;">
<table cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tbody
><tr>
<td
style="line-height: 0.9; padding: 0.01px; font-family: Helvetica, Arial, sans-serif;"
>
<span
data-acs="name"
style=" text-transform: initial; font-weight: bold; color: #000000; letter-spacing: 0px; line-height: 0.9; font-size: 11px;"
>
{name}
</span>
<span
data-acs="name"
style=" text-transform: initial; color: #000000; letter-spacing: 0px; line-height: 0.9; font-size: 11px;"
>
/ {title}
</span>
<h2>2. Copy your signature to your mail client</h2>

<br />
<span
data-acs="title"
style=" text-transform: initial; color: #ff3b5c; line-height: 0.9; font-size: 11px;"
>
<a
href="mailto:{email.toLowerCase()}@iteam.se"
style="color: #ff3b5c; text-decoration: none; font-size: 11px;"
>{email.toLowerCase()}@iteam.se</a
>
</span>
<span
data-acs="name"
style=" text-transform: initial; color: #000000; letter-spacing: 0px; line-height: 0.9; font-size: 11px;"
>
/ {phone}
</span>
<br /><br />

<span
data-acs="title"
style=" text-transform: initial; font-weight: bold; color: #000000; letter-spacing: 0px; line-height: 0.9; font-size: 11px;"
>
Iteam
</span>
<br />
<span
data-acs="title"
style=" text-transform: initial; color: #000000; letter-spacing: 0px; line-height: 0.9; font-size: 11px;"
>
{officeAddress}
</span>
<br />
<span
data-acs="title"
style=" text-transform: initial; color: #ff3b5c; letter-spacing: 0px; line-height: 0.9; font-size: 11px;"
>
<a
href="https://www.iteam.se"
target="_blank"
style="color: #ff3b5c; text-decoration: none; font-size: 11px;"
>www.iteam.se</a
>
</span>
<br />
<span
data-acs="title"
style=" text-transform: initial; color: #000000; letter-spacing: 0px; line-height: 0.9; font-size: 11px;"
id="other-office-memo"
>
Psst, du vet väl att vi finns i {otherOffice} också?
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" style="max-width: 600px; width:100%;">
<tbody><tr><td style="line-height:00.8" /></tr></tbody>
</table>
</td></tr
>
</tbody>
<div>
<table cellpadding="0" cellspacing="0" style="border:0; font-family: Arial, sans-serif;">
<tr>
<td style="padding-right: 15px;">
<img
src="https://iteam.se/apple-touch-icon.png"
alt="Iteam Logo"
height="105"
style="display: block;"
/>
</td>
<td style="vertical-align: middle;">
<p style="font-weight: bold; margin: 0;">{name}</p>
<p style="margin: 0 0 5px 0;">{title}</p>
<p style="margin: 0;">
<a href="tel:{phone}" style="color: #000000; text-decoration: none;">{phone}</a>
</p>
<p style="margin: 0;">
<a href="mailto:{email}" style="color: #FF3B5C; text-decoration: none;">{email}</a>
</p>
<p style="margin: 0;">
<a href="https://www.iteam.se" style="color: #FF3B5C; text-decoration: none;"
>www.iteam.se</a
>
</p>
</td>
</tr>
</table>
</div>
</div>
14 changes: 0 additions & 14 deletions tests/test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,3 @@ test('index page has expected h2', async ({ page }) => {
await page.goto('/');
expect(await page.textContent('h2')).toBe('1. Enter your details');
});

test('office', async ({ page }) => {
await page.goto('/');

await page.selectOption('[aria-label="office"]', 'Göteborg');
expect(await page.textContent('#other-office-memo')).toContain(
'Psst, du vet väl att vi finns i Stockholm också?'
);

await page.selectOption('[aria-label="office"]', 'Stockholm');
expect(await page.textContent('#other-office-memo')).toContain(
'Psst, du vet väl att vi finns i Göteborg också?'
);
});

0 comments on commit 1fa8750

Please sign in to comment.