Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uppdaterad mailfooterdesign med nya interaktiva fält #2

Merged
merged 6 commits into from
Aug 30, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 56 additions & 139 deletions src/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,147 +1,64 @@
<script>
export const prerender = true;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@irony vet du vad syftet med denna konstant är?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nu är den tillbaka hursomhelst

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
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å?'
);
});
Loading