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.

Sign up for GitHub

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

Jump to bottom

Add Svelte version of events multiple template #333

Merged
merged 23 commits into from
Nov 16, 2023
Merged

Add Svelte version of events multiple template #333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
9f2167c
Add multiple-events template to Svelte
emma-imber Oct 30, 2023
d8595ec
Mobile styles
emma-imber Oct 31, 2023
aef5f3b
Make number of cards dynamic
emma-imber Nov 1, 2023
35b047e
Remove tracking pixel
emma-imber Nov 2, 2023
5fce3f8
Rename Card components
emma-imber Nov 2, 2023
ff44cbf
Tidy up header file
emma-imber Nov 2, 2023
af8e965
Rename CardNumber to CardIndex
emma-imber Nov 2, 2023
4b519a6
Tidy up index.svelte
emma-imber Nov 2, 2023
dd4e146
Lint
emma-imber Nov 6, 2023
f70c6a6
Update some CSS
emma-imber Nov 6, 2023
fd34306
Remove outdated CSS
emma-imber Nov 6, 2023
c4c498a
Remove outdates CSS property
emma-imber Nov 6, 2023
0708d80
Update background colour
emma-imber Nov 8, 2023
6c48098
Tidy up SVG
emma-imber Nov 8, 2023
f3abbc7
Lint
emma-imber Nov 8, 2023
e47c6c7
Use font from existing file
emma-imber Nov 8, 2023
bd7c409
Use nth-child css selector to hide cards on mobile
emma-imber Nov 8, 2023
db7e20d
Lint
emma-imber Nov 8, 2023
5cf05b7
Tidying
emma-imber Nov 8, 2023
01d133f
Remove unused import
emma-imber Nov 8, 2023
b6063b2
Tidy up iteration
emma-imber Nov 8, 2023
9fa7e33
Rename button url variable to be more descriptive
emma-imber Nov 8, 2023
21946f4
Update template name
emma-imber Nov 8, 2023
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
0 src/templates/components/Card.svelte → src/templates/components/CapiCard.svelte
View file
Open in desktop
File renamed without changes.
114 changes: 114 additions & 0 deletions src/templates/components/EventsHeader.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<script context="module" lang="ts">
import { CLICK_MACRO } from '$lib/gam';
</script>

<script lang="ts">
import type { GAMVariable } from '$lib/gam';
import ArrowRight from './icons/ArrowRight.svelte';
import LiveLogo from './icons/LiveLogo.svelte';
import '$templates/components/fonts/Headline.css';
import '$templates/components/fonts/SansBold.css';

export let HeaderButtonUrl: GAMVariable;
export let BannerDescription: GAMVariable;
export let HeaderButtonText: GAMVariable;
</script>

<header>
<div class="logo">
<LiveLogo />
</div>

<div class="banner-description-container">
<span class="banner-description">{BannerDescription}</span>
</div>

<div class="button-container">
<a class="button" href={`${CLICK_MACRO}${HeaderButtonUrl}`} target="_top">
{HeaderButtonText}
<ArrowRight width={30} />
</a>
</div>
</header>

<style lang="scss">
header {
background-color: #c83877;
color: black;
padding: 6px 20px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
}

.logo {
align-self: flex-start;
}

a {
color: inherit;
text-decoration: none;
}

.banner-description {
font-size: 16px;
line-height: 22px;
font-family: 'GH Guardian Headline', 'Georgia', serif;
font-weight: 500;
color: #000000;
background: #ffffff;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
Comment on lines +61 to +62
Copy link
Contributor

Choose a reason for hiding this comment

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

What’s the purpose of box-decoration-break in a non-flow context for a non-inline element??

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It handles the styling of the description text here:

With box-decoration-break:
Screenshot 2023-11-08 at 09 46 19

Without:
Screenshot 2023-11-08 at 09 46 33

But open to alternative solutions that have better support!

Copy link
Contributor

Choose a reason for hiding this comment

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

Very nice!

padding: 2px 5px 2px 2px;

@media (max-width: 1140px) {
display: none;
}
}

div.banner-description-container {
margin-top: 20px;
margin-bottom: 20px;
}

.button-container {
display: flex;
flex-direction: row;
}

a.button {
font-size: 13px;
font-weight: 700;
font-family: 'GuardianTextSans', 'Helvetica Neue', Helvetica, Arial,
'Lucida Grande', sans-serif;
background: #ffffff;
color: #000000;
text-decoration: none;
border-radius: 10rem;
padding: 3px;
padding-left: 1rem;
display: inline-flex;
justify-content: space-between;
align-items: center;
}

@media (min-width: 1140px) {
header {
padding: 12px 20px;
width: 171px;
flex-direction: column;
}

.button-container {
flex-direction: column;
width: 100%;
}
}

@media (min-width: 1300px) {
header {
width: 251px;
}
}
</style>
162 changes: 162 additions & 0 deletions src/templates/components/ManualCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<script context="module" lang="ts">
import { CLICK_MACRO } from '$lib/gam';
import type { GAMVariable } from '$lib/gam';
</script>

<script lang="ts">
import '$templates/components/fonts/Egyptian.css';
import '$templates/components/fonts/Headline.css';
import '$templates/components/fonts/Sans.css';
import ArrowRight from './icons/ArrowRight.svelte';

export let TotalCardNumber: number;
export let EventTitle: GAMVariable;
export let EventDateTime: GAMVariable;
export let EventImage: GAMVariable;
export let EventUrl: GAMVariable;
export let direction = 'row';

let [boldTitle, regularTitle] = EventTitle.split(':');
if (regularTitle) {
boldTitle += ':';
} else {
regularTitle = '';
}
</script>

<a
class="card split-into-{TotalCardNumber}"
href={EventUrl}
style={`--direction: ${direction}`}
>
<div class="media">
<picture>
<img src={EventImage} alt="" />
</picture>
</div>
<div class="text">
<h2><b>{boldTitle}</b>{regularTitle}</h2>
<p>{EventDateTime}</p>
</div>
<a class="button" href={`${CLICK_MACRO}${EventUrl}`} target="_top">
Book tickets
<ArrowRight width={24} />
</a>
</a>

<style>
a {
color: #000000;
text-decoration: none;
}

a.card {
padding: 12px 10px;
display: block;
margin: 0px;
width: 50%;
}

a.card:nth-child(n + 3) {
display: none;
}

a.card:not(:first-of-type)::before {
content: '';
position: absolute;
top: 91px;
bottom: 12px;
margin-left: -10px;
width: 1px;
background: #dcdcdc;
}

.media {
background-color: gray;
margin: 0 0 10px 0;
}

.text {
padding: 0;
}

picture,
img {
display: block;
width: 100%;
}

h2 {
font-size: 1rem;
line-height: 1.25rem;
font-family: 'GH Guardian Headline', 'Georgia', serif;
font-weight: 500;
padding: 0px;
margin-bottom: 3px;
}

p {
display: block;
font-size: 0.75rem;
line-height: 1rem;
font-family: 'GuardianTextSans', 'Helvetica Neue', Helvetica, Arial,
'Lucida Grande', sans-serif;
margin: 3px 0px;
}

a.button {
font-size: 12px;
line-height: 0;
font-weight: 700;
font-family: 'GuardianTextSans', 'Helvetica Neue', Helvetica, Arial,
'Lucida Grande', sans-serif;
background: #c83877;
color: #ffffff;
text-decoration: none;
border-radius: 10rem;
display: inline-flex;
padding-left: 0.5rem;
margin-top: 3px;
align-self: flex-start;
align-items: center;
}

@media (min-width: 740px) {
a.card:nth-child(n) {
padding: 12px 10px;
display: block;
margin: 0px;
}

a.split-into-2 {
width: 50%;
}

a.split-into-3 {
width: 33%;
}

a.split-into-4 {
width: 25%;
}

a.button {
margin-top: 6px;
margin-bottom: 10px;
}

h2 {
margin-bottom: 10px;
}

p {
margin: 10px 0px;
}
}

@media (min-width: 1140px) {
a.card:not(:first-of-type)::before {
top: 12px;
}
}
</style>
8 changes: 7 additions & 1 deletion src/templates/components/icons/ArrowRight.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@
export let flip = false;
</script>

<svg aria-hidden="true" class:flip viewBox="0 0 30 30" {width} height={width}
<svg
aria-hidden="true"
class:flip
viewBox="0 0 30 30"
{width}
height={width}
fill="currentColor"
><path
d="M22.8 14.6l-7.6-7.6-.7.7 5.5 6.6h-14v1.5h14l-5.5 6.6.7.7 7.6-7.6v-.9"
/></svg
Expand Down
53 changes: 53 additions & 0 deletions src/templates/components/icons/LiveLogo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<svg
aria-hidden="true"
width="120.9px"
height="63.9px"
viewBox="0 0 120.9 63.9"
fill="#ffffff"
>
<path
d="M27.7,21.3l2.1-1.1V3.5h-1.6l-3.9,5.2h-0.4l0.2-5.8h17l0.2,5.8h-0.5L37,3.5h-1.6v16.6l2.1,1.1v0.6h-9.8 V21.3z"
/>
<path
d="M43,20.5V2.1l-1.6-0.7V1.1l6-1.1h0.6v8.7l0.2-0.1c1.3-1.2,3.2-1.9,5.1-1.9c2.6,0,3.8,1.5,3.8,4.2v9.6 l1.4,0.8l0,0.6h-7.8v-0.6l1.4-0.8v-9.6c0-1.5-0.7-2.1-1.9-2.1c-0.8,0-1.5,0.3-2.1,0.7v11.1l1.4,0.8v0.5h-7.8v-0.5L43,20.5z"
/>
<path
d="M62.5,14.9c0.2,3.1,1.5,5.4,4.8,5.4c1.6,0,2.7-0.7,3.7-1.3v0.6c-0.8,1.1-2.9,2.7-5.7,2.7 c-5,0-7.6-2.8-7.6-7.6c0-4.7,2.8-7.7,7.3-7.7c4.3,0,6.5,2.1,6.5,7.7v0.1H62.5z M62.5,14.2l4.4-0.3c0-3.8-0.6-6.3-1.9-6.3 C63.6,7.6,62.5,10.5,62.5,14.2z"
/>
<path
d="M0,29.2c0-8,5.3-10.9,11.2-10.9c2.5,0,4.9,0.4,6.2,1l0.1,5.6H17l-3.5-5.4c-0.6-0.3-1.2-0.4-2.2-0.4 c-3.2,0-4.8,3.6-4.7,9.6c0.1,7.1,1.3,10.4,4.2,10.4c0.8,0,1.3-0.1,1.7-0.3v-7.6l-1.9-1.1v-0.6h9.2v0.7L18,31.2v7.5 c-1.6,0.6-4.2,1.2-7,1.2C4.3,39.9,0,36.8,0,29.2z"
/>
<path
d="M19.1,25.5V25l6.2-1.1L26,24v12.2c0,1.5,0.7,1.9,1.9,1.9c0.8,0,1.5-0.3,2-0.9v-11l-1.7-0.7V25l6.2-1.1 l0.6,0.1v14l1.7,0.7v0.4l-6.1,0.8l-0.6-0.1V38h-0.2c-1.1,1-2.7,2-4.6,2c-3,0-4.3-1.8-4.3-4.4v-9.3L19.1,25.5z"
/>
<path
d="M57.9,23.9l0.5,0.1l0,4.5h0.1c0.7-3.3,2.1-4.6,3.9-4.6c0.3,0,0.6,0,0.8,0.1v4.6c-0.3-0.1-0.8-0.1-1.3-0.1 c-1.4,0-2.5,0.3-3.4,0.7l0,8.9l1.4,0.8l0,0.6h-8v-0.6l1.4-0.8V26l-1.7-0.5V25L57.9,23.9z"
/>
<path
d="M73.5,24.3v-4.8l-1.7-0.6v-0.4l6.3-1.2l0.6,0.1v20.5l1.7,0.6v0.5l-6.2,0.8l-0.5-0.1v-1.7h-0.1 c-0.9,0.9-2.2,1.7-4.1,1.7c-3.4,0-5.8-2.6-5.8-7.8c0-5.6,2.9-8.3,7.2-8.3C72.1,23.8,73,24,73.5,24.3z M73.5,37.4V25.1 c-0.4-0.3-0.7-0.6-1.7-0.5c-1.7,0.1-2.7,2.6-2.7,7.1c0,4,0.7,6.3,3,6.2C72.7,37.9,73.2,37.7,73.5,37.4z"
/>
<path
d="M87.1,23.9l0.5,0.1v14.2l1.4,0.8l0,0.6h-8v-0.6l1.4-0.8v-12l-1.7-0.7V25L87.1,23.9z M87.7,20 c0,1.5-1.3,2.6-2.7,2.6c-1.5,0-2.7-1.1-2.7-2.6c0-1.5,1.2-2.7,2.7-2.7C86.4,17.4,87.7,18.5,87.7,20z"
/>
<path
d="M105.8,38.2V26l-1.7-0.6v-0.6l6.2-1.2l0.6,0.1v1.8h0.2c1.3-1.2,3.3-2,5.3-2c2.7,0,3.9,1.3,3.9,4.1v10.4 l1.4,0.8l0,0.6h-8v-0.6l1.4-0.8V28c0-1.6-0.7-2.2-2-2.2c-0.8,0-1.5,0.2-2.1,0.7v11.6l1.4,0.8v0.6h-8v-0.6L105.8,38.2z"
/>
<path
d="M97,30.5v-2c0-3.1-0.7-4.1-2.6-4.1c-0.2,0-0.4,0-0.6,0.1l-3.4,4.6H90v-4.2c1.4-0.4,3.3-1,5.6-1 c4.1,0,6.5,1.1,6.5,4.6v9.9l1.5,0.4v0.4c-0.6,0.4-1.8,0.7-3,0.7c-2,0-3-0.7-3.4-1.8H97c-0.9,1.2-2.1,1.8-4,1.8 c-2.4,0-4.1-1.5-4.1-4.2c0-2.6,1.6-4,4.8-4.6L97,30.5z M97,37.4v-6.1l-1,0.1c-1.6,0.1-2.2,1.2-2.2,3.5c0,2.5,0.8,3.1,1.9,3.1 C96.4,37.9,96.7,37.7,97,37.4z"
/>
<path
d="M44.8,30.5v-2c0-3.1-0.7-4.1-2.6-4.1c-0.2,0-0.4,0-0.6,0.1l-3.4,4.6h-0.5v-4.2c1.4-0.4,3.3-1,5.6-1 c4.1,0,6.5,1.1,6.5,4.6v9.9l1.5,0.4v0.4c-0.6,0.4-1.8,0.7-3,0.7c-2,0-3-0.7-3.4-1.8h-0.1c-0.9,1.2-2.1,1.8-4,1.8 c-2.4,0-4.1-1.5-4.1-4.2c0-2.6,1.6-4,4.8-4.6L44.8,30.5z M44.8,37.4v-6.1l-1,0.1c-1.6,0.1-2.2,1.2-2.2,3.5 c0,2.5,0.8,3.1,1.9,3.1C44.2,37.9,44.5,37.7,44.8,37.4z"
/>
<path
d="M27.4,63.4l1.9-0.4V44.2l-1.9-0.4v-0.5h10v0.5l-2.1,0.4v19.1h3.3l4.7-7.3h0.5l-0.4,7.9h-16V63.4z"
/>
<path
d="M50.2,47.9l0.7,0.1v14.9l1.6,0.5v0.5h-8.4v-0.5l1.6-0.5V50L44,49.3v-0.5L50.2,47.9z M51,44.2 c0,1.5-1.3,2.7-2.8,2.7c-1.5,0-2.7-1.1-2.7-2.7s1.2-2.7,2.7-2.7C49.7,41.6,51,42.7,51,44.2z"
/>
<path
d="M66.3,49.9l-4.6,14h-3.1L53,49.4l-1.3-0.7v-0.5h8.8v0.5l-1.8,0.7l3.6,10.2h0.1l3.3-9.7l-2.2-1.2v-0.5h4.5v0.5 L66.3,49.9z"
/>
<path
d="M71.8,55.5c0.2,3.9,1.4,6.2,5.4,6.2c1.3,0,2.4-0.2,3.5-0.6v0.5c-0.9,1.3-3.1,2.7-6.2,2.7c-5.3,0-8-3.2-8-8.3 c0-5,3-8.1,7.8-8.1c4.8,0,6.8,2.6,6.8,7.2v0.4H71.8z M71.8,54.9l4.4-0.2c0-4.9-0.7-6.3-2-6.3C72.7,48.4,71.8,50.4,71.8,54.9z"
/>
</svg>
Loading
Loading