Redesigning the popup

* Add new web font * Move the download links elsewhere * Make hRecipe's play nice with foodnetwork.com content
bryckbost · Dec 30, 2011 · 2179846 · 2179846
1 parent bf367b5
commit 2179846
Show file tree

Hide file tree

Showing 15 changed files with 222 additions and 32 deletions.
diff --git a/fonts/pictos-web-webfont.eot b/fonts/pictos-web-webfont.eot
diff --git a/fonts/pictos-web-webfont.svg b/fonts/pictos-web-webfont.svg
diff --git a/fonts/pictos-web-webfont.ttf b/fonts/pictos-web-webfont.ttf
diff --git a/fonts/pictos-web-webfont.woff b/fonts/pictos-web-webfont.woff
diff --git a/fonts/pictos-web.ttf b/fonts/pictos-web.ttf
diff --git a/images/calendargray.png b/images/calendargray.png
diff --git a/images/check.png b/images/check.png
diff --git a/images/googleIcon_resized.png b/images/googleIcon_resized.png
diff --git a/images/pin_map_grey.png b/images/pin_map_grey.png
diff --git a/images/recipe.png b/images/recipe.png
diff --git a/images/star.png b/images/star.png
diff --git a/images/stars.png b/images/stars.png
diff --git a/images/vcf_48.png b/images/vcf_48.png
diff --git a/popup.html b/popup.html
@@ -54,14 +54,16 @@
                      + '<div class="details">'
                        + '<h1>'
                          + hcard.fn
-                         + '<a href="http://growing-flower-18.heroku.com/vcard?query='+ encodeURIComponent(JSON.stringify(hcard)) + '" title="Download" target="_blank" class="vcard">'
-                           + '<img src="images/hcard_download.png">'
-                         + '</a>'
-                         + '<a href="#" class="submithcard" title="Add to Google Contacts">'
-                           + '<img src="images/googleIcon.png" alt="Google" />'
-                         + '</a>'
                        + '</h1>'
                        + '<ul></ul>'
+                       + '<div class="download">'
+                         + '<a href="#" class="submithcard" title="Add to Google Contacts">'
+                           + '<span class="webfont">c</span>'
+                         + '</a>'
+                         + '<a href="http://growing-flower-18.heroku.com/vcard?query='+ encodeURIComponent(JSON.stringify(hcard)) + '" title="Download" target="_blank" class="vcard">'
+                           + '<span class="webfont">~</span>'
+                         + '</a>'
+                       + '</div>'
                      + '</div>'
                    + '</li>');
 
@@ -72,7 +74,7 @@
           $('.submithcard', html).click(function(){
             bgPage.Export.HCard.google(hcard, function(txt, response){
               if (response.status == 201) {
-                $('.submithcard img', html).first().replaceWith('<img src="images/check.png" alt="Added" />');
+                $('.submithcard span', html).first().replaceWith('<span class="webfont">3</span>');
               } else {
                 console.log('FAILED');
               }
@@ -141,16 +143,18 @@
                          + '<div class="details">'
                            + '<h1>'
                              + hcalendar.summary
-                             + '<a href="http://growing-flower-18.heroku.com/vevent?query='+ encodeURIComponent(JSON.stringify(hcalendar)) + '" title="Download" target="_blank" class="vevent">'
-                               + '<img src="images/icon-hcalendar-download.png">'
-                             + '</a>'
-                             + '<a href="#" class="submitvevent" title="Add to Google Contacts">'
-                               + '<img src="images/googleIcon.png" alt="Google" />'
-                             + '</a>'
                            + '</h1>'
                            + '<ul>'
                              + '<li class="start">'+ $.fn.strftime($.fn.parseISO(hcalendar.dtstart), '%b %d, %Y at %i:%M%P') +'</li>'
                            + '</ul>'
+                           + '<div class="download">'
+                             + '<a href="#" class="submitvevent" title="Add to Google Contacts">'
+                               + '<span class="webfont">c</span>'
+                             + '</a>'
+                             + '<a href="http://growing-flower-18.heroku.com/vevent?query='+ encodeURIComponent(JSON.stringify(hcalendar)) + '" title="Download to your computer" target="_blank" class="vevent">'
+                               + '<span class="webfont">~</span>'
+                             + '</a>'
+                           + '</div'
                          + '</div>'
                        + '</li>');
 
@@ -160,7 +164,7 @@
         $('.submitvevent', hcalHtml).click(function(){
           bgPage.Export.HCalendar.google(hcalendar, function(txt, response){
             if (response.status == 201) {
-              $('.submitvevent img', hcalHtml).first().replaceWith('<img src="images/check.png" alt="Added" />');
+              $('.submitvevent span', hcalHtml).first().replaceWith('<span class="webfont">3</span>');
             } else {
               console.log('FAILED');
             }
@@ -185,7 +189,7 @@
       });
 
       $.each(hreviews, function(k, hreview) {
-        var hreviewHTML = $('<li class="hreview" id="hreview-'+k+'"><div class="download"><img src="images/star.png"></div><div class="details"><h1>' + (hreview.item.fn || hreview.item.url || hreview.item.photo_url) + '</h1><ul></ul></div></li>');
+        var hreviewHTML = $('<li class="hreview" id="hreview-'+k+'"><div class="details"><h1>' + (hreview.item.fn || hreview.item.url || hreview.item.photo_url) + '</h1><ul></ul></div></li>');
 
         $("#hreviews").append(hreviewHTML);
 
@@ -203,7 +207,7 @@
       });
 
       $.each(hreviewaggs, function(m, hreviewagg) {
-        var hreviewaggHTML = $('<li class="hreviewagg" id="hreviewagg-'+m+'"><div class="download"><img src="images/stars.png"></div><div class="details"><h1>' + (hreviewagg.item.fn || hreviewagg.item.url || hreviewagg.item.photo_url) + '</h1><ul></ul></div></li>');
+        var hreviewaggHTML = $('<li class="hreviewagg" id="hreviewagg-'+m+'"><div class="details"><h1>' + (hreviewagg.count || hreviewagg.item.fn || hreviewagg.item.url || hreviewagg.item.photo_url) + '</h1><ul></ul></div></li>');
 
         $("#hreviewaggs").append(hreviewaggHTML);
 
@@ -221,7 +225,7 @@
       });
 
       $.each(hrecipes, function(l, hrecipe) {
-        var hrecipeHTML = $('<li class="hrecipe" id="hrecipe-'+l+'"><div class="download"><img src="images/recipe.png"></div><div class="details"><h1>'+ hrecipe.fn +'</h1><ul class="ingredients"><li><strong>Ingredients</strong></li></ul><ul class="other"></ul></div></li>');
+        var hrecipeHTML = $('<li class="hrecipe" id="hrecipe-'+l+'"><div class="details"><h1>'+ hrecipe.fn +'</h1><ul class="ingredients"><li><strong>Ingredients</strong></li></ul><ul class="other"></ul></div></li>');
 
         $("#hrecipes").append(hrecipeHTML);
 
@@ -246,7 +250,7 @@
       var client = new simplegeo.PlacesClient('UHYsAGwU2XyWm9Qtp7D68EBQYpnCsWEG');
 
       $.each(unique_geos(geos), function(l, geo) {
-        var geoHTML = $('<li class="geo" id="geo-'+l+'"><div class="download"><img src="images/pin_map_grey.png"></div><div class="details"><h1>'+ geo.latitude +', '+ geo.longitude +'</h1><ul></ul></div></li>');
+        var geoHTML = $('<li class="geo" id="geo-'+l+'"><div class="details"><h1>'+ geo.latitude +', '+ geo.longitude +'</h1><ul></ul></div></li>');
 
         $("#geos").append(geoHTML);
 

diff --git a/stylesheets/popup.css b/stylesheets/popup.css
@@ -1,3 +1,13 @@
+@font-face {
+    font-family: 'PictosRegular';
+    src: url('/fonts/pictos-web-webfont.eot');
+    src: url('/fonts/pictos-web-webfont.woff') format('woff'),
+         url('/fonts/pictos-web-webfont.ttf') format('truetype'),
+         url('/fonts/pictos-web-webfont.svg#PictosRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
 body {
   margin: 15px 10px;
   padding: 0;
@@ -35,19 +45,15 @@ h1 {
   margin: 0;
 }
 .hcard, .hcalendar, .hreview, .hreviewagg, .hrecipe, .geo {
-  padding: 0 0 5px 10px;
+  padding: 10px 0 5px 10px;
   overflow: hidden;
   border-bottom: 1px solid #ccc;
 }
 .hcard h1 a, .hcalendar h1 a {
   float: right;
 }
-.download {
-  float: left;
-}
-.download .photo {
-  width: 48px;
-  height: 48px;
+.photo {
+  height: 50px;
   display: block;
 }
 .vevent:hover, .vcard:hover {
@@ -58,36 +64,54 @@ h1 {
   font-weight: 300;
   margin-bottom: 7px;
 }
+.details {
+  overflow: hidden;
+}
 .details h1 {
   white-space: nowrap;
 	width: 100%;
 	overflow: hidden;
 	text-overflow: ellipsis;
-  margin-bottom: 7px;
+  margin-bottom: 5px;
 }
 p {
   font-size: 12px;
 }
-a {
-  color: #3b3b3b;
-}
 .static-map {
   display: block;
   margin-top: 7px;
   border: 1px solid #888;
 }
 .googleconnection, .googleconnection a {
   color: #999;
-  font-size: 11px;
+  font-size: 12px;
   overflow: hidden;
 }
 .googleconnection div {
   float: right;
-  background: #fff url(../images/googleIcon_resized.png) no-repeat 0 0;
+  background: #fff url(../images/googleIcon.png) no-repeat 0 0;
   padding-left: 20px;
   height: 16px;
 }
 .submitvevent, .submithcard {
   margin-right: 10px;
-  margin-top: -1px;
 }
+.webfont {
+  font: normal 28px Pictos, 'PictosRegular';
+}
+.download {
+  float: right;
+}
+.download a {
+  display: inline-block;
+  text-decoration: none;
+  color: #676767;
+}
+  .download a span {
+    height: 28px;
+    line-height: 16px;
+    display: inline-block;    
+  }
+.download a:hover {
+  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,1)), to(rgba(0,0,0,1)));
+}