Mostly apply new design to snap details page

snapcore · Jun 24, 2016 · d696a06 · d696a06
1 parent 67ad899
commit d696a06
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 93 deletions.
diff --git a/www/src/css/base.css b/www/src/css/base.css
@@ -11,10 +11,6 @@ html, body {
   color:#333;
 }
 
-body {
-  background-color:#f7f7f7;
-}
-
 a {
   color:#dd4814;
 }

diff --git a/www/src/css/icon.css b/www/src/css/icon.css
@@ -1,23 +1,12 @@
 .b-icon {
-  position:relative;
-  display:inline-block;
+  border-radius:10px;
+  box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  width:125px;
+  height:125px;
+  overflow:hidden;
 }
 
-.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;
+.b-snaplist .b-icon {
+  width:90px;
+  height:90px;
 }
diff --git a/www/src/css/layout.css b/www/src/css/layout.css
@@ -10,8 +10,6 @@
 }
 
 .b-layout__main {
-  flex: 1;
-  position:relative;
 }
 
 .b-layout__main:empty::before {
@@ -37,3 +35,8 @@
   width: 100%;
   z-index: 10000;
 }
+
+.grey-wrapper {
+  background-color:#f7f7f7;
+  overflow:hidden;
+}
diff --git a/www/src/css/snap.css b/www/src/css/snap.css
@@ -15,12 +15,14 @@
 }
 
 .b-snap__meta {
-  flex: 2;
-  margin-left:15px;
 }
 
-.b-snap__meta > * {
-  margin:0;
+.b-snap__title {
+  margin-bottom:0.25em;
+}
+
+.b-snap__developer {
+  color:#B3B3B3;
 }
 
 .b-snap__actions {
@@ -78,12 +80,13 @@
 }
 
 .b-snap__details {
-  margin:0 10px;
+  margin:30px 10px 20px 10px;
 }
 
 @media screen and (min-width: 640px) {
   .b-snap__banner,
   .b-snap__details {
-    margin:0 15px;
+    margin-left:15px;
+    margin-right:15px;
   }
 }
diff --git a/www/src/css/snaplist.css b/www/src/css/snaplist.css
@@ -42,26 +42,10 @@
   margin-top:4px;
 }
 
-.b-snaplist_grid .b-snaplist__name,
-.b-snaplist_grid .b-icon img {
+.b-snaplist_grid .b-snaplist__name {
   width:90px;
 }
 
-.b-snaplist :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__version,
 .b-snaplist_grid .b-snaplist__type,
 .b-snaplist_grid .b-snaplist__developer,
@@ -95,11 +79,6 @@
   border-bottom:1px solid #ddd;
 }
 
-
-.b-snaplist_row .b-icon {
-  flex:0 0 60px;
-}
-
 .b-snaplist_row .b-icon img {
   display:block;
   width: 60px;

diff --git a/www/src/images/icon-mask.png b/www/src/images/icon-mask.png
diff --git a/www/src/js/templates/snap-layout.hbs b/www/src/js/templates/snap-layout.hbs
@@ -1,23 +1,26 @@
-<div class="inner-wrapper">
-  <div class="twelve-col last-col">
-    <div class="b-layout__container">
+<div class="grey-wrapper">
+  <div class="inner-wrapper">
+    <div class="twelve-col last-col">
       <div class="b-snap__banner">
-        <div class="b-icon">
-          <img src="{{ icon }}" width="70" height="70">
+        <div class="two-col">
+          <img class="b-icon" src="{{ icon }}" width="125" height="125">
         </div>
-        <div class="b-snap__meta">
-          <h1 class="b-snap__title">{{ name }} {{ version }} {{ binary_filesize }}</h1>
-          <p>
-          <span>{{ binary_filesize}}</span>
-          </p>
+        <div class="b-snap__meta six-col">
+          <h1 class="b-snap__title">{{ name }}</h1>
+          <div class="b-snap__developer">{{ developer }}</div>
         </div>
-        <div class="b-snap__actions">
+        <div class="b-snap__actions four-col last-col">
           {{> installer}}
         </div>
       </div>
     </div>
+  </div>
+</div>
 
-    <div class="b-layout__container b-snap__details">
+<div class="inner-wrapper">
+  <div class="eight-col">
+    <div class="b-snap__details">
+	  <h3>About</h3>
       {{#if description}}
       <p>{{ description }}</p>
       {{/if}}

diff --git a/www/src/js/templates/snaplist-item.hbs b/www/src/js/templates/snaplist-item.hbs
@@ -1,6 +1,4 @@
-<div class="b-icon" data-type="{{type}}">
-  <img src="{{ icon }}" width="90" height="90">
-</div>
+<img class="b-icon" src="{{ icon }}" width="90" height="90">
 <div class="b-snaplist__id">
   <div class="b-snaplist__name">{{ name }}</div>
   <div class="b-snaplist__version">{{ version }}</div>

diff --git a/www/src/js/templates/snaplist.hbs b/www/src/js/templates/snaplist.hbs
@@ -1,29 +1,31 @@
-<div class="inner-wrapper">
-  {{#if title}}
-  <div class="twelve-col last-col">
-    <div class="b-headline">
-      <div class="b-layout__container">
-        <h1 class="b-headline__h1">{{ title }}</h1>
-        <div class="b-snaplist__actions">
-          {{#if canSort}}
-          <div class="b-button__group">
-            <div id="sortAlpha" class="b-button b-button_small{{#if isAlpha}} b-button_active{{/if}}">A-Z</div>
-            <div id="sortBytes" class="b-button b-button_small{{#unless isAlpha}} b-button_active{{/unless}}">kB</div>
+<div class="grey-wrapper">
+  <div class="inner-wrapper">
+    {{#if title}}
+    <div class="twelve-col last-col">
+      <div class="b-headline">
+        <div class="b-layout__container">
+          <h1 class="b-headline__h1">{{ title }}</h1>
+          <div class="b-snaplist__actions">
+            {{#if canSort}}
+            <div class="b-button__group">
+              <div id="sortAlpha" class="b-button b-button_small{{#if isAlpha}} b-button_active{{/if}}">A-Z</div>
+              <div id="sortBytes" class="b-button b-button_small{{#unless isAlpha}} b-button_active{{/unless}}">kB</div>
+            </div>
+            {{/if}}
+            {{#if canStyle}}
+            <div class="b-button__group">
+              <div id="styleGrid" class="b-button b-button_small{{#if isGrid}} b-button_active{{/if}}">Grid</div>
+              <div id="styleRow" class="b-button b-button_small{{#unless isGrid}} b-button_active{{/unless}}">Row</div>
+            </div>
+            {{/if}}
           </div>
-          {{/if}}
-          {{#if canStyle}}
-          <div class="b-button__group">
-            <div id="styleGrid" class="b-button b-button_small{{#if isGrid}} b-button_active{{/if}}">Grid</div>
-            <div id="styleRow" class="b-button b-button_small{{#unless isGrid}} b-button_active{{/unless}}">Row</div>
-          </div>
-          {{/if}}
         </div>
       </div>
     </div>
-  </div>
-  {{/if}}
-  <div class="twelve-col last-col">
-    <div class="b-snaplist b-snaplist_{{#if isGrid}}grid{{else}}row{{/if}}">
+    {{/if}}
+    <div class="twelve-col last-col">
+      <div class="b-snaplist b-snaplist_{{#if isGrid}}grid{{else}}row{{/if}}">
+      </div>
     </div>
   </div>
 </div>
diff --git a/www/src/js/templates/storelist-item.hbs b/www/src/js/templates/storelist-item.hbs
@@ -1,6 +1,4 @@
-<div class="b-icon" data-type="{{type}}">
-  <img src="{{ icon }}" width="90" height="90">
-</div>
+<img class="b-icon" src="{{ icon }}" width="90" height="90">
 <div class="b-snaplist__id">
   <div class="b-snaplist__name">{{ name }}</div>
   <div class="b-snaplist__version">{{ version }}</div>