-
Notifications
You must be signed in to change notification settings - Fork 3
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
Convert manual-multiple template to svelte #338
Changes from all commits
0f4e761
cdadd74
38d6391
6b0ed41
d927ff8
8a5c245
26df873
04f44c8
45208da
6065a17
d9ed7c1
d2e8cf7
784c067
398f321
77bb325
958c227
bffaf71
7d32aa5
c6edd20
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
const tones = [ | ||
'brand', | ||
'brand-new', | ||
'job', | ||
'live', | ||
'travel', | ||
'money', | ||
'book', | ||
'weekly', | ||
'members', | ||
'patron', | ||
'lifestyle', | ||
'climate', | ||
'climate2', | ||
'support', | ||
'subscription', | ||
'subs-rebrand', | ||
]; | ||
|
||
type Tone = typeof tones[number]; | ||
|
||
export type { Tone }; | ||
|
||
export { tones }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
<script context="module" lang="ts"> | ||
import { CLICK_MACRO } from '$lib/gam'; | ||
import type { GAMVariable } from '$lib/gam'; | ||
import { clickMacro } from '$lib/gam'; | ||
import type { Tone } from '$lib/types/tones'; | ||
</script> | ||
|
||
<script lang="ts"> | ||
|
@@ -9,42 +9,33 @@ | |
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 = ''; | ||
} | ||
export let image: string; | ||
export let url: string; | ||
export let linkText: string; | ||
export let tone: Tone; | ||
export let isProminent = false; | ||
</script> | ||
|
||
<a | ||
class="card split-into-{TotalCardNumber}" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The split into stuff didn't actually work, seems better to filter the events that actually have text in them https://github.com/guardian/commercial-templates/pull/338/files#diff-e5ba83f56a29bdc63ad7241c5b53c92078a77913d1af94896e4a83c974231bf6R69 |
||
href={EventUrl} | ||
style={`--direction: ${direction}`} | ||
> | ||
<a class="card" class:is-prominent={isProminent} href={clickMacro(url)}> | ||
<div class="media"> | ||
<picture> | ||
<img src={EventImage} alt="" /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In the future, it would be good to offer alt text as a GAM variable, for when the image doesn't load |
||
<img src={image} alt="" /> | ||
</picture> | ||
</div> | ||
|
||
<div class="text"> | ||
<h2><b>{boldTitle}</b>{regularTitle}</h2> | ||
<p>{EventDateTime}</p> | ||
<h2><slot name="title" /></h2> | ||
<p><slot name="text" /></p> | ||
{#if linkText} | ||
<span class="button" data-tone={tone}> | ||
{linkText} | ||
<ArrowRight width={24} /> | ||
</span> | ||
{/if} | ||
</div> | ||
<a class="button" href={`${CLICK_MACRO}${EventUrl}`} target="_top"> | ||
Book tickets | ||
<ArrowRight width={24} /> | ||
</a> | ||
</a> | ||
|
||
<style> | ||
<style lang="scss"> | ||
a { | ||
color: #000000; | ||
text-decoration: none; | ||
|
@@ -54,11 +45,7 @@ | |
padding: 12px 10px; | ||
display: block; | ||
margin: 0px; | ||
width: 50%; | ||
} | ||
|
||
a.card:nth-child(n + 3) { | ||
display: none; | ||
flex: 1; | ||
} | ||
|
||
a.card:not(:first-of-type)::before { | ||
|
@@ -72,7 +59,6 @@ | |
} | ||
|
||
.media { | ||
background-color: gray; | ||
margin: 0 0 10px 0; | ||
} | ||
|
||
|
@@ -83,7 +69,9 @@ | |
picture, | ||
img { | ||
display: block; | ||
width: 100%; | ||
width: auto; | ||
max-width: 100%; | ||
max-height: 150px; | ||
} | ||
|
||
h2 { | ||
|
@@ -104,13 +92,13 @@ | |
margin: 3px 0px; | ||
} | ||
|
||
a.button { | ||
.button { | ||
font-size: 12px; | ||
line-height: 0; | ||
font-weight: 700; | ||
font-family: 'GuardianTextSans', 'Helvetica Neue', Helvetica, Arial, | ||
'Lucida Grande', sans-serif; | ||
background: #c83877; | ||
background: var(--bg); | ||
color: #ffffff; | ||
text-decoration: none; | ||
border-radius: 10rem; | ||
|
@@ -121,26 +109,20 @@ | |
align-items: center; | ||
} | ||
|
||
@media (max-width: 739px) { | ||
a.card:nth-child(n + 3) { | ||
display: none; | ||
} | ||
} | ||
|
||
@media (min-width: 740px) { | ||
a.card:nth-child(n) { | ||
a.card { | ||
padding: 12px 10px; | ||
display: block; | ||
margin: 0px; | ||
} | ||
|
||
a.split-into-2 { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this is handled by flexbox |
||
width: 50%; | ||
} | ||
|
||
a.split-into-3 { | ||
width: 33%; | ||
} | ||
|
||
a.split-into-4 { | ||
width: 25%; | ||
} | ||
|
||
a.button { | ||
.button { | ||
margin-top: 6px; | ||
margin-bottom: 10px; | ||
} | ||
|
@@ -152,6 +134,35 @@ | |
p { | ||
margin: 10px 0px; | ||
} | ||
|
||
.is-prominent.card:nth-child(1) { | ||
display: flex; | ||
flex-direction: row; | ||
align-items: stretch; | ||
|
||
.media { | ||
width: calc(66.67% - 10px); | ||
margin-right: 10px; | ||
|
||
picture, | ||
img { | ||
max-height: 100%; | ||
} | ||
} | ||
|
||
.text { | ||
flex: 1; | ||
padding: 6px 10px 6px 0; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: flex-start; | ||
} | ||
|
||
.button { | ||
margin-top: auto; | ||
margin-bottom: 4px; | ||
} | ||
} | ||
} | ||
|
||
@media (min-width: 1140px) { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
<script context="module" lang="ts"> | ||
import { clickMacro } from '$lib/gam'; | ||
</script> | ||
|
||
<script lang="ts"> | ||
import ArrowRight from './icons/ArrowRight.svelte'; | ||
import '$templates/components/fonts/Headline.css'; | ||
import '$templates/components/fonts/SansBold.css'; | ||
import '$templates/components/colours/tones.css'; | ||
import type { Tone } from '$lib/types/tones'; | ||
import ToneLogo from './ToneLogo.svelte'; | ||
|
||
export let buttonUrl: string; | ||
export let buttonText: string; | ||
export let tone: Tone; | ||
</script> | ||
|
||
<header data-tone={tone}> | ||
<div class="logo"> | ||
<ToneLogo {tone} /> | ||
</div> | ||
|
||
<div class="banner-description-container"> | ||
<span class="banner-description"> | ||
<slot /> | ||
</span> | ||
</div> | ||
|
||
<div class="button-container"> | ||
<a class="button" href={clickMacro(buttonUrl)} target="_top"> | ||
{buttonText} | ||
<ArrowRight width={30} /> | ||
</a> | ||
</div> | ||
</header> | ||
|
||
<style lang="scss"> | ||
header { | ||
background-color: var(--bg); | ||
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: var(--header-btn-bg, #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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is necessary so that the template parameters can be used for logic, as typescript complains about stuff like thsi otherwise.