-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #153 from reuters-graphics/leaderboard-ad
Leaderboard ad
- Loading branch information
Showing
5 changed files
with
129 additions
and
4 deletions.
There are no files selected for viewing
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,28 @@ | ||
<script> | ||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; | ||
// @ts-ignore | ||
import adDocs from './stories/docs/leaderboard.md?raw'; | ||
import AdScripts from './AdScripts.svelte'; | ||
import LeaderboardAd from './LeaderboardAd.svelte'; | ||
import { withComponentDocs } from '$docs/utils/withParams.js'; | ||
const meta = { | ||
title: 'Components/LeaderboardAd', | ||
component: LeaderboardAd, | ||
...withComponentDocs(adDocs), | ||
}; | ||
</script> | ||
|
||
<Meta title="Components/LeaderboardAd" {...meta} /> | ||
|
||
<Template let:args> | ||
<div> | ||
<AdScripts /> | ||
<LeaderboardAd /> | ||
</div> | ||
</Template> | ||
|
||
<Story name="Default" /> |
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,61 @@ | ||
<script lang="ts"> | ||
import { DesktopPlacementName } from './@types/ads'; | ||
import ResponsiveAd from './ResponsiveAd.svelte'; | ||
/** Add an ID to target with SCSS. */ | ||
export let id: string = ''; | ||
/** Add a class to target with SCSS. */ | ||
export let cls: string = ''; | ||
export { cls as class }; | ||
let windowWidth = 1200; | ||
$: adSize = windowWidth < 1024 ? 110 : 275; | ||
const desktopPlacementName: DesktopPlacementName = | ||
'reuters_desktop_leaderboard_atf'; | ||
</script> | ||
|
||
<svelte:window bind:innerWidth="{windowWidth}" /> | ||
|
||
<!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) --> | ||
<div class="leaderboard__sticky {cls}" id="{id}" style="--height: {adSize}px;"> | ||
<div class="ad-block"> | ||
<div class="ad-slot__container"> | ||
<div class="ad-slot__inner"> | ||
<div> | ||
<ResponsiveAd desktopPlacementName="{desktopPlacementName}" /> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<style lang="scss"> | ||
.leaderboard__sticky { | ||
position: sticky; | ||
position: initial; | ||
top: 0; | ||
transition: top 0.8s ease-in-out; | ||
z-index: 1030; | ||
} | ||
div.ad-block { | ||
width: 100%; | ||
background: #f4f4f4; | ||
display: flex; | ||
justify-content: center; | ||
flex-direction: column; | ||
align-items: center; | ||
min-height: var(--height); | ||
.ad-slot__container { | ||
min-height: var(--height); | ||
align-items: center; | ||
display: flex; | ||
justify-content: center; | ||
.ad-slot__inner { | ||
height: 100%; | ||
max-width: 100%; | ||
} | ||
} | ||
} | ||
</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,28 @@ | ||
Add a leaderboard ad to your page. | ||
|
||
> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds. | ||
```svelte | ||
<!-- +page.svelte --> | ||
<script> | ||
import { | ||
AdScripts, | ||
LeaderboardAd, | ||
SiteHeader, | ||
} from '@reuters-graphics/graphics-components'; | ||
</script> | ||
<!-- ALWAYS check if in an embed context! --> | ||
{#if !embedded} | ||
<!-- Include AdScripts only ONCE per page --> | ||
<AdScripts /> | ||
{/if} | ||
<!-- ... --> | ||
{#if !embedded} | ||
<!-- ALWAYS put the leaderboard ad directly above the SiteHeader --> | ||
<SponsorshipAd /> | ||
<SiteHeader /> | ||
{/if} | ||
``` |
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