-
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
Add Svelte version of events multiple template #333
Merged
Merged
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 d8595ec
Mobile styles
emma-imber aef5f3b
Make number of cards dynamic
emma-imber 35b047e
Remove tracking pixel
emma-imber 5fce3f8
Rename Card components
emma-imber ff44cbf
Tidy up header file
emma-imber af8e965
Rename CardNumber to CardIndex
emma-imber 4b519a6
Tidy up index.svelte
emma-imber dd4e146
Lint
emma-imber f70c6a6
Update some CSS
emma-imber fd34306
Remove outdated CSS
emma-imber c4c498a
Remove outdates CSS property
emma-imber 0708d80
Update background colour
emma-imber 6c48098
Tidy up SVG
emma-imber f3abbc7
Lint
emma-imber e47c6c7
Use font from existing file
emma-imber bd7c409
Use nth-child css selector to hide cards on mobile
emma-imber db7e20d
Lint
emma-imber 5cf05b7
Tidying
emma-imber 01d133f
Remove unused import
emma-imber b6063b2
Tidy up iteration
emma-imber 9fa7e33
Rename button url variable to be more descriptive
emma-imber 21946f4
Update template name
emma-imber File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
What’s the purpose of
box-decoration-break
in a non-flow context for a non-inline element??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.
It handles the styling of the description text here:
With box-decoration-break:
Without:
But open to alternative solutions that have better support!
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.
Very nice!