Skip to content
This repository was archived by the owner on Mar 12, 2020. It is now read-only.

Commit fe59178

Browse files
bjfletcherbjfletcher
authored
add landscape template and set as a bower project (#2)
1 parent a5a1617 commit fe59178

File tree

6 files changed

+64
-26
lines changed

6 files changed

+64
-26
lines changed

‎bower.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "n-teaser",
3+
"homepage": "https://github.com/financial-times/n-teaser",
4+
"description": "n-card's replacement - better styles, simpler combinations & more basic templating",
5+
"ignore": [
6+
"**/.*",
7+
"node_modules",
8+
"bower_components",
9+
"test",
10+
"tests"
11+
]
12+
}

‎demos/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,8 @@
1111
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
1212
</head>
1313
<body>
14-
1514
<div id="opinion" class="card"></div>
16-
15+
<div id="landscape" class="card"></div>
1716
<script src="script.js"></script>
1817
</body>
1918
</html>

‎demos/script.js

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
1-
fetch('../templates/opinion.mustache')
2-
.then(res => res.text())
3-
.then(source => {
4-
const template = Handlebars.compile(source);
5-
const context = {
6-
img: {
7-
src: 'http://image.webservices.ft.com/v1/images/raw/fthead:mrs-moneypenny?source=origami&amp;width=60',
8-
alt: 'demo image'
9-
},
10-
tag: 'Mrs Moneypenny',
11-
heading: 'Japan sells negative yield 10-year bonds',
12-
datetime: {
13-
raw: '2016-02-29T12:35:48Z',
14-
formatted: '2016-02-29T12:35:48Z'
15-
}
16-
};
17-
document.querySelector('#opinion').innerHTML = template(context);
18-
});
1+
const data = {
2+
img: {
3+
alt: 'demo image'
4+
},
5+
tag: 'Mrs Moneypenny',
6+
heading: 'Japan sells negative yield 10-year bonds',
7+
datetime: {
8+
raw: '2016-02-29T12:35:48Z',
9+
formatted: '2016-02-29T12:35:48Z'
10+
}
11+
};
12+
13+
const images = {
14+
landscape: 'https://image.webservices.ft.com/v1/images/raw/http%3A%2F%2Fim.ft-static.com%2Fcontent%2Fimages%2Fa60ae24b-b87f-439c-bf1b-6e54946b4cf2.img?source=o-card-demo',
15+
opinion: 'http://image.webservices.ft.com/v1/images/raw/fthead:mrs-moneypenny?source=origami&amp;width=60'
16+
};
17+
18+
['landscape', 'opinion'].forEach(style => {
19+
fetch(`../templates/${style}.mustache`)
20+
.then(res => res.text())
21+
.then(source => {
22+
const template = Handlebars.compile(source);
23+
data.img.src = images[style];
24+
document.querySelector(`#${style}`).innerHTML = template(data);
25+
});
26+
});

‎demos/style.css

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
.card {
22
margin: 1em;
3+
}
4+
5+
#opinion {
36
width: 20em;
4-
}
7+
}
8+
9+
#landscape {
10+
width: 30em;
11+
}

‎templates/landscape.mustache

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="o-card o-card--landscape o-card--image-left" data-o-component="o-card">
2+
<div class="o-card__image o-card__image--left">
3+
<img src="{{{img.src}}}" alt="{{img.alt}}"></img>
4+
</div>
5+
<div class="o-card__content">
6+
<div class="o-card__meta">
7+
<a href="#" class="o-card__tag">{{tag}}</a>
8+
</div>
9+
<h2 class="o-card__heading"><a href="#">{{heading}}</a></h2>
10+
<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="{{datetime.raw}}">{{datetime.formatted}}</time>
11+
</div>
12+
</div>

‎templates/opinion.mustache

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<div class="o-card o-card--opinion o-card--image-" data-o-component="o-card">
1+
<div class="o-card o-card--opinion" data-o-component="o-card">
22
<div class="o-card__content">
33
<div class="o-card__meta">
4-
<div class="o-card__meta-image o-card__meta-image--rounded">
5-
<img src="{{{img.src}}}" alt="{{img.alt}}"></img>
6-
</div>
4+
<div class="o-card__meta-image o-card__meta-image--rounded">
5+
<img src="{{{img.src}}}" alt="{{img.alt}}"></img>
6+
</div>
77
<a href="#" class="o-card__tag">{{tag}}</a>
88
</div>
99
<h2 class="o-card__heading"><a href="#">{{heading}}</a></h2>
10-
<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="{{datetime.raw}}">{{datetime.formatted}}</time>
10+
<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="{{datetime.raw}}">{{datetime.formatted}}</time>
1111
</div>
1212
</div>

0 commit comments

Comments
 (0)