Merge lp:~stephen-stewart/snapweb/repent-harlequin-said-the-ticktockman into lp:~snappy-dev/snapweb/trunk

[Stephen Stewart]

[lp:~stephen-stewart/snapweb/repent-harlequin-said-the-ticktockman]

154. By Stephen Stewart on 2015-05-26

merge lp:~stephen-stewart/webdm/icons-icons-icons

155. By Stephen Stewart on 2015-05-27

wrap snap tab content

Unmerged revisions

=== modified file 'gulpfile.js'
--- gulpfile.js	2015-05-09 09:33:57 +0000
+++ gulpfile.js	2015-05-26 10:09:09 +0000
@@ -6,6 +6,7 @@
 var buffer = require('vinyl-buffer');
 var concat = require('gulp-concat');
 var csso = require('gulp-csso');
+var customMedia = require("postcss-custom-media");
 var del = require('del');
 var gulp = require('gulp');
 var gutil = require('gulp-util');
@@ -47,7 +48,7 @@
   }
 
   return bundleShared(bundler);
-} 
+}
 
 function bundleShared(bundler) {
   return bundler.bundle()
@@ -75,7 +76,20 @@
 gulp.task('styles', ['styles:clean'], function() {
   var processors = [
     autoprefixer({browsers: ['last 1 version']}),
-    bemlinter('bem')
+    bemlinter('bem'),
+    customMedia({
+      extensions: {
+        /** multiples of icon width in grid form **/
+        '--xxs':   '(min-width:  424px)',
+        '--xs':    '(min-width:  540px)',
+        '--s':     '(min-width:  660px)',
+        '--m':     '(min-width:  770px)',
+        '--l':     '(min-width:  880px)',
+        '--xl':    '(min-width:  1100px)',
+        '--xxl':   '(min-width:  1430px)',
+        '--xxxl':  '(min-width:  1870px)'
+      }
+    })
   ];
   return gulp.src([
     'node_modules/normalize.css/normalize.css',
 
=== modified file 'package.json'
--- package.json	2015-05-08 22:41:11 +0000
+++ package.json	2015-05-26 10:09:09 +0000
@@ -37,6 +37,8 @@
     "lodash": "~3.3.1",
     "normalize.css": "^3.0.3",
     "postcss-bem-linter": "git://github.com/necolas/postcss-bem-linter",
+    "postcss-custom-media": "^3.0.0",
+    "pretty-bytes": "^2.0.1",
     "vinyl-buffer": "~1.0.0",
     "vinyl-source-stream": "~1.1.0",
     "watchify": "~3.1.2"
 
=== added file 'www/src/css/animations.css'
--- www/src/css/animations.css	1970-01-01 00:00:00 +0000
+++ www/src/css/animations.css	2015-05-26 10:09:09 +0000
@@ -0,0 +1,4 @@
+@keyframes rotate {
+  from { transform: rotate(0deg) }
+  to { transform: rotate(360deg) }
+}
 
=== modified file 'www/src/css/banner.css'
--- www/src/css/banner.css	2015-05-08 20:03:48 +0000
+++ www/src/css/banner.css	2015-05-26 10:09:09 +0000
@@ -1,12 +1,14 @@
 /** @define b-banner; weak */
 
 .b-banner {
-  display:flex;
-  align-items:center;
-  background-color:#202020;
+  background-color:#2f2f2f;
   color:#efefef;
   line-height:20px;
 }
+.b-banner .b-layout__container {
+  display:flex;
+  align-items:center;
+}
 
 .b-banner img {
   display:block;
 
=== modified file 'www/src/css/base.css'
--- www/src/css/base.css	2015-04-30 14:38:12 +0000
+++ www/src/css/base.css	2015-05-26 10:09:09 +0000
@@ -13,7 +13,7 @@
 }
 
 body {
-  background: url('../images/image-background-paper.png') repeat-y fixed 50% 0 #f7f7f7;
+  background-color:#f7f7f7;
 }
 
 a {
 
=== added file 'www/src/css/headline.css'
--- www/src/css/headline.css	1970-01-01 00:00:00 +0000
+++ www/src/css/headline.css	2015-05-26 10:09:09 +0000
@@ -0,0 +1,10 @@
+/** @define b-headline; weak */
+
+.b-headline {
+}
+
+.b-headline__h1 {
+  font-size:18px;
+  font-weight:400;
+  margin:20px 15px 5px 15px;
+}
 
=== added file 'www/src/css/icon.css'
--- www/src/css/icon.css	1970-01-01 00:00:00 +0000
+++ www/src/css/icon.css	2015-05-26 10:09:09 +0000
@@ -0,0 +1,23 @@
+.b-icon {
+  position:relative;
+  display:inline-block;
+}
+
+.b-icon::before {
+  content: "";
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  background-color:transparent;
+  background-image:url(/public/images/icon-mask.png);
+  background-repeat:no-repeat;
+  background-position:50% 50%;
+  background-size:100% 100%;
+  z-index:10;
+}
+
+.b-icon img {
+  display:block;
+}
 
=== modified file 'www/src/css/layout.css'
--- www/src/css/layout.css	2015-05-08 20:03:48 +0000
+++ www/src/css/layout.css	2015-05-26 10:09:09 +0000
@@ -11,12 +11,20 @@
 
 .b-layout__main {
   flex: 1;
-  padding:0 3em;
+  position:relative;
 }
 
-.b-layout__main:empty {
-  opacity:0.5;
-  background:transparent url("/public/images/default-package-icon.svg") 50% 50% no-repeat;
+.b-layout__main:empty::before {
+  content:"";
+  position:absolute;
+  top:50%;
+  left:50%;
+  width:128px;
+  height:128px;
+  margin:-64px 0 0 -64px;
+  background:transparent url("/public/images/cof.svg") 50% 50% no-repeat;
+  background-size: 100% 100%;
+  animation: rotate 3s linear infinite;
 }
 
 .b-layout__main:empty + .b-layout__footer {
@@ -36,3 +44,56 @@
   width: 100%;
   z-index: 10000;
 }
+
+.b-layout__container {
+  width:312px;
+  margin:0 auto;
+}
+
+@media (--xxs) {
+.b-layout__container {
+    width: 424px;
+  }
+}
+
+@media (--xs) {
+.b-layout__container {
+    width: 540px;
+  }
+}
+
+@media (--s) {
+.b-layout__container {
+    width: 660px;
+  }
+}
+
+@media (--m) {
+.b-layout__container {
+    width: 770px;
+  }
+}
+
+@media (--l) {
+.b-layout__container {
+    width: 880px;
+  }
+}
+
+@media (--xl) {
+.b-layout__container {
+    width: 1100px;
+  }
+}
+
+@media (--xxl) {
+.b-layout__container {
+    width: 1430px;
+  }
+}
+
+@media (--xxxl) {
+.b-layout__container {
+    width: 1870px;
+  }
+}
 
=== modified file 'www/src/css/snap.css'
--- www/src/css/snap.css	2015-05-08 20:03:48 +0000
+++ www/src/css/snap.css	2015-05-26 10:09:09 +0000
@@ -3,23 +3,19 @@
 .b-snap {
 }
 
-.b-snap__icon {
-}
-.b-snap__icon img {
-  display:block;
+.b-snap .b-icon {
 }
 
 .b-snap__banner {
   display: flex;
   line-height:1.3;
-  margin:0 -3em;
-  padding:1.3em 3em 1.3em;
+  padding:1.3em 0;
   align-items: flex-start;
-  background-color:rgba(255,255,255,0.7);
 }
 
 .b-snap__meta {
   flex: 2;
+  margin-left:15px;
 }
 
 .b-snap__meta > * {
@@ -36,13 +32,14 @@
 
 .b-snap__navigation {
   background-color:rgba(255,255,255,0.5);
-  display: flex;
-  align-items: center;
-  margin:0 0 1em 0;
   border-top:1px solid #efefef;
   border-bottom:1px solid #ddd;
-  margin:0 -3em 1em -3em;
-  padding:0 3em;
+  margin:0 0 1em 0;
+}
+
+.b-snap__navigation .b-layout__container {
+  display: flex;
+  align-items: center;
 }
 
 .b-snap__nav-item {
@@ -64,3 +61,7 @@
   right:0;
   height:3px;
 }
+
+.b-snap__tab-content {
+  padding:1.3em 3em 1.3em;
+}
 
=== modified file 'www/src/css/snaplist.css'
--- www/src/css/snaplist.css	2015-05-08 20:03:48 +0000
+++ www/src/css/snaplist.css	2015-05-26 10:09:09 +0000
@@ -15,16 +15,15 @@
 }
 
 .b-snaplist_grid .b-snaplist__item {
-  flex: 0 1 20%;
-  padding:10px;
-}
-
-.b-snaplist_grid .b-snaplist__icon {
-}
-
-.b-snaplist_grid .b-snaplist__icon img {
-  border-radius:15%;
-  width:100%;
+  flex: 0 1 auto;
+  padding:7px;
+  font-size:0;
+}
+
+.b-snaplist_grid .b-snaplist__item * {
+  font-size: 12px;
+  color:#999;
+  text-align: center;
 }
 
 .b-snaplist_grid .b-snaplist__name {
@@ -32,14 +31,57 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-
-.b-snaplist_grid .b-snaplist__name ~ * {
+  margin-top:4px;
+}
+
+.b-snaplist_grid .b-snaplist__name,
+.b-snaplist_grid .b-icon img {
+  width:90px;
+}
+
+.b-snaplist_grid :not(.b-snaplist__item-app) .b-icon::after {
+  content: attr(data-type);
+  position:absolute;
+  width:100%;
+  bottom:0;
+  left:0;
+  right:0;
+  background: rgba(221,72,20,0.8);
+  color:#fff;
+  z-index:0;
+  padding:3px 0 5px;
+  text-transform:uppercase;
+  font-size:10px;
+}
+
+.b-snaplist_grid .b-snaplist__size ~ * {
   display:none;
 }
 
+@media (--xxs) {
+  .b-snaplist_grid .b-snaplist__item {
+    padding:8px;
+  }
+}
+
+@media (--xs) {
+  .b-snaplist_grid .b-snaplist__item {
+    padding:9px;
+  }
+}
+
+@media (--s) {
+  .b-snaplist_grid .b-snaplist__item {
+    padding:10px;
+  }
+}
+
 /** row style **/
 
+.b-snaplist_row {
+  margin:3em;
+}
+
 .b-snaplist_row .b-snaplist__item {
   width:100%;
   display:flex;
@@ -48,17 +90,24 @@
   border-radius:4px;
   margin-bottom:0.6em;
   background-color:#fff;
+  font-size:13px;
 }
 
 .b-snaplist_row .b-snaplist__item:last-child {
   margin-bottom:0;
 }
 
-.b-snaplist_row .b-snaplist__icon {
+
+.b-snaplist_row .b-icon {
   flex:0 0 40px;
 }
 
-.b-snaplist_row .b-snaplist__icon img {
+.b-snaplist_row .b-icon::before {
+  background-image: url(/public/images/icon-mask-on-white.png);
+}
+
+
+.b-snaplist_row .b-icon img {
   display:block;
   width: 40px;
   height: 40px;
 
=== modified file 'www/src/images/cof.svg'
--- www/src/images/cof.svg	2015-04-24 23:05:53 +0000
+++ www/src/images/cof.svg	2015-05-26 10:09:09 +0000
@@ -1,27 +1,16 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
-	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
-]>
-<svg version="1.1"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
-	 x="0px" y="0px" width="285px" height="285px" viewBox="-0.866 -0.866 285 285" enable-background="new -0.866 -0.866 285 285"
-	 xml:space="preserve">
-<defs>
-</defs>
-<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
-	S283.465,63.455,283.465,141.734z"/>
-<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
-	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
-	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
-	 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
-	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
-	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
-	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
-	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
-	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
-	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
-	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
-	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
-	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"/>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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"
+	 width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+<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
+	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
+	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
+	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
+	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
+	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
+	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
+	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
+	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
+	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"/>
 </svg>
 
=== modified file 'www/src/images/default-package-icon.svg'
--- www/src/images/default-package-icon.svg	2015-04-30 13:42:46 +0000
+++ www/src/images/default-package-icon.svg	2015-05-26 10:09:09 +0000
@@ -1,16 +1,38 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<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"
-	 width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
-<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
-	 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
-	 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
-	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
-	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
-	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
-	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
-	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
-	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
-	L149.6,126z"/>
+<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"
+	 height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
+<g id="Layer_1">
+	<rect fill="#EFEFEF" width="256" height="256"/>
+</g>
+<g id="Layer_2">
+	<line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="32" y1="0" x2="32" y2="256"/>
+	<line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="96" y1="0" x2="96" y2="256"/>
+	<line fill="none" stroke="#C1C1C1" stroke-miterlimit="10" x1="64" y1="0" x2="64" y2="256"/>
+	<line fill="#EFEFEF" stroke="#AAAAAA" stroke-miterlimit="10" x1="128" y1="0" x2="128" y2="256"/>
+	<line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="160" y1="0" x2="160" y2="256"/>
+	<line fill="none" stroke="#C1C1C1" stroke-miterlimit="10" x1="192" y1="0" x2="192" y2="256"/>
+	<line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="224" y1="0" x2="224" y2="256"/>
+	<line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="0" y1="224" x2="256" y2="224"/>
+	<line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="0" y1="160" x2="256" y2="160"/>
+	<line fill="none" stroke="#C1C1C1" stroke-miterlimit="10" x1="0" y1="192" x2="256" y2="192"/>
+	<line fill="#EFEFEF" stroke="#AAAAAA" stroke-miterlimit="10" x1="0" y1="128" x2="256" y2="128"/>
+	<line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="0" y1="96" x2="256" y2="96"/>
+	<line fill="none" stroke="#C1C1C1" stroke-miterlimit="10" x1="0" y1="64" x2="256" y2="64"/>
+	<line fill="none" stroke="#DBDBDB" stroke-miterlimit="10" x1="0" y1="32" x2="256" y2="32"/>
+</g>
+<g id="Layer_3">
+	<circle fill="#EFEFEF" cx="128" cy="128" r="64"/>
+	<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
+		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
+		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
+		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
+		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
+		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
+		 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
+		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
+		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
+		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"/>
+</g>
 </svg>
 
=== added file 'www/src/images/icon-mask-on-white.png'
 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
=== added file 'www/src/images/icon-mask.png'
 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
=== modified file 'www/src/js/models/snap.js'
--- www/src/js/models/snap.js	2015-05-11 10:30:57 +0000
+++ www/src/js/models/snap.js	2015-05-26 10:09:09 +0000
@@ -3,6 +3,7 @@
 var _ = require('lodash');
 var Backbone = require('backbone');
 var Radio = require('backbone.radio');
+var prettyBytes = require('pretty-bytes');
 var CONF = require('../config.js');
 var chan = Radio.channel('root');
 
@@ -57,12 +58,34 @@
       chan.command('alert:error', model);
     });
 
-    this.on('add change:message', this.onMessageChange);
-
-    this.on('add change:status', this.handleStatusChange);
-  },
-
-  handleStatusChange: function(model) {
+    this.on('add change:status', this.onStatusChange);
+    this.on('add change:installed_size', this.onInstalledSizeChange);
+    this.on('add change:download_size', this.onDownloadSizeChange);
+  },
+
+  onDownloadSizeChange: function(model) {
+    var bytes = model.get('download_size');
+    model.set(
+      'prettyDownloadSize', this._prettyBytes(model.get('download_size'))
+    );
+  },
+
+  onInstalledSizeChange: function(model) {
+    var bytes = model.get('installed_size');
+    model.set(
+      'prettyInstalledSize', this._prettyBytes(model.get('installed_size'))
+    );
+  },
+
+  _prettyBytes: function(bytes) {
+    if (_.isNumber(bytes) && bytes >= 0) {
+      return prettyBytes(bytes);
+    } else {
+      return false;
+    }
+  },
+
+  onStatusChange: function(model) {
     this.setInstallActionString(model);
     this.setInstallHTMLClass(model);
   },
@@ -164,6 +187,8 @@
     icon: '/public/images/default-package-icon.svg',
     installActionString: false,
     origin: '-',
+    installed_size: 'n/a',
+    download_size: 'n/a',
     isInstallable: true
   }
 
 
=== modified file 'www/src/js/templates/home.hbs'
--- www/src/js/templates/home.hbs	2015-05-02 19:00:37 +0000
+++ www/src/js/templates/home.hbs	2015-05-26 10:09:09 +0000
@@ -1,2 +1,6 @@
-<h1>Installed apps</h1>
+<div class="b-headline">
+  <div class="b-layout__container">
+    <h1 class="b-headline__h1">Installed snaps</h1>
+  </div>
+</div>
 <div class="region-installed"></div>
 
=== modified file 'www/src/js/templates/layout-banner.hbs'
--- www/src/js/templates/layout-banner.hbs	2015-05-08 20:03:48 +0000
+++ www/src/js/templates/layout-banner.hbs	2015-05-26 10:09:09 +0000
@@ -1,32 +1,34 @@
-<div class="b-banner__brand">
-  <div class="b-banner__nav-item{{#if isHomeActive }} b-banner__nav-item_active{{/if}}">
-    <a href="/">
-      <img src="/public/images/cof.svg" height="30" width="30">
-      <span>{{ name }} {{ subname }}</span>
-    </a>
-  </div>
-</div>
-<div class="b-banner__primary-nav">
-  <div class="b-banner__nav-item{{#if isStoreActive }} b-banner__nav-item_active{{/if}}">
-    <a href="/store">
-      Snappy store
-    </a>
-  </div>
-</div>
-<!--
-<div class="b-banner__search">
-  <form class="b-banner__form" action="/search" method="GET">
-    <input class="b-banner__input" type="search" name="q" placeholder="Search for snaps" value="{{ query }}">
-    <div class="b-banner__nav-item{{#if isSearchActive }} b-banner__nav-item_active{{/if}}">
-      <button type="submit" class="b-banner__submit"></button>
-    </div>
-  </form>
-</div>
-<div class="b-banner__secondary-nav">
-  <div class="b-banner__nav-item{{#if isSystemActive }} b-banner__nav-item_active{{/if}}">
-    <a href="/system-settings">
-      <img src="/public/images/settings.svg" height="30" width="30">
-    </a>
-  </div>
-</div>
--->
+<div class="b-layout__container">
+  <div class="b-banner__brand">
+    <div class="b-banner__nav-item{{#if isHomeActive }} b-banner__nav-item_active{{/if}}">
+      <a href="/">
+        <img src="/public/images/cof.svg" height="30" width="30">
+        <span>{{ name }} {{ subname }}</span>
+      </a>
+    </div>
+  </div>
+  <div class="b-banner__primary-nav">
+    <div class="b-banner__nav-item{{#if isStoreActive }} b-banner__nav-item_active{{/if}}">
+      <a href="/store">
+        Snappy store
+      </a>
+    </div>
+  </div>
+  <!--
+  <div class="b-banner__search">
+    <form class="b-banner__form" action="/search" method="GET">
+      <input class="b-banner__input" type="search" name="q" placeholder="Search for snaps" value="{{ query }}">
+      <div class="b-banner__nav-item{{#if isSearchActive }} b-banner__nav-item_active{{/if}}">
+        <button type="submit" class="b-banner__submit"></button>
+      </div>
+    </form>
+  </div>
+  <div class="b-banner__secondary-nav">
+    <div class="b-banner__nav-item{{#if isSystemActive }} b-banner__nav-item_active{{/if}}">
+      <a href="/system-settings">
+        <img src="/public/images/settings.svg" height="30" width="30">
+      </a>
+    </div>
+  </div>
+  -->
+</div>
 
=== modified file 'www/src/js/templates/snap-detail.hbs'
--- www/src/js/templates/snap-detail.hbs	2015-05-04 16:44:28 +0000
+++ www/src/js/templates/snap-detail.hbs	2015-05-26 10:09:09 +0000
@@ -1,3 +1,9 @@
-<div class="b-snap__icon">
-  <img src="{{ icon }}" width="256" height="256">
-</div>
+{{#if description}}
+<p>{{ description }}</p>
+{{/if}}
+{{#if prettyInstalledSize}}
+<p>Installed size: {{prettyInstalledSize}}</p>
+{{/if}}
+{{#if prettyDownloadSize}}
+<p>Download size: {{prettyDownloadSize}}</p>
+{{/if}}
 
=== modified file 'www/src/js/templates/snap-layout.hbs'
--- www/src/js/templates/snap-layout.hbs	2015-05-08 13:11:16 +0000
+++ www/src/js/templates/snap-layout.hbs	2015-05-26 10:09:09 +0000
@@ -1,13 +1,18 @@
-<div class="b-snap__banner">
-  <div class="b-snap__meta">
-    <h1 class="b-snap__title">{{ name }} {{ version }} {{ binary_filesize }}</h1>
-    <p>
-    <span class="b-snap__origin" title="Origin">{{ origin }}</span>
-    <span class="b-snap__filesize" title="Package filesize">{{ binary_filesize}}</span>
-    </p>
-  </div>
-  <div class="b-snap__actions">
-    {{> installer}}
+<div class="b-layout__container">
+  <div class="b-snap__banner">
+    <div class="b-icon">
+      <img src="{{ icon }}" width="70" height="70">
+    </div>
+    <div class="b-snap__meta">
+      <h1 class="b-snap__title">{{ name }} {{ version }} {{ binary_filesize }}</h1>
+      <p>
+      <span title="Vendor">{{ vendor }}</span>
+      <span>{{ binary_filesize}}</span>
+      </p>
+    </div>
+    <div class="b-snap__actions">
+      {{> installer}}
+    </div>
   </div>
 </div>
 <div class="region-menu"></div>
 
=== modified file 'www/src/js/templates/snap-menu.hbs'
--- www/src/js/templates/snap-menu.hbs	2015-05-02 09:56:14 +0000
+++ www/src/js/templates/snap-menu.hbs	2015-05-26 10:09:09 +0000
@@ -1,9 +1,11 @@
-<a class="b-snap__nav-item" href="details">
-  Details
-</a>
-<a class="b-snap__nav-item" href="reviews">
-  Reviews
-</a>
-<a class="b-snap__nav-item" href="settings">
-  Settings
-</a>
+<div class="b-layout__container">
+  <a class="b-snap__nav-item" href="details">
+    Details
+  </a>
+  <a class="b-snap__nav-item" href="reviews">
+    Reviews
+  </a>
+  <a class="b-snap__nav-item" href="settings">
+    Settings
+  </a>
+</div>
 
=== modified file 'www/src/js/templates/snaplist-item.hbs'
--- www/src/js/templates/snaplist-item.hbs	2015-05-08 13:11:16 +0000
+++ www/src/js/templates/snaplist-item.hbs	2015-05-26 10:09:09 +0000
@@ -1,11 +1,12 @@
-<div class="b-snaplist__icon">
-  <img src="{{ icon }}" alt="{{ name }} icon">
+<div class="b-icon" data-type="{{type}}">
+  <img src="{{ icon }}" width="90" height="90">
 </div>
 <div class="b-snaplist__name">{{ name }}</div>
 {{!-- only name is shown in grid view, everything after is hidden --}}
+<div class="b-snaplist__size" title="Installed file size">{{ prettyInstalledSize }}</div>
 <div class="b-snaplist__version">{{ version }}</div>
+<div class="b-snaplist__type">{{ type }}</div>
 <div class="b-snaplist__origin">{{ origin }}</div>
-<div class="b-snaplist__type">{{ type }}</div>
 <div class="b-snaplist__actions">
   {{> installer}}
 </div>
 
=== modified file 'www/src/js/templates/store.hbs'
--- www/src/js/templates/store.hbs	2015-05-02 19:00:37 +0000
+++ www/src/js/templates/store.hbs	2015-05-26 10:09:09 +0000
@@ -1,2 +1,1 @@
-<h1>Store Snaps</h1>
 <div class="region-product"></div>
 
=== modified file 'www/src/js/views/home.js'
--- www/src/js/views/home.js	2015-04-24 20:47:44 +0000
+++ www/src/js/views/home.js	2015-05-26 10:09:09 +0000
@@ -6,6 +6,8 @@
 
 module.exports = Backbone.Marionette.LayoutView.extend({
 
+  className: 'b-layout__container',
+
   template : function() {
     return template();
   },
 
=== modified file 'www/src/js/views/snap-detail.js'
--- www/src/js/views/snap-detail.js	2015-04-11 15:14:07 +0000
+++ www/src/js/views/snap-detail.js	2015-05-26 10:09:09 +0000
@@ -4,6 +4,7 @@
 var template = require('../templates/snap-detail.hbs');
 
 module.exports = Backbone.Marionette.ItemView.extend({
+  className: 'b-snap__tab-content',
   template: function(model) {
     return template(model);
   },
 
=== modified file 'www/src/js/views/snap-reviews.js'
--- www/src/js/views/snap-reviews.js	2015-04-24 23:05:53 +0000
+++ www/src/js/views/snap-reviews.js	2015-05-26 10:09:09 +0000
@@ -4,7 +4,7 @@
 var template = require('../templates/snap-reviews.hbs');
 
 module.exports = Backbone.Marionette.ItemView.extend({
-
+  className: 'b-snap__tab-content',
   template: function() {
     return template();
   }
 
=== modified file 'www/src/js/views/snap-settings.js'
--- www/src/js/views/snap-settings.js	2015-04-11 15:14:07 +0000
+++ www/src/js/views/snap-settings.js	2015-05-26 10:09:09 +0000
@@ -4,6 +4,7 @@
 var template = require('../templates/snap-settings.hbs');
 
 module.exports = Backbone.Marionette.ItemView.extend({
+  className: 'b-snap__tab-content',
   template: function() {
     return template();
   },
 
=== modified file 'www/src/js/views/snaplist-item.js'
--- www/src/js/views/snaplist-item.js	2015-05-08 14:53:07 +0000
+++ www/src/js/views/snaplist-item.js	2015-05-26 10:09:09 +0000
@@ -13,7 +13,14 @@
 
 module.exports = Marionette.ItemView.extend({
 
-  className: 'b-snaplist__item',
+  className: function() {
+    var type = this.model.get('type');
+    var className = 'b-snaplist__item';
+    if (type) {
+      className += ' b-snaplist__item-' + type;
+    }
+    return className;
+  },
 
   template: function(model) {
     return template(model);
 
=== modified file 'www/tests/snapItemViewSpec.js'
--- www/tests/snapItemViewSpec.js	2015-05-05 14:40:14 +0000
+++ www/tests/snapItemViewSpec.js	2015-05-26 10:09:09 +0000
@@ -1,10 +1,15 @@
 var Backbone = require('backbone');
+var Snap = require('../src/js/models/snap.js');
 var SnapItemView = require('../src/js/views/snaplist-item.js');
 
 describe('SnapItemView', function() {
 
   beforeEach(function() {
-    this.view = new SnapItemView();
+    this.view = new SnapItemView({
+      model: new Snap({
+        id: 'foo'
+      })
+    });
   });
 
   afterEach(function() {
@@ -16,4 +21,11 @@
     expect(this.view).toEqual(jasmine.any(Backbone.View));
   });
 
+  it('should have a b-snaplist className with type modifier when present in model', function() {
+    this.view.model.unset('type');
+    expect(this.view.className()).toBe('b-snaplist__item');
+    this.view.model.set('type', 'foo');
+    expect(this.view.className()).toBe('b-snaplist__item b-snaplist__item-foo');
+  });
+
 });