Merge lp:~stephen-stewart/snapweb/repent-harlequin-said-the-ticktockman into lp:~snappy-dev/snapweb/trunk
- repent-harlequin-said-the-ticktockman
- Merge into trunk
Proposed by
Stephen Stewart
Status: | Superseded |
---|---|
Proposed branch: | lp:~stephen-stewart/snapweb/repent-harlequin-said-the-ticktockman |
Merge into: | lp:~snappy-dev/snapweb/trunk |
Diff against target: |
860 lines (+386/-142) 26 files modified
gulpfile.js (+16/-2) package.json (+2/-0) www/src/css/animations.css (+4/-0) www/src/css/banner.css (+5/-3) www/src/css/base.css (+1/-1) www/src/css/headline.css (+10/-0) www/src/css/icon.css (+23/-0) www/src/css/layout.css (+65/-4) www/src/css/snap.css (+13/-12) www/src/css/snaplist.css (+64/-15) www/src/images/cof.svg (+14/-25) www/src/images/default-package-icon.svg (+34/-12) www/src/js/models/snap.js (+31/-6) www/src/js/templates/home.hbs (+5/-1) www/src/js/templates/layout-banner.hbs (+34/-32) www/src/js/templates/snap-detail.hbs (+9/-3) www/src/js/templates/snap-layout.hbs (+15/-10) www/src/js/templates/snap-menu.hbs (+11/-9) www/src/js/templates/snaplist-item.hbs (+4/-3) www/src/js/templates/store.hbs (+0/-1) www/src/js/views/home.js (+2/-0) www/src/js/views/snap-detail.js (+1/-0) www/src/js/views/snap-reviews.js (+1/-1) www/src/js/views/snap-settings.js (+1/-0) www/src/js/views/snaplist-item.js (+8/-1) www/tests/snapItemViewSpec.js (+13/-1) |
To merge this branch: | bzr merge lp:~stephen-stewart/snapweb/repent-harlequin-said-the-ticktockman |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Snappy Developers | Pending | ||
Review via email: mp+260119@code.launchpad.net |
Commit message
Description of the change
To post a comment you must log in.
- 154. By Stephen Stewart
- 155. By Stephen Stewart
-
wrap snap tab content
Unmerged revisions
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | === modified file 'gulpfile.js' |
2 | --- gulpfile.js 2015-05-09 09:33:57 +0000 |
3 | +++ gulpfile.js 2015-05-26 10:09:09 +0000 |
4 | @@ -6,6 +6,7 @@ |
5 | var buffer = require('vinyl-buffer'); |
6 | var concat = require('gulp-concat'); |
7 | var csso = require('gulp-csso'); |
8 | +var customMedia = require("postcss-custom-media"); |
9 | var del = require('del'); |
10 | var gulp = require('gulp'); |
11 | var gutil = require('gulp-util'); |
12 | @@ -47,7 +48,7 @@ |
13 | } |
14 | |
15 | return bundleShared(bundler); |
16 | -} |
17 | +} |
18 | |
19 | function bundleShared(bundler) { |
20 | return bundler.bundle() |
21 | @@ -75,7 +76,20 @@ |
22 | gulp.task('styles', ['styles:clean'], function() { |
23 | var processors = [ |
24 | autoprefixer({browsers: ['last 1 version']}), |
25 | - bemlinter('bem') |
26 | + bemlinter('bem'), |
27 | + customMedia({ |
28 | + extensions: { |
29 | + /** multiples of icon width in grid form **/ |
30 | + '--xxs': '(min-width: 424px)', |
31 | + '--xs': '(min-width: 540px)', |
32 | + '--s': '(min-width: 660px)', |
33 | + '--m': '(min-width: 770px)', |
34 | + '--l': '(min-width: 880px)', |
35 | + '--xl': '(min-width: 1100px)', |
36 | + '--xxl': '(min-width: 1430px)', |
37 | + '--xxxl': '(min-width: 1870px)' |
38 | + } |
39 | + }) |
40 | ]; |
41 | return gulp.src([ |
42 | 'node_modules/normalize.css/normalize.css', |
43 | |
44 | === modified file 'package.json' |
45 | --- package.json 2015-05-08 22:41:11 +0000 |
46 | +++ package.json 2015-05-26 10:09:09 +0000 |
47 | @@ -37,6 +37,8 @@ |
48 | "lodash": "~3.3.1", |
49 | "normalize.css": "^3.0.3", |
50 | "postcss-bem-linter": "git://github.com/necolas/postcss-bem-linter", |
51 | + "postcss-custom-media": "^3.0.0", |
52 | + "pretty-bytes": "^2.0.1", |
53 | "vinyl-buffer": "~1.0.0", |
54 | "vinyl-source-stream": "~1.1.0", |
55 | "watchify": "~3.1.2" |
56 | |
57 | === added file 'www/src/css/animations.css' |
58 | --- www/src/css/animations.css 1970-01-01 00:00:00 +0000 |
59 | +++ www/src/css/animations.css 2015-05-26 10:09:09 +0000 |
60 | @@ -0,0 +1,4 @@ |
61 | +@keyframes rotate { |
62 | + from { transform: rotate(0deg) } |
63 | + to { transform: rotate(360deg) } |
64 | +} |
65 | |
66 | === modified file 'www/src/css/banner.css' |
67 | --- www/src/css/banner.css 2015-05-08 20:03:48 +0000 |
68 | +++ www/src/css/banner.css 2015-05-26 10:09:09 +0000 |
69 | @@ -1,12 +1,14 @@ |
70 | /** @define b-banner; weak */ |
71 | |
72 | .b-banner { |
73 | - display:flex; |
74 | - align-items:center; |
75 | - background-color:#202020; |
76 | + background-color:#2f2f2f; |
77 | color:#efefef; |
78 | line-height:20px; |
79 | } |
80 | +.b-banner .b-layout__container { |
81 | + display:flex; |
82 | + align-items:center; |
83 | +} |
84 | |
85 | .b-banner img { |
86 | display:block; |
87 | |
88 | === modified file 'www/src/css/base.css' |
89 | --- www/src/css/base.css 2015-04-30 14:38:12 +0000 |
90 | +++ www/src/css/base.css 2015-05-26 10:09:09 +0000 |
91 | @@ -13,7 +13,7 @@ |
92 | } |
93 | |
94 | body { |
95 | - background: url('../images/image-background-paper.png') repeat-y fixed 50% 0 #f7f7f7; |
96 | + background-color:#f7f7f7; |
97 | } |
98 | |
99 | a { |
100 | |
101 | === added file 'www/src/css/headline.css' |
102 | --- www/src/css/headline.css 1970-01-01 00:00:00 +0000 |
103 | +++ www/src/css/headline.css 2015-05-26 10:09:09 +0000 |
104 | @@ -0,0 +1,10 @@ |
105 | +/** @define b-headline; weak */ |
106 | + |
107 | +.b-headline { |
108 | +} |
109 | + |
110 | +.b-headline__h1 { |
111 | + font-size:18px; |
112 | + font-weight:400; |
113 | + margin:20px 15px 5px 15px; |
114 | +} |
115 | |
116 | === added file 'www/src/css/icon.css' |
117 | --- www/src/css/icon.css 1970-01-01 00:00:00 +0000 |
118 | +++ www/src/css/icon.css 2015-05-26 10:09:09 +0000 |
119 | @@ -0,0 +1,23 @@ |
120 | +.b-icon { |
121 | + position:relative; |
122 | + display:inline-block; |
123 | +} |
124 | + |
125 | +.b-icon::before { |
126 | + content: ""; |
127 | + position:absolute; |
128 | + top:0; |
129 | + left:0; |
130 | + right:0; |
131 | + bottom:0; |
132 | + background-color:transparent; |
133 | + background-image:url(/public/images/icon-mask.png); |
134 | + background-repeat:no-repeat; |
135 | + background-position:50% 50%; |
136 | + background-size:100% 100%; |
137 | + z-index:10; |
138 | +} |
139 | + |
140 | +.b-icon img { |
141 | + display:block; |
142 | +} |
143 | |
144 | === modified file 'www/src/css/layout.css' |
145 | --- www/src/css/layout.css 2015-05-08 20:03:48 +0000 |
146 | +++ www/src/css/layout.css 2015-05-26 10:09:09 +0000 |
147 | @@ -11,12 +11,20 @@ |
148 | |
149 | .b-layout__main { |
150 | flex: 1; |
151 | - padding:0 3em; |
152 | + position:relative; |
153 | } |
154 | |
155 | -.b-layout__main:empty { |
156 | - opacity:0.5; |
157 | - background:transparent url("/public/images/default-package-icon.svg") 50% 50% no-repeat; |
158 | +.b-layout__main:empty::before { |
159 | + content:""; |
160 | + position:absolute; |
161 | + top:50%; |
162 | + left:50%; |
163 | + width:128px; |
164 | + height:128px; |
165 | + margin:-64px 0 0 -64px; |
166 | + background:transparent url("/public/images/cof.svg") 50% 50% no-repeat; |
167 | + background-size: 100% 100%; |
168 | + animation: rotate 3s linear infinite; |
169 | } |
170 | |
171 | .b-layout__main:empty + .b-layout__footer { |
172 | @@ -36,3 +44,56 @@ |
173 | width: 100%; |
174 | z-index: 10000; |
175 | } |
176 | + |
177 | +.b-layout__container { |
178 | + width:312px; |
179 | + margin:0 auto; |
180 | +} |
181 | + |
182 | +@media (--xxs) { |
183 | +.b-layout__container { |
184 | + width: 424px; |
185 | + } |
186 | +} |
187 | + |
188 | +@media (--xs) { |
189 | +.b-layout__container { |
190 | + width: 540px; |
191 | + } |
192 | +} |
193 | + |
194 | +@media (--s) { |
195 | +.b-layout__container { |
196 | + width: 660px; |
197 | + } |
198 | +} |
199 | + |
200 | +@media (--m) { |
201 | +.b-layout__container { |
202 | + width: 770px; |
203 | + } |
204 | +} |
205 | + |
206 | +@media (--l) { |
207 | +.b-layout__container { |
208 | + width: 880px; |
209 | + } |
210 | +} |
211 | + |
212 | +@media (--xl) { |
213 | +.b-layout__container { |
214 | + width: 1100px; |
215 | + } |
216 | +} |
217 | + |
218 | +@media (--xxl) { |
219 | +.b-layout__container { |
220 | + width: 1430px; |
221 | + } |
222 | +} |
223 | + |
224 | +@media (--xxxl) { |
225 | +.b-layout__container { |
226 | + width: 1870px; |
227 | + } |
228 | +} |
229 | |
230 | === modified file 'www/src/css/snap.css' |
231 | --- www/src/css/snap.css 2015-05-08 20:03:48 +0000 |
232 | +++ www/src/css/snap.css 2015-05-26 10:09:09 +0000 |
233 | @@ -3,23 +3,19 @@ |
234 | .b-snap { |
235 | } |
236 | |
237 | -.b-snap__icon { |
238 | -} |
239 | -.b-snap__icon img { |
240 | - display:block; |
241 | +.b-snap .b-icon { |
242 | } |
243 | |
244 | .b-snap__banner { |
245 | display: flex; |
246 | line-height:1.3; |
247 | - margin:0 -3em; |
248 | - padding:1.3em 3em 1.3em; |
249 | + padding:1.3em 0; |
250 | align-items: flex-start; |
251 | - background-color:rgba(255,255,255,0.7); |
252 | } |
253 | |
254 | .b-snap__meta { |
255 | flex: 2; |
256 | + margin-left:15px; |
257 | } |
258 | |
259 | .b-snap__meta > * { |
260 | @@ -36,13 +32,14 @@ |
261 | |
262 | .b-snap__navigation { |
263 | background-color:rgba(255,255,255,0.5); |
264 | - display: flex; |
265 | - align-items: center; |
266 | - margin:0 0 1em 0; |
267 | border-top:1px solid #efefef; |
268 | border-bottom:1px solid #ddd; |
269 | - margin:0 -3em 1em -3em; |
270 | - padding:0 3em; |
271 | + margin:0 0 1em 0; |
272 | +} |
273 | + |
274 | +.b-snap__navigation .b-layout__container { |
275 | + display: flex; |
276 | + align-items: center; |
277 | } |
278 | |
279 | .b-snap__nav-item { |
280 | @@ -64,3 +61,7 @@ |
281 | right:0; |
282 | height:3px; |
283 | } |
284 | + |
285 | +.b-snap__tab-content { |
286 | + padding:1.3em 3em 1.3em; |
287 | +} |
288 | |
289 | === modified file 'www/src/css/snaplist.css' |
290 | --- www/src/css/snaplist.css 2015-05-08 20:03:48 +0000 |
291 | +++ www/src/css/snaplist.css 2015-05-26 10:09:09 +0000 |
292 | @@ -15,16 +15,15 @@ |
293 | } |
294 | |
295 | .b-snaplist_grid .b-snaplist__item { |
296 | - flex: 0 1 20%; |
297 | - padding:10px; |
298 | -} |
299 | - |
300 | -.b-snaplist_grid .b-snaplist__icon { |
301 | -} |
302 | - |
303 | -.b-snaplist_grid .b-snaplist__icon img { |
304 | - border-radius:15%; |
305 | - width:100%; |
306 | + flex: 0 1 auto; |
307 | + padding:7px; |
308 | + font-size:0; |
309 | +} |
310 | + |
311 | +.b-snaplist_grid .b-snaplist__item * { |
312 | + font-size: 12px; |
313 | + color:#999; |
314 | + text-align: center; |
315 | } |
316 | |
317 | .b-snaplist_grid .b-snaplist__name { |
318 | @@ -32,14 +31,57 @@ |
319 | white-space: nowrap; |
320 | overflow: hidden; |
321 | text-overflow: ellipsis; |
322 | -} |
323 | - |
324 | -.b-snaplist_grid .b-snaplist__name ~ * { |
325 | + margin-top:4px; |
326 | +} |
327 | + |
328 | +.b-snaplist_grid .b-snaplist__name, |
329 | +.b-snaplist_grid .b-icon img { |
330 | + width:90px; |
331 | +} |
332 | + |
333 | +.b-snaplist_grid :not(.b-snaplist__item-app) .b-icon::after { |
334 | + content: attr(data-type); |
335 | + position:absolute; |
336 | + width:100%; |
337 | + bottom:0; |
338 | + left:0; |
339 | + right:0; |
340 | + background: rgba(221,72,20,0.8); |
341 | + color:#fff; |
342 | + z-index:0; |
343 | + padding:3px 0 5px; |
344 | + text-transform:uppercase; |
345 | + font-size:10px; |
346 | +} |
347 | + |
348 | +.b-snaplist_grid .b-snaplist__size ~ * { |
349 | display:none; |
350 | } |
351 | |
352 | +@media (--xxs) { |
353 | + .b-snaplist_grid .b-snaplist__item { |
354 | + padding:8px; |
355 | + } |
356 | +} |
357 | + |
358 | +@media (--xs) { |
359 | + .b-snaplist_grid .b-snaplist__item { |
360 | + padding:9px; |
361 | + } |
362 | +} |
363 | + |
364 | +@media (--s) { |
365 | + .b-snaplist_grid .b-snaplist__item { |
366 | + padding:10px; |
367 | + } |
368 | +} |
369 | + |
370 | /** row style **/ |
371 | |
372 | +.b-snaplist_row { |
373 | + margin:3em; |
374 | +} |
375 | + |
376 | .b-snaplist_row .b-snaplist__item { |
377 | width:100%; |
378 | display:flex; |
379 | @@ -48,17 +90,24 @@ |
380 | border-radius:4px; |
381 | margin-bottom:0.6em; |
382 | background-color:#fff; |
383 | + font-size:13px; |
384 | } |
385 | |
386 | .b-snaplist_row .b-snaplist__item:last-child { |
387 | margin-bottom:0; |
388 | } |
389 | |
390 | -.b-snaplist_row .b-snaplist__icon { |
391 | + |
392 | +.b-snaplist_row .b-icon { |
393 | flex:0 0 40px; |
394 | } |
395 | |
396 | -.b-snaplist_row .b-snaplist__icon img { |
397 | +.b-snaplist_row .b-icon::before { |
398 | + background-image: url(/public/images/icon-mask-on-white.png); |
399 | +} |
400 | + |
401 | + |
402 | +.b-snaplist_row .b-icon img { |
403 | display:block; |
404 | width: 40px; |
405 | height: 40px; |
406 | |
407 | === modified file 'www/src/images/cof.svg' |
408 | --- www/src/images/cof.svg 2015-04-24 23:05:53 +0000 |
409 | +++ www/src/images/cof.svg 2015-05-26 10:09:09 +0000 |
410 | @@ -1,27 +1,16 @@ |
411 | <?xml version="1.0" encoding="utf-8"?> |
412 | -<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In --> |
413 | -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ |
414 | - <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"> |
415 | -]> |
416 | -<svg version="1.1" |
417 | - xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" |
418 | - x="0px" y="0px" width="285px" height="285px" viewBox="-0.866 -0.866 285 285" enable-background="new -0.866 -0.866 285 285" |
419 | - xml:space="preserve"> |
420 | -<defs> |
421 | -</defs> |
422 | -<path fill="#FFFFFF" d="M283.465,141.734c0,78.273-63.457,141.73-141.734,141.73S0,220.008,0,141.734C0,63.455,63.453,0,141.73,0 |
423 | - S283.465,63.455,283.465,141.734z"/> |
424 | -<path d="M45.356,122.812c-10.453,0-18.923,8.47-18.923,18.923c0,10.449,8.47,18.92,18.923,18.92c10.449,0,18.92-8.471,18.92-18.92 |
425 | - C64.276,131.281,55.806,122.812,45.356,122.812z M180.463,208.814c-9.051,5.225-12.149,16.793-6.926,25.84 |
426 | - c5.226,9.051,16.793,12.151,25.844,6.926c9.048-5.224,12.148-16.792,6.923-25.842C201.08,206.691,189.511,203.59,180.463,208.814z |
427 | - M86.458,141.732c0-18.701,9.293-35.219,23.504-45.221L96.128,73.338c-16.56,11.064-28.878,27.978-33.995,47.788 |
428 | - c5.977,4.872,9.796,12.291,9.796,20.608c0,8.315-3.819,15.734-9.797,20.605c5.116,19.812,17.435,36.726,33.995,47.789l13.835-23.175 |
429 | - C95.751,176.953,86.458,160.436,86.458,141.732z M141.733,86.457c28.877,0,52.564,22.141,55.047,50.373l26.968-0.394 |
430 | - c-1.327-20.844-10.432-39.562-24.425-53.319c-7.194,2.718-15.505,2.306-22.688-1.842c-7.192-4.152-11.705-11.156-12.941-18.757 |
431 | - c-6.992-1.935-14.351-2.99-21.96-2.99c-13.086,0-25.449,3.072-36.431,8.512l13.146,23.56 |
432 | - C125.526,88.307,133.412,86.457,141.733,86.457z M141.733,197.008c-8.322,0-16.207-1.85-23.285-5.143L105.3,215.427 |
433 | - c10.983,5.438,23.347,8.511,36.433,8.511c7.609,0,14.968-1.055,21.961-2.99c1.236-7.601,5.75-14.605,12.943-18.76 |
434 | - c7.183-4.146,15.494-4.558,22.688-1.839c13.992-13.758,23.097-32.476,24.422-53.32l-26.968-0.394 |
435 | - C194.298,174.871,170.61,197.008,141.733,197.008z M180.46,74.649c9.05,5.227,20.619,2.126,25.842-6.921 |
436 | - c5.226-9.051,2.128-20.619-6.923-25.845c-9.049-5.224-20.617-2.124-25.843,6.927C168.312,57.857,171.412,69.426,180.46,74.649z"/> |
437 | +<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> |
438 | +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
439 | +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" |
440 | + width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve"> |
441 | +<path fill="#FFFFFF" d="M128,0C57.4,0,0,57.4,0,128s57.4,128,128,128s128-57.4,128-128S198.6,0,128,0z M152.4,52.4 |
442 | + C156.6,45,166,42.6,173.4,46.8s9.799,13.601,5.6,21c-4.199,7.4-13.6,9.8-21,5.601C150.6,69.2,148,59.8,152.4,52.4z M48.2,143.4 |
443 | + c-8.4,0-15.4-7-15.4-15.4s6.8-15.4,15.4-15.4c8.6,0,15.399,6.801,15.399,15.4C63.6,136.4,56.6,143.4,48.2,143.4z M61.8,144.801 |
444 | + c4.8-4,8-10,8-16.801c0-6.8-3-12.8-8-16.8C66,95,76,81.4,89.4,72.4L100.6,91.2c-11.6,8.2-19,21.6-19,36.8 |
445 | + c0,15.199,7.601,28.6,19,36.801L89.4,183.6C76,174.6,66,160.801,61.8,144.801z M173.4,209.199c-7.4,4.201-16.801,1.801-21-5.6 |
446 | + c-4.201-7.4-1.801-16.799,5.6-21c7.4-4.199,16.801-1.799,21,5.6C183.199,195.6,180.801,205,173.4,209.199z M173.4,175.6 |
447 | + c-5.801-2.199-12.6-2-18.4,1.4s-9.6,9-10.4,15.199c-5.6,1.602-11.6,2.4-17.8,2.4c-10.6,0-20.6-2.4-29.6-7l10.6-19.199 |
448 | + c5.8,2.799,12.2,4.199,19,4.199c23.399,0,42.8-18,44.8-40.799l22,0.398C192,149.199,184.6,164.4,173.4,175.6z M171.199,124 |
449 | + c-2-23-21.199-41-44.799-41c-6.801,0-13.2,1.4-19,4.2L96.8,68c9-4.4,19-7,29.601-7c6.199,0,12.199,0.8,17.799,2.4 |
450 | + c1,6.199,4.602,11.8,10.4,15.199C160.4,82,167.199,82.4,173,80c11.4,11.2,18.801,26.4,19.801,43.4L171.199,124z"/> |
451 | </svg> |
452 | |
453 | === modified file 'www/src/images/default-package-icon.svg' |
454 | --- www/src/images/default-package-icon.svg 2015-04-30 13:42:46 +0000 |
455 | +++ www/src/images/default-package-icon.svg 2015-05-26 10:09:09 +0000 |
456 | @@ -1,16 +1,38 @@ |
457 | <?xml version="1.0" encoding="utf-8"?> |
458 | <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> |
459 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
460 | -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" |
461 | - width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve"> |
462 | -<path fill="#FFFFFF" d="M128,64c-35.3,0-64,28.7-64,64c0,35.3,28.7,64,64,64c35.3,0,64-28.7,64-64C192,92.7,163.3,64,128,64z |
463 | - M140.2,90.2c2.1-3.7,6.8-4.9,10.5-2.8c3.7,2.1,4.9,6.8,2.8,10.5c-2.1,3.7-6.8,4.9-10.5,2.8C139.3,98.6,138,93.9,140.2,90.2z |
464 | - M88.1,135.7c-4.2,0-7.7-3.5-7.7-7.7c0-4.2,3.4-7.7,7.7-7.7c4.3,0,7.7,3.4,7.7,7.7C95.8,132.2,92.3,135.7,88.1,135.7z M94.9,136.4 |
465 | - c2.4-2,4-5,4-8.4c0-3.4-1.5-6.4-4-8.4c2.1-8.1,7.1-14.9,13.8-19.4l5.6,9.4c-5.8,4.1-9.5,10.8-9.5,18.4c0,7.6,3.8,14.3,9.5,18.4 |
466 | - l-5.6,9.4C102,151.3,97,144.4,94.9,136.4z M150.7,168.6c-3.7,2.1-8.4,0.9-10.5-2.8c-2.1-3.7-0.9-8.4,2.8-10.5 |
467 | - c3.7-2.1,8.4-0.9,10.5,2.8C155.6,161.8,154.4,166.5,150.7,168.6z M150.7,151.8c-2.9-1.1-6.3-1-9.2,0.7c-2.9,1.7-4.8,4.5-5.2,7.6 |
468 | - c-2.8,0.8-5.8,1.2-8.9,1.2c-5.3,0-10.3-1.2-14.8-3.5l5.3-9.6c2.9,1.4,6.1,2.1,9.5,2.1c11.7,0,21.4-9,22.4-20.4l11,0.2 |
469 | - C160,138.6,156.3,146.2,150.7,151.8z M149.6,126c-1-11.5-10.6-20.5-22.4-20.5c-3.4,0-6.6,0.7-9.5,2.1l-5.3-9.6 |
470 | - c4.5-2.2,9.5-3.5,14.8-3.5c3.1,0,6.1,0.4,8.9,1.2c0.5,3.1,2.3,5.9,5.2,7.6c2.9,1.7,6.3,1.9,9.2,0.7c5.7,5.6,9.4,13.2,9.9,21.7 |
471 | - L149.6,126z"/> |
472 | +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="256px" |
473 | + height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve"> |
474 | +<g id="Layer_1"> |
475 | + <rect fill="#EFEFEF" width="256" height="256"/> |
476 | +</g> |
477 | +<g id="Layer_2"> |
478 | + <line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="32" y1="0" x2="32" y2="256"/> |
479 | + <line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="96" y1="0" x2="96" y2="256"/> |
480 | + <line fill="none" stroke="#C1C1C1" stroke-miterlimit="10" x1="64" y1="0" x2="64" y2="256"/> |
481 | + <line fill="#EFEFEF" stroke="#AAAAAA" stroke-miterlimit="10" x1="128" y1="0" x2="128" y2="256"/> |
482 | + <line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="160" y1="0" x2="160" y2="256"/> |
483 | + <line fill="none" stroke="#C1C1C1" stroke-miterlimit="10" x1="192" y1="0" x2="192" y2="256"/> |
484 | + <line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="224" y1="0" x2="224" y2="256"/> |
485 | + <line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="0" y1="224" x2="256" y2="224"/> |
486 | + <line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="0" y1="160" x2="256" y2="160"/> |
487 | + <line fill="none" stroke="#C1C1C1" stroke-miterlimit="10" x1="0" y1="192" x2="256" y2="192"/> |
488 | + <line fill="#EFEFEF" stroke="#AAAAAA" stroke-miterlimit="10" x1="0" y1="128" x2="256" y2="128"/> |
489 | + <line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="0" y1="96" x2="256" y2="96"/> |
490 | + <line fill="none" stroke="#C1C1C1" stroke-miterlimit="10" x1="0" y1="64" x2="256" y2="64"/> |
491 | + <line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="0" y1="32" x2="256" y2="32"/> |
492 | +</g> |
493 | +<g id="Layer_3"> |
494 | + <circle fill="#EFEFEF" cx="128" cy="128" r="64"/> |
495 | + <path fill="#EFEFEF" stroke="#AAAAAA" stroke-miterlimit="10" d="M128,64c-35.3,0-64,28.7-64,64s28.7,64,64,64s64-28.7,64-64 |
496 | + S163.3,64,128,64z M140.2,90.2c2.1-3.7,6.8-4.9,10.5-2.8s4.899,6.8,2.8,10.5c-2.1,3.7-6.8,4.9-10.5,2.8 |
497 | + C139.3,98.6,138,93.9,140.2,90.2z M88.1,135.7c-4.2,0-7.7-3.5-7.7-7.7s3.4-7.7,7.7-7.7c4.3,0,7.7,3.4,7.7,7.7 |
498 | + C95.8,132.2,92.3,135.7,88.1,135.7z M94.9,136.4c2.4-2,4-5,4-8.4c0-3.4-1.5-6.4-4-8.4c2.1-8.1,7.1-14.9,13.8-19.4l5.6,9.4 |
499 | + c-5.8,4.1-9.5,10.8-9.5,18.4c0,7.6,3.8,14.3,9.5,18.4l-5.6,9.399C102,151.3,97,144.4,94.9,136.4z M150.7,168.6 |
500 | + c-3.7,2.101-8.4,0.9-10.5-2.8c-2.101-3.7-0.9-8.399,2.8-10.5c3.7-2.1,8.4-0.899,10.5,2.8C155.6,161.8,154.4,166.5,150.7,168.6z |
501 | + M150.7,151.8c-2.9-1.1-6.3-1-9.2,0.7s-4.8,4.5-5.2,7.6c-2.8,0.801-5.8,1.2-8.9,1.2c-5.3,0-10.3-1.2-14.8-3.5l5.3-9.6 |
502 | + c2.9,1.399,6.1,2.1,9.5,2.1c11.7,0,21.4-9,22.4-20.399l11,0.199C160,138.6,156.3,146.2,150.7,151.8z M149.6,126 |
503 | + c-1-11.5-10.6-20.5-22.399-20.5c-3.4,0-6.6,0.7-9.5,2.1l-5.3-9.6c4.5-2.2,9.5-3.5,14.8-3.5c3.1,0,6.1,0.4,8.899,1.2 |
504 | + c0.5,3.1,2.301,5.9,5.2,7.6c2.9,1.7,6.3,1.9,9.2,0.7c5.7,5.6,9.4,13.2,9.9,21.7L149.6,126z"/> |
505 | +</g> |
506 | </svg> |
507 | |
508 | === added file 'www/src/images/icon-mask-on-white.png' |
509 | Binary files www/src/images/icon-mask-on-white.png 1970-01-01 00:00:00 +0000 and www/src/images/icon-mask-on-white.png 2015-05-26 10:09:09 +0000 differ |
510 | === added file 'www/src/images/icon-mask.png' |
511 | Binary files www/src/images/icon-mask.png 1970-01-01 00:00:00 +0000 and www/src/images/icon-mask.png 2015-05-26 10:09:09 +0000 differ |
512 | === modified file 'www/src/js/models/snap.js' |
513 | --- www/src/js/models/snap.js 2015-05-11 10:30:57 +0000 |
514 | +++ www/src/js/models/snap.js 2015-05-26 10:09:09 +0000 |
515 | @@ -3,6 +3,7 @@ |
516 | var _ = require('lodash'); |
517 | var Backbone = require('backbone'); |
518 | var Radio = require('backbone.radio'); |
519 | +var prettyBytes = require('pretty-bytes'); |
520 | var CONF = require('../config.js'); |
521 | var chan = Radio.channel('root'); |
522 | |
523 | @@ -57,12 +58,34 @@ |
524 | chan.command('alert:error', model); |
525 | }); |
526 | |
527 | - this.on('add change:message', this.onMessageChange); |
528 | - |
529 | - this.on('add change:status', this.handleStatusChange); |
530 | - }, |
531 | - |
532 | - handleStatusChange: function(model) { |
533 | + this.on('add change:status', this.onStatusChange); |
534 | + this.on('add change:installed_size', this.onInstalledSizeChange); |
535 | + this.on('add change:download_size', this.onDownloadSizeChange); |
536 | + }, |
537 | + |
538 | + onDownloadSizeChange: function(model) { |
539 | + var bytes = model.get('download_size'); |
540 | + model.set( |
541 | + 'prettyDownloadSize', this._prettyBytes(model.get('download_size')) |
542 | + ); |
543 | + }, |
544 | + |
545 | + onInstalledSizeChange: function(model) { |
546 | + var bytes = model.get('installed_size'); |
547 | + model.set( |
548 | + 'prettyInstalledSize', this._prettyBytes(model.get('installed_size')) |
549 | + ); |
550 | + }, |
551 | + |
552 | + _prettyBytes: function(bytes) { |
553 | + if (_.isNumber(bytes) && bytes >= 0) { |
554 | + return prettyBytes(bytes); |
555 | + } else { |
556 | + return false; |
557 | + } |
558 | + }, |
559 | + |
560 | + onStatusChange: function(model) { |
561 | this.setInstallActionString(model); |
562 | this.setInstallHTMLClass(model); |
563 | }, |
564 | @@ -164,6 +187,8 @@ |
565 | icon: '/public/images/default-package-icon.svg', |
566 | installActionString: false, |
567 | origin: '-', |
568 | + installed_size: 'n/a', |
569 | + download_size: 'n/a', |
570 | isInstallable: true |
571 | } |
572 | |
573 | |
574 | === modified file 'www/src/js/templates/home.hbs' |
575 | --- www/src/js/templates/home.hbs 2015-05-02 19:00:37 +0000 |
576 | +++ www/src/js/templates/home.hbs 2015-05-26 10:09:09 +0000 |
577 | @@ -1,2 +1,6 @@ |
578 | -<h1>Installed apps</h1> |
579 | +<div class="b-headline"> |
580 | + <div class="b-layout__container"> |
581 | + <h1 class="b-headline__h1">Installed snaps</h1> |
582 | + </div> |
583 | +</div> |
584 | <div class="region-installed"></div> |
585 | |
586 | === modified file 'www/src/js/templates/layout-banner.hbs' |
587 | --- www/src/js/templates/layout-banner.hbs 2015-05-08 20:03:48 +0000 |
588 | +++ www/src/js/templates/layout-banner.hbs 2015-05-26 10:09:09 +0000 |
589 | @@ -1,32 +1,34 @@ |
590 | -<div class="b-banner__brand"> |
591 | - <div class="b-banner__nav-item{{#if isHomeActive }} b-banner__nav-item_active{{/if}}"> |
592 | - <a href="/"> |
593 | - <img src="/public/images/cof.svg" height="30" width="30"> |
594 | - <span>{{ name }} {{ subname }}</span> |
595 | - </a> |
596 | - </div> |
597 | -</div> |
598 | -<div class="b-banner__primary-nav"> |
599 | - <div class="b-banner__nav-item{{#if isStoreActive }} b-banner__nav-item_active{{/if}}"> |
600 | - <a href="/store"> |
601 | - Snappy store |
602 | - </a> |
603 | - </div> |
604 | -</div> |
605 | -<!-- |
606 | -<div class="b-banner__search"> |
607 | - <form class="b-banner__form" action="/search" method="GET"> |
608 | - <input class="b-banner__input" type="search" name="q" placeholder="Search for snaps" value="{{ query }}"> |
609 | - <div class="b-banner__nav-item{{#if isSearchActive }} b-banner__nav-item_active{{/if}}"> |
610 | - <button type="submit" class="b-banner__submit"></button> |
611 | - </div> |
612 | - </form> |
613 | -</div> |
614 | -<div class="b-banner__secondary-nav"> |
615 | - <div class="b-banner__nav-item{{#if isSystemActive }} b-banner__nav-item_active{{/if}}"> |
616 | - <a href="/system-settings"> |
617 | - <img src="/public/images/settings.svg" height="30" width="30"> |
618 | - </a> |
619 | - </div> |
620 | -</div> |
621 | ---> |
622 | +<div class="b-layout__container"> |
623 | + <div class="b-banner__brand"> |
624 | + <div class="b-banner__nav-item{{#if isHomeActive }} b-banner__nav-item_active{{/if}}"> |
625 | + <a href="/"> |
626 | + <img src="/public/images/cof.svg" height="30" width="30"> |
627 | + <span>{{ name }} {{ subname }}</span> |
628 | + </a> |
629 | + </div> |
630 | + </div> |
631 | + <div class="b-banner__primary-nav"> |
632 | + <div class="b-banner__nav-item{{#if isStoreActive }} b-banner__nav-item_active{{/if}}"> |
633 | + <a href="/store"> |
634 | + Snappy store |
635 | + </a> |
636 | + </div> |
637 | + </div> |
638 | + <!-- |
639 | + <div class="b-banner__search"> |
640 | + <form class="b-banner__form" action="/search" method="GET"> |
641 | + <input class="b-banner__input" type="search" name="q" placeholder="Search for snaps" value="{{ query }}"> |
642 | + <div class="b-banner__nav-item{{#if isSearchActive }} b-banner__nav-item_active{{/if}}"> |
643 | + <button type="submit" class="b-banner__submit"></button> |
644 | + </div> |
645 | + </form> |
646 | + </div> |
647 | + <div class="b-banner__secondary-nav"> |
648 | + <div class="b-banner__nav-item{{#if isSystemActive }} b-banner__nav-item_active{{/if}}"> |
649 | + <a href="/system-settings"> |
650 | + <img src="/public/images/settings.svg" height="30" width="30"> |
651 | + </a> |
652 | + </div> |
653 | + </div> |
654 | + --> |
655 | +</div> |
656 | |
657 | === modified file 'www/src/js/templates/snap-detail.hbs' |
658 | --- www/src/js/templates/snap-detail.hbs 2015-05-04 16:44:28 +0000 |
659 | +++ www/src/js/templates/snap-detail.hbs 2015-05-26 10:09:09 +0000 |
660 | @@ -1,3 +1,9 @@ |
661 | -<div class="b-snap__icon"> |
662 | - <img src="{{ icon }}" width="256" height="256"> |
663 | -</div> |
664 | +{{#if description}} |
665 | +<p>{{ description }}</p> |
666 | +{{/if}} |
667 | +{{#if prettyInstalledSize}} |
668 | +<p>Installed size: {{prettyInstalledSize}}</p> |
669 | +{{/if}} |
670 | +{{#if prettyDownloadSize}} |
671 | +<p>Download size: {{prettyDownloadSize}}</p> |
672 | +{{/if}} |
673 | |
674 | === modified file 'www/src/js/templates/snap-layout.hbs' |
675 | --- www/src/js/templates/snap-layout.hbs 2015-05-08 13:11:16 +0000 |
676 | +++ www/src/js/templates/snap-layout.hbs 2015-05-26 10:09:09 +0000 |
677 | @@ -1,13 +1,18 @@ |
678 | -<div class="b-snap__banner"> |
679 | - <div class="b-snap__meta"> |
680 | - <h1 class="b-snap__title">{{ name }} {{ version }} {{ binary_filesize }}</h1> |
681 | - <p> |
682 | - <span class="b-snap__origin" title="Origin">{{ origin }}</span> |
683 | - <span class="b-snap__filesize" title="Package filesize">{{ binary_filesize}}</span> |
684 | - </p> |
685 | - </div> |
686 | - <div class="b-snap__actions"> |
687 | - {{> installer}} |
688 | +<div class="b-layout__container"> |
689 | + <div class="b-snap__banner"> |
690 | + <div class="b-icon"> |
691 | + <img src="{{ icon }}" width="70" height="70"> |
692 | + </div> |
693 | + <div class="b-snap__meta"> |
694 | + <h1 class="b-snap__title">{{ name }} {{ version }} {{ binary_filesize }}</h1> |
695 | + <p> |
696 | + <span title="Vendor">{{ vendor }}</span> |
697 | + <span>{{ binary_filesize}}</span> |
698 | + </p> |
699 | + </div> |
700 | + <div class="b-snap__actions"> |
701 | + {{> installer}} |
702 | + </div> |
703 | </div> |
704 | </div> |
705 | <div class="region-menu"></div> |
706 | |
707 | === modified file 'www/src/js/templates/snap-menu.hbs' |
708 | --- www/src/js/templates/snap-menu.hbs 2015-05-02 09:56:14 +0000 |
709 | +++ www/src/js/templates/snap-menu.hbs 2015-05-26 10:09:09 +0000 |
710 | @@ -1,9 +1,11 @@ |
711 | -<a class="b-snap__nav-item" href="details"> |
712 | - Details |
713 | -</a> |
714 | -<a class="b-snap__nav-item" href="reviews"> |
715 | - Reviews |
716 | -</a> |
717 | -<a class="b-snap__nav-item" href="settings"> |
718 | - Settings |
719 | -</a> |
720 | +<div class="b-layout__container"> |
721 | + <a class="b-snap__nav-item" href="details"> |
722 | + Details |
723 | + </a> |
724 | + <a class="b-snap__nav-item" href="reviews"> |
725 | + Reviews |
726 | + </a> |
727 | + <a class="b-snap__nav-item" href="settings"> |
728 | + Settings |
729 | + </a> |
730 | +</div> |
731 | |
732 | === modified file 'www/src/js/templates/snaplist-item.hbs' |
733 | --- www/src/js/templates/snaplist-item.hbs 2015-05-08 13:11:16 +0000 |
734 | +++ www/src/js/templates/snaplist-item.hbs 2015-05-26 10:09:09 +0000 |
735 | @@ -1,11 +1,12 @@ |
736 | -<div class="b-snaplist__icon"> |
737 | - <img src="{{ icon }}" alt="{{ name }} icon"> |
738 | +<div class="b-icon" data-type="{{type}}"> |
739 | + <img src="{{ icon }}" width="90" height="90"> |
740 | </div> |
741 | <div class="b-snaplist__name">{{ name }}</div> |
742 | {{!-- only name is shown in grid view, everything after is hidden --}} |
743 | +<div class="b-snaplist__size" title="Installed file size">{{ prettyInstalledSize }}</div> |
744 | <div class="b-snaplist__version">{{ version }}</div> |
745 | +<div class="b-snaplist__type">{{ type }}</div> |
746 | <div class="b-snaplist__origin">{{ origin }}</div> |
747 | -<div class="b-snaplist__type">{{ type }}</div> |
748 | <div class="b-snaplist__actions"> |
749 | {{> installer}} |
750 | </div> |
751 | |
752 | === modified file 'www/src/js/templates/store.hbs' |
753 | --- www/src/js/templates/store.hbs 2015-05-02 19:00:37 +0000 |
754 | +++ www/src/js/templates/store.hbs 2015-05-26 10:09:09 +0000 |
755 | @@ -1,2 +1,1 @@ |
756 | -<h1>Store Snaps</h1> |
757 | <div class="region-product"></div> |
758 | |
759 | === modified file 'www/src/js/views/home.js' |
760 | --- www/src/js/views/home.js 2015-04-24 20:47:44 +0000 |
761 | +++ www/src/js/views/home.js 2015-05-26 10:09:09 +0000 |
762 | @@ -6,6 +6,8 @@ |
763 | |
764 | module.exports = Backbone.Marionette.LayoutView.extend({ |
765 | |
766 | + className: 'b-layout__container', |
767 | + |
768 | template : function() { |
769 | return template(); |
770 | }, |
771 | |
772 | === modified file 'www/src/js/views/snap-detail.js' |
773 | --- www/src/js/views/snap-detail.js 2015-04-11 15:14:07 +0000 |
774 | +++ www/src/js/views/snap-detail.js 2015-05-26 10:09:09 +0000 |
775 | @@ -4,6 +4,7 @@ |
776 | var template = require('../templates/snap-detail.hbs'); |
777 | |
778 | module.exports = Backbone.Marionette.ItemView.extend({ |
779 | + className: 'b-snap__tab-content', |
780 | template: function(model) { |
781 | return template(model); |
782 | }, |
783 | |
784 | === modified file 'www/src/js/views/snap-reviews.js' |
785 | --- www/src/js/views/snap-reviews.js 2015-04-24 23:05:53 +0000 |
786 | +++ www/src/js/views/snap-reviews.js 2015-05-26 10:09:09 +0000 |
787 | @@ -4,7 +4,7 @@ |
788 | var template = require('../templates/snap-reviews.hbs'); |
789 | |
790 | module.exports = Backbone.Marionette.ItemView.extend({ |
791 | - |
792 | + className: 'b-snap__tab-content', |
793 | template: function() { |
794 | return template(); |
795 | } |
796 | |
797 | === modified file 'www/src/js/views/snap-settings.js' |
798 | --- www/src/js/views/snap-settings.js 2015-04-11 15:14:07 +0000 |
799 | +++ www/src/js/views/snap-settings.js 2015-05-26 10:09:09 +0000 |
800 | @@ -4,6 +4,7 @@ |
801 | var template = require('../templates/snap-settings.hbs'); |
802 | |
803 | module.exports = Backbone.Marionette.ItemView.extend({ |
804 | + className: 'b-snap__tab-content', |
805 | template: function() { |
806 | return template(); |
807 | }, |
808 | |
809 | === modified file 'www/src/js/views/snaplist-item.js' |
810 | --- www/src/js/views/snaplist-item.js 2015-05-08 14:53:07 +0000 |
811 | +++ www/src/js/views/snaplist-item.js 2015-05-26 10:09:09 +0000 |
812 | @@ -13,7 +13,14 @@ |
813 | |
814 | module.exports = Marionette.ItemView.extend({ |
815 | |
816 | - className: 'b-snaplist__item', |
817 | + className: function() { |
818 | + var type = this.model.get('type'); |
819 | + var className = 'b-snaplist__item'; |
820 | + if (type) { |
821 | + className += ' b-snaplist__item-' + type; |
822 | + } |
823 | + return className; |
824 | + }, |
825 | |
826 | template: function(model) { |
827 | return template(model); |
828 | |
829 | === modified file 'www/tests/snapItemViewSpec.js' |
830 | --- www/tests/snapItemViewSpec.js 2015-05-05 14:40:14 +0000 |
831 | +++ www/tests/snapItemViewSpec.js 2015-05-26 10:09:09 +0000 |
832 | @@ -1,10 +1,15 @@ |
833 | var Backbone = require('backbone'); |
834 | +var Snap = require('../src/js/models/snap.js'); |
835 | var SnapItemView = require('../src/js/views/snaplist-item.js'); |
836 | |
837 | describe('SnapItemView', function() { |
838 | |
839 | beforeEach(function() { |
840 | - this.view = new SnapItemView(); |
841 | + this.view = new SnapItemView({ |
842 | + model: new Snap({ |
843 | + id: 'foo' |
844 | + }) |
845 | + }); |
846 | }); |
847 | |
848 | afterEach(function() { |
849 | @@ -16,4 +21,11 @@ |
850 | expect(this.view).toEqual(jasmine.any(Backbone.View)); |
851 | }); |
852 | |
853 | + it('should have a b-snaplist className with type modifier when present in model', function() { |
854 | + this.view.model.unset('type'); |
855 | + expect(this.view.className()).toBe('b-snaplist__item'); |
856 | + this.view.model.set('type', 'foo'); |
857 | + expect(this.view.className()).toBe('b-snaplist__item b-snaplist__item-foo'); |
858 | + }); |
859 | + |
860 | }); |