Skip to content

Commit

Permalink
Merge pull request #333 from guardian/ei/capi-multiple-events-template
Browse files Browse the repository at this point in the history 
Add Svelte version of events multiple template
  • Loading branch information
@emma-imber
emma-imber authored Nov 16, 2023
2 parents ebfa2ee + 21946f4 commit 36de988
Show file tree
Hide file tree
Showing 9 changed files with 458 additions and 64 deletions.
0 src/templates/components/Card.svelte → src/templates/components/CapiCard.svelte
View file
File renamed without changes.
114 changes: 114 additions & 0 deletions src/templates/components/EventsHeader.svelte
View file
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;
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
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
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
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

0 comments on commit 36de988

Please sign in to comment.