Merge lp:~stephen-stewart/snapweb/tidy-up-list-row into lp:~snappy-dev/snapweb/trunk

[Stephen Stewart]

tidy up the row style listing, making it more small screen friendly

[Sergio Schvezov (sergiusens)]

review: Approve

=== modified file 'www/src/css/infobar.css'
--- www/src/css/infobar.css	2015-06-01 22:33:50 +0000
+++ www/src/css/infobar.css	2015-06-03 08:38:29 +0000
@@ -1,10 +1,8 @@
 /** @define b-infobar; weak */
 
 .b-infobar {
-  padding: 4px 0;
+  padding: 6px 0 0;
   font-size: 12px;
-  background-color: #eee;
-  box-shadow:0 2px 1px #ddd;
 }
 
 .b-infobar .b-layout__container {

=== modified file 'www/src/css/installer.css'
--- www/src/css/installer.css	2015-06-01 16:27:13 +0000
+++ www/src/css/installer.css	2015-06-03 08:38:29 +0000
@@ -7,8 +7,8 @@
 }
 
 .b-installer_small {
-  font-size:13px;
-  width:160px;
+  font-size:12px;
+  width:100px;
 }
 
 .b-installer__button {
@@ -19,7 +19,7 @@
   cursor:pointer;
   font-weight:400;
   overflow: hidden;
-  padding:8px 2em;
+  padding:8px 10px;
   position:relative;
   text-align:center;
   text-overflow: ellipsis;

=== modified file 'www/src/css/snaplist.css'
--- www/src/css/snaplist.css	2015-05-27 15:47:34 +0000
+++ www/src/css/snaplist.css	2015-06-03 08:38:29 +0000
@@ -45,7 +45,11 @@
   width:90px;
 }
 
-.b-snaplist_grid :not(.b-snaplist__item-app) .b-icon::after {
+.b-snaplist_grid .b-snaplist__vendor {
+  display:none;
+}
+
+.b-snaplist :not(.b-snaplist__item-app) .b-icon::after {
   content: attr(data-type);
   position:absolute;
   width:100%;
@@ -67,24 +71,6 @@
   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 {
@@ -92,60 +78,107 @@
 }
 
 .b-snaplist_row .b-snaplist__item {
+  position:relative;
   width:100%;
   display:flex;
   align-items:center;
-  padding:0.6em;
-  border-radius:4px;
-  margin-bottom:0.6em;
-  background-color:#fff;
+  padding:8px 10px;
   font-size:13px;
+  border-top:1px solid #ddd;
+}
+
+.b-snaplist_row .b-snaplist__type {
+}
+
+.b-snaplist_row .b-snaplist__item:nth-of-type(2n+1) {
 }
 
 .b-snaplist_row .b-snaplist__item:last-child {
   margin-bottom:0;
+  border-bottom:1px solid #ddd;
 }
 
 
 .b-snaplist_row .b-icon {
-  flex:0 0 40px;
-}
-
-.b-snaplist_row .b-icon::before {
-  background-image: url(/public/images/icon-mask-on-white.png);
-}
-
+  flex:0 0 60px;
+}
 
 .b-snaplist_row .b-icon img {
   display:block;
-  width: 40px;
-  height: 40px;
+  width: 60px;
+  height: 60px;
+}
+
+.b-snaplist_row :not(.b-snaplist__item-app) .b-icon::after {
+  font-size:9px;
+  width:60px;
+  text-align:center;
+  padding: 1px 0 3px 0;
 }
 
 .b-snaplist_row .b-snaplist__name,
 .b-snaplist_row .b-snaplist__version,
-.b-snaplist_row .b-snaplist__type,
+.b-snaplist_row .b-snaplist__origin,
+.b-snaplist_row .b-snaplist__vendor,
+.b-snaplist_row .b-snaplist__size {
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.b-snaplist_row .b-snaplist__id,
+.b-snaplist_row .b-snaplist__src,
+.b-snaplist_row .b-snaplist__size {
+  margin:0 10px;
+}
+
+.b-snaplist_row .b-snaplist__id,
+.b-snaplist_row .b-snaplist__src {
+  flex:2;
+}
+
+.b-snaplist_row .b-snaplist__size {
+  flex:1;
+}
+
+.b-snaplist_row .b-snaplist__src,
+.b-snaplist_row .b-snaplist__size {
+  display:none;
+}
+
+.b-snaplist_row .b-snaplist__origin
 .b-snaplist_row .b-snaplist__origin {
-  flex:1 1;
-  margin:0 1em;
-  white-space: nowrap;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.b-snaplist_row .b-snaplist__version {
-  min-width:100px;
-}
-
-.b-snaplist_row .b-snaplist__type {
-  text-align:center;
-}
-
-.b-snaplist_row .b-snaplist__actions {
+  text-transform: capitalize;
 }
 
 .b-snaplist_row .b-installer__message {
-  /** XXX hmm **/
   display:none;
 }
+
+@media (--xxs) {
+  .b-snaplist_grid .b-snaplist__item {
+    padding:13px 8px;
+  }
+
+  .b-snaplist_row .b-snaplist__src {
+    display:block;
+  }
+}
+
+@media (--xs) {
+  .b-snaplist_grid .b-snaplist__item {
+    padding:14px 9px;
+  }
+  .b-snaplist_row .b-snaplist__size {
+    display: block;
+  }
+}
+
+@media (--s) {
+  .b-snaplist_grid .b-snaplist__item {
+    padding:15px 10px;
+  }
+}
+@media (--m) {
+}

=== modified file 'www/src/js/templates/snaplist-item.hbs'
--- www/src/js/templates/snaplist-item.hbs	2015-05-22 23:07:43 +0000
+++ www/src/js/templates/snaplist-item.hbs	2015-06-03 08:38:29 +0000
@@ -1,12 +1,15 @@
 <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__id">
+  <div class="b-snaplist__name">{{ name }}</div>
+  <div class="b-snaplist__version">{{ version }}</div>
+</div>
+<div class="b-snaplist__src">
+  <div class="b-snaplist__origin">{{ origin }}</div>
+  <div class="b-snaplist__vendor">{{ vendor }}</div>
+</div>
 <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__actions">
   {{> installer}}
 </div>

=== modified file 'www/src/js/templates/storelist-item.hbs'
--- www/src/js/templates/storelist-item.hbs	2015-05-27 15:27:12 +0000
+++ www/src/js/templates/storelist-item.hbs	2015-06-03 08:38:29 +0000
@@ -1,11 +1,14 @@
 <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__version">{{ version }}</div>
-<div class="b-snaplist__type">{{ type }}</div>
-<div class="b-snaplist__origin">{{ origin }}</div>
+<div class="b-snaplist__id">
+  <div class="b-snaplist__name">{{ name }}</div>
+  <div class="b-snaplist__version">{{ version }}</div>
+</div>
+<div class="b-snaplist__src">
+  <div class="b-snaplist__origin">{{ origin }}</div>
+  <div class="b-snaplist__vendor">{{ vendor }}</div>
+</div>
 <div class="b-snaplist__actions">
   {{> installer}}
 </div>