Merge pull request #253 from GoogleChrome/ui-fixes

Css fixes for cards, buttons and lighthouse icon
GoogleChromeLabs · Nov 24, 2016 · a408b6a · a408b6a
2 parents 31199a6 + 6dba738
commit a408b6a
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 84 deletions.
diff --git a/controllers/pwa.js b/controllers/pwa.js
@@ -25,7 +25,7 @@ const libMetadata = require('../lib/metadata');
 
 const CLIENT_ID = config.get('CLIENT_ID');
 const CLIENT_SECRET = config.get('CLIENT_SECRET');
-const LIST_PAGE_SIZE = 24;
+const LIST_PAGE_SIZE = 32;
 const DEFAULT_PAGE_NUMBER = 1;
 const DEFAULT_SORT_ORDER = 'newest';
 

diff --git a/public/css/style.css b/public/css/style.css
@@ -20,6 +20,7 @@ html {
 *:after {
   box-sizing: inherit;
 }
+
 body {
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 14px;
@@ -43,16 +44,16 @@ a:hover {
   text-decoration: underline; 
 }
 .container {
-  padding-right: 5px;
-  padding-left: 5px;
+  padding-right: 8px;
+  padding-left: 8px;
   padding-bottom: 44px;
   min-height:100%;
   position:relative;
 }
 .navbar {
   position: relative;
   height: 82px;
-  background: #0A84F5;
+  background: #1976D2;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -132,58 +133,57 @@ a:hover {
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  color: #0D47A1;
+  color: white;
   font-size: 16px;
-  font-weight: 600;
-  background: #7cc0ff;
-  padding-left: 15px;
-  margin-bottom: 15px;
-  line-height: 45px;
-  height: 45px;
-  border: 1px lightgray;
-  border-bottom-style: solid;
+  font-weight: 400;
+  background: #2196F3;
+  padding-left: 16px;
+  margin-bottom: 16px;
+  line-height: 48px;
+  height: 48px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 }
 .section-title .back {
-  font-size: 22px;
-  padding-right: 20px;
-  height: 45px;
-  line-height: 45px;
-  width: 45px;
+  font-size: 24px;
+  padding-right: 16px;
+  height: 48px;
+  line-height: 54px;
+  width: 48px;
 }
 .section-title .tab {
-  border-top-right-radius: 10px;
-  border-top-left-radius: 10px;
-  height: 35px;
-  line-height: 35px;
-  margin: 10px 0px 0 0px;
-  padding: 0 30px 0 30px;
+  height: 48px;
+  line-height: 54px;
+  margin: 0;
+  padding: 0 40px 0 40px;
+  color: white;
+  opacity: 0.7;
 }
-@media (max-width: 480px) {
-  .section-title .tab {
-    padding: 0 15px 0 15px;
-  }
+.tab:hover {
+  border-bottom-style: solid;
+  background: #42A5F5;
+  border-color: #FF8A65;
+  border-width: 2dp;
+  opacity: 1;
 }
-@media (max-width: 380px) {
+@media (max-width: 410px) {
   .section-title .tab {
-    font-size: 14px;
-    padding: 0 7px 0 7px;
+    padding: 0 16px 0 16px;
   }
 }
 .section-title .activetab {
-  background:#F5F5F5;
-  border: 1px lightgray;
-  border-top-style: solid;
-  border-right-style: solid;
-  border-left-style: solid;
+  color: white;
+  border-bottom-style: solid;
+  border-color: #FF5722;
+  opacity: 1;
 }
 .section-title a, .section-title a:visited {
-  color: #0D47A1;
+  color: white;
   text-decoration: none;
 }
 #auth-button {
   position: absolute;
-  bottom: -42px;
-  right: 5px;
+  bottom: -44px;
+  right: 8px;
 }
 button {
   padding: 0 5px 5px 5px;
@@ -208,7 +208,8 @@ button {
   user-select: none;
   background-image: none;
   border: 1px solid transparent;
-  border-radius: 4px
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 }
 button[disabled=disabled], button:disabled {
   opacity: 0.5;
@@ -217,15 +218,12 @@ button[disabled=disabled], button:disabled {
 .button:not([disabled]):hover {
   opacity: 0.5;
 }
-.green {
-  background: #33691E;
+.accent-color {
+  background: #FF5722;
 }
 .blue {
   background: #0D47A1;
 }
-.red {
-  background: #B71C1C;
-}
 .button  a {
   color: white;
   text-decoration: none;
@@ -234,13 +232,15 @@ button[disabled=disabled], button:disabled {
   height: 100%;
 }
 .add {
-  margin-left: 5px;
+  margin-left: 8px;
 }
 
 /* PWA List Box */
 .pwabox {
-  border: 1px solid lightgray;
   text-overflow: hidden;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+  height: 100px;
+  border-radius: 2px;
 }
 .pwabox-body {
   display: -webkit-box;
@@ -254,7 +254,7 @@ button[disabled=disabled], button:disabled {
 .pwabox-left {
   display:block;
   width: 85px;
-  padding: 5px 5px 5px 10px;
+  padding: 20px 5px 5px 15px;
 }
 .pwabox-right {
   display: -webkit-box;
@@ -264,7 +264,7 @@ button[disabled=disabled], button:disabled {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  padding: 15px 10px 5px 5px;
+  padding: 20px 16px 16px 8px;
   width: 100%;
 }
 .pwabox-right .name {
@@ -300,7 +300,6 @@ button[disabled=disabled], button:disabled {
   display: flex;
   -ms-flex-flow: column;
       flex-flow: column;
-  border: 1px solid lightgray;
   text-overflow: hidden;
   display: flex;
   padding: 16px;
@@ -310,7 +309,10 @@ button[disabled=disabled], button:disabled {
   font-size: 14px;
   font-weight: 400;
   max-width: 600px;
-  margin: 0 auto;  
+  margin: 0 auto 16px auto;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+  background: white;
+  border-radius: 2px;
 }
 .detail-header {
   display: -webkit-box;
@@ -323,7 +325,7 @@ button[disabled=disabled], button:disabled {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  margin-bottom: 16px;  
+  margin-bottom: 8px;  
 }
 .detail-header > * {
   font-size: 24px;
@@ -350,12 +352,12 @@ button[disabled=disabled], button:disabled {
 }
 /* Manifest detail box */
 .manifest-detail {
-  margin-top: 5px;
+  margin-top: 1px;
   overflow-x: scroll;
 }
 /* Lighthouse report box */
 .lighthouse-detail {
-  margin-top: 5px;
+  margin-top: 1px;
 }
 .lighthouse-report-table {
   width: 100%;
@@ -402,12 +404,14 @@ button[disabled=disabled], button:disabled {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  margin-bottom: 15px
+  margin-bottom: 8px;
+  margin-left: 8px;
+  height: 96px;
+  justify-content: space-between;
 }
 .form-input {
   height: 20px;
   width: 80%;
-  padding: 10px 16px;
   font-size: 16px;
 }
 .form-textbox {
@@ -419,6 +423,7 @@ button[disabled=disabled], button:disabled {
   border: 1px solid lightgray;
 }
 .error {
+  margin-left: 8px;
   color: #f07;
 }
 .offline-status {
@@ -447,7 +452,7 @@ button[disabled=disabled], button:disabled {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  background: #0A84F5;
+  background: #1976D2;
   color: white;
 }
 .footer ul {
@@ -531,33 +536,44 @@ button[disabled=disabled], button:disabled {
   box-sizing: border-box;
   background: #e0ddd5;
   color: #171e42;
-  margin:  5px;
+  margin:  8px;
 }
 
-/* Fixes last flex row */
-@media (min-width: 590px) {
+/* Fixes last flex row 
+   min-widt: 280*colums+16*(colums+1) */
+@media (min-width: 608px) {
+  .items .item {
+    max-width: calc(50% - 16px);
+  }
+}
+@media (min-width: 904px) {
+  .items .item {
+    max-width: calc(33.33333% - 16px);
+  }
+}
+@media (min-width: 1200px) {
   .items .item {
-    max-width: calc(50% - 10px);
+    max-width: calc(25% - 16px);
   }
 }
-@media (min-width: 880px) {
+@media (min-width: 1496px) {
   .items .item {
-    max-width: calc(33.33333% - 10px);
+    max-width: calc(20% - 16px);
   }
 }
-@media (min-width: 1170px) {
+@media (min-width: 1792px) {
   .items .item {
-    max-width: calc(25% - 10px);
+    max-width: calc(16.66667% - 16px);
   }
 }
-@media (min-width: 1460px) {
+@media (min-width: 2088px) {
   .items .item {
-    max-width: calc(20% - 10px);
+    max-width: calc(14.2857142857% - 16px);
   }
 }
-@media (min-width: 1750px) {
+@media (min-width: 2384px) {
   .items .item {
-    max-width: calc(16.66667% - 10px);
+    max-width: calc(14.2857142857% - 16px);
   }
 }
 

diff --git a/public/img/lighthouse-128.png b/public/img/lighthouse-128.png
diff --git a/public/img/lighthouse-18.png b/public/img/lighthouse-18.png
diff --git a/public/img/lighthouse-36.png b/public/img/lighthouse-36.png
diff --git a/views/includes/lighthouse.hbs b/views/includes/lighthouse.hbs
@@ -2,7 +2,7 @@
   <div class="detail-header">
     <h3>LIGHTHOUSE</h3>    
     <div class="lighthouse-score"> 
-        <img src="/img/lighthouse-18.png" width="18" height="18" title="Lighthouse Score" alt="Lighthouse logo"/>
+        <img src="/img/lighthouse-18.png"  srcset="/img/lighthouse-18.png 1x, /img/lighthouse-36.png 2x" title="Lighthouse Score" alt="Lighthouse logo"/>
         {{#if pwa.lighthouseScore}}
           {{pwa.lighthouseScore}}
         {{else}}

diff --git a/views/pwas/form.hbs b/views/pwas/form.hbs
@@ -29,13 +29,13 @@
       <form id="pwaForm" method="POST">
         <div class="form-group">
           <label for="manifestUrl">Manifest URL</label>
-          {{#if error}}
-          <p class="error">Error: {{error}}.</p>
-          {{/if}}
-          <input type="text" name="manifestUrl" id="manifestUrl" class="form-input" value="{{pwa.manifestUrl}}">
+          <input type="text" name="manifestUrl" id="manifestUrl" class="form-input" value="{{pwa.manifestUrl}}" autofocus>
+          <button id="pwaSubmit" type="submit" class="button accent-color gulliver-signedin-aware gulliver-online-aware"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button>
         </div>
+        {{#if error}}
+        <p class="error">Error: {{error}}.</p>
+        {{/if}}
         <input id="idToken" type="hidden" name="idToken" />
-        <button id="pwaSubmit" type="submit" class="button green gulliver-signedin-aware gulliver-online-aware"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button>
       </form>
       </div>            
     </div>