Skip to content
This repository was archived by the owner on Nov 3, 2021. It is now read-only.

Commit bee4443

Browse files
josyehjosyeh
committed
Merge pull request #45 from jostw/josyeh/Marketplace/master/Bug1244001
Bug 1244001 - [TV][2.5][Web Apps] Sometimes the suggested flag will be cut
2 parents 636e44e + 07b0c07 commit bee4443

File tree

7 files changed

+114
-92
lines changed

7 files changed

+114
-92
lines changed

‎src/media/css/app-preview.styl‎

Lines changed: 43 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -17,77 +17,72 @@ $app-preview-background-color = #72C9B0;
1717

1818
background-color: $app-preview-background-color;
1919
background-image: url('../img/Pattern_overlay.png');
20+
}
2021

21-
.suggested {
22-
position: absolute;
23-
top: 1.6rem;
24-
left: 0;
25-
26-
padding: 0 .5rem 0 1rem;
27-
28-
font-size: 1.9rem;
29-
font-style: italic;
30-
line-height: 4.2rem;
22+
.app-preview-suggested {
23+
position: absolute;
24+
top: 1.6rem;
25+
left: 0;
3126

32-
color: $greyscale-white;
33-
background: linear-gradient(90deg,
34-
$suggested-star-color,
35-
$suggested-flag-color);
27+
padding: 0 .5rem 0 1rem;
3628

37-
&::before {
38-
float: left;
39-
margin-right: .5rem;
29+
font-size: 1.9rem;
30+
font-style: italic;
31+
line-height: 4.2rem;
4032

41-
font-size: 4.2rem;
42-
}
33+
color: $greyscale-white;
34+
background: linear-gradient(90deg,
35+
$suggested-star-color,
36+
$suggested-flag-color);
4337

44-
&::after {
45-
content: '';
38+
&::before {
39+
float: left;
40+
margin-right: .5rem;
4641

47-
position: absolute;
48-
top: 0;
49-
right: -4rem;
42+
font-size: 4.2rem;
43+
}
5044

51-
width: 4rem;
52-
height: 4.2rem;
45+
.flag {
46+
position: absolute;
47+
top: 0;
48+
right: -4rem;
5349

54-
background-image: url('../img/flag_R.png');
55-
}
56-
}
50+
width: 4rem;
51+
height: 4.2rem;
5752

58-
.preview,
59-
.detail {
60-
height: 100%;
53+
background-image: url('../img/flag_R.png');
6154
}
55+
}
6256

63-
.preview {
64-
float: right;
65-
width: 57.5rem;
57+
.app-preview-image {
58+
float: right;
59+
width: 57.5rem;
60+
height: 100%;
6661

67-
border-radius: .6rem;
68-
overflow: hidden;
62+
border-radius: .6rem;
63+
overflow: hidden;
6964

70-
color: transparent;
65+
color: transparent;
7166

72-
transition: opacity 1s;
67+
transition: opacity 1s;
7368

74-
&.invisible {
75-
opacity: 0;
76-
}
69+
&.invisible {
70+
opacity: 0;
7771
}
7872

7973
img {
8074
width: 100%;
8175
}
76+
}
8277

83-
.detail {
84-
position: relative;
78+
.app-preview-detail {
79+
position: relative;
8580

86-
width: 89rem;
87-
padding-top: 1rem;
81+
width: 89rem;
82+
height: 100%;
83+
padding-top: 1rem;
8884

89-
color: $greyscale-white;
90-
}
85+
color: $greyscale-white;
9186

9287
.name,
9388
.provider {

‎src/media/img/flag_R.png‎

-1 KB
Loading

‎src/media/js/image_helper.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
define('image_helper', ['core/defer'], function(defer) {
2+
function getBackgroundImageURL($element) {
3+
return $element.css('background-image')
4+
.replace(/url\(['"]?(.*?)['"]?\)/i, '$1');
5+
}
6+
7+
function loadImage(src) {
8+
var image = document.createElement('img');
9+
var def = defer.Deferred();
10+
11+
image.src = src;
12+
13+
image.onload = function() {
14+
def.resolve();
15+
};
16+
17+
image.onerror = function() {
18+
def.reject();
19+
};
20+
21+
return def.promise();
22+
}
23+
24+
return {
25+
getBackgroundImageURL: getBackgroundImageURL,
26+
loadImage: loadImage
27+
};
28+
});

‎src/media/js/image_loader.js‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/media/js/views/homepage.js‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
define('views/homepage',
22
['apps', 'core/capabilities', 'core/l10n', 'core/models', 'core/z',
3-
'templates', 'image_loader', 'smart_button', 'spatial_navigation'],
3+
'templates', 'image_helper', 'smart_button', 'spatial_navigation'],
44
function(apps, caps, l10n, models, z,
5-
nunjucks, imageLoader, smartButton, SpatialNavigation) {
5+
nunjucks, imageHelper, smartButton, SpatialNavigation) {
66
var gettext = l10n.gettext;
77
var appsModel = models('apps');
88

@@ -79,6 +79,7 @@ define('views/homepage',
7979
var focusedApp = appsModel.lookup(this.dataset.id);
8080
var focusedManifestURL = focusedApp.manifest_url;
8181

82+
var $appPreviewSuggested;
8283
var $appPreviewName;
8384

8485
var appPreviewNameOverflowLength;
@@ -99,15 +100,14 @@ define('views/homepage',
99100
$appContextMenuItem.attr({
100101
label: gettext('Add to Apps'),
101102
icon: (function() {
102-
var path = ['media', 'marketplace-tv-front-end',
103-
'img', 'install.png'];
104-
105103
// The path of installed icon is different from server.
106-
//
104+
107105
// On marketplace server:
108106
// `media/marketplace-tv-front-end/img/install.png`
109-
//
110-
// On local server or github page:
107+
var path = ['media', 'marketplace-tv-front-end',
108+
'img', 'install.png'];
109+
110+
// On github page:
111111
// `marketplace-tv-front-end/media/img/install.png`
112112
if (!location.origin.match(/marketplace/)) {
113113
var tempPath = path[0];
@@ -116,6 +116,12 @@ define('views/homepage',
116116
path[1] = tempPath;
117117
}
118118

119+
// On local server:
120+
// `/media/img/install.png`
121+
if (location.origin.match(/localhost/)) {
122+
path[0] = '';
123+
}
124+
119125
return path.join('/');
120126
})()
121127
});
@@ -139,9 +145,22 @@ define('views/homepage',
139145
})
140146
);
141147

142-
$appPreviewName = $appPreview.find('.name');
148+
// Ensure suggested flag image is loaded.
149+
if (focusedApp.tv_featured) {
150+
$appPreviewSuggested = $appPreview.find('.app-preview-suggested');
151+
152+
imageHelper.loadImage(
153+
imageHelper.getBackgroundImageURL(
154+
$appPreviewSuggested.find('.flag')
155+
)
156+
).done(function() {
157+
$appPreviewSuggested.removeClass('hidden');
158+
});
159+
}
143160

144161
// Set app preview area name's text carousel.
162+
$appPreviewName = $appPreview.find('.name');
163+
145164
appPreviewNameOverflowLength =
146165
$appPreviewName.width() - $appPreview.find('.text').width();
147166

@@ -202,8 +221,8 @@ define('views/homepage',
202221

203222
$appPreview.find('.price').removeClass('hidden');
204223

205-
imageLoader.getImage(focusedApp.promo_imgs['640']).done(function() {
206-
$appPreview.find('.preview').removeClass('invisible');
224+
imageHelper.loadImage(focusedApp.promo_imgs['640']).done(function() {
225+
$appPreview.find('.app-preview-image').removeClass('invisible');
207226
});
208227
});
209228

‎src/media/js/views/tutorial.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
define('views/tutorial',
2-
['core/l10n', 'core/z', 'image_loader', 'smart_button', 'spatial_navigation'],
3-
function(l10n, z, imageLoader, smartButton, SpatialNavigation) {
2+
['core/l10n', 'core/z', 'image_helper', 'smart_button', 'spatial_navigation'],
3+
function(l10n, z, imageHelper, smartButton, SpatialNavigation) {
44
var gettext = l10n.gettext;
55

66
// Ensure background image is loaded.
77
function loadBackgroundImage($slide, callback) {
8-
var imageSrc = $slide.find('.slide-image')
9-
.css('background-image')
10-
.replace(/url\(['"]?(.*?)['"]?\)/i, '$1');
11-
12-
var imagePromise = imageLoader.getImage(imageSrc);
8+
var imagePromise = imageHelper.loadImage(
9+
imageHelper.getBackgroundImageURL($slide.find('.slide-image'))
10+
);
1311

1412
imagePromise.done(function() {
1513
$slide.removeClass('invisible');

‎src/templates/_includes/app_preview.html‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
{% if app.tv_featured %}
2-
<span class="suggested" data-icon="bookmark-on">{{ _('Suggested') }}</span>
2+
<div class="app-preview-suggested hidden" data-icon="bookmark-on">
3+
<span>{{ _('Suggested') }}</span>
4+
<span class="flag"></span>
5+
</div>
36
{% endif %}
47

5-
<div class="preview invisible">
8+
<div class="app-preview-image invisible">
69
{% if app.promo_imgs['640'] %}
710
<img src="{{ app.promo_imgs['640'] }}"
811
alt="{{ app.name }}" title="{{ app.name }}">
@@ -12,15 +15,17 @@
1215
{% endif %}
1316
</div>
1417

15-
<div class="detail">
18+
<div class="app-preview-detail">
1619
<h1 class="name">
1720
<span class="text">{{ app.name }}</span>
1821
</h1>
22+
1923
<div class="provider">
2024
{% if app.developer_name %}
2125
<span>{{ _('by {author}')|format(author=app.developer_name) }}</span>
2226
{% endif %}
2327
</div>
28+
2429
<span class="price hidden">{{ _('Free') }}</span>
2530
<article class="description">{{ app.description | safe }}</article>
2631
</div>

0 commit comments

Comments
 (0)