[2375] Add social media icons to dataset page

ckan · May 17, 2012 · a568c00 · a568c00
1 parent 0b62aa6
commit a568c00
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 12 deletions.
diff --git a/ckan/public/base/images/sprite-ckan-icons.png b/ckan/public/base/images/sprite-ckan-icons.png
diff --git a/ckan/public/base/less/icons.less b/ckan/public/base/less/icons.less
@@ -1,12 +1,15 @@
 @small-x: 16px;
 @small-y: 16px;
+@small-offset-x: -@small-x;
+@small-offset-y: 0;
 @medium-x: 17px;
 @medium-y: 17px;
+@medium-offset-x: -@medium-x;
 @medium-offset-y: -@small-y;
 @large-x: 20px;
 @large-y: 20px;
-@large-offset-x: -20px;
-@large-offset-y: -(@small-y + @medium-y);
+@large-offset-x: -@large-x;
+@large-offset-y: -@small-y - @medium-y;
 
 .ckan-icon {
   .ie7-restore-right-whitespace;
@@ -21,6 +24,11 @@
   background-position: 16px 16px;
 }
 
+.ckan-icon-small {
+  width:  @small-x;
+  height: @small-y;
+}
+
 .ckan-icon-medium {
   width:  @medium-x;
   height: @medium-y;
@@ -41,6 +49,24 @@
   background-position: (@@x * @offset) @@y;
 }
 
+// SMALL
+
+.ckan-icon-fb      { .ckan-icon-background-position(0, "small") }
+.ckan-icon-gplus   { .ckan-icon-background-position(1, "small") }
+.ckan-icon-twitter { .ckan-icon-background-position(2, "small") }
+.ckan-icon-email   { .ckan-icon-background-position(3, "small") }
+.ckan-icon-share   { .ckan-icon-background-position(4, "small") }
+.ckan-icon-feed    { .ckan-icon-background-position(5, "small") }
+.ckan-icon-lock    { .ckan-icon-background-position(6, "small") }
+
+// MEDIUM
+
+.ckan-icon-circle-cross { .ckan-icon-background-position(0, "medium") }
+.ckan-icon-circle-add   { .ckan-icon-background-position(1, "medium") }
+.ckan-icon-flame        { .ckan-icon-background-position(2, "medium") }
+
+// LARGE
+
 .ckan-icon-lock { .ckan-icon-background-position(0, "large") }
 .ckan-icon-photo { .ckan-icon-background-position(1, "large") }
 .ckan-icon-add { .ckan-icon-background-position(2, "large") }

diff --git a/ckan/public/base/less/nav.less b/ckan/public/base/less/nav.less
@@ -13,6 +13,11 @@
   line-height: 14px; // keeps the overall height an even number
 }
 
+.nav-simple > li > a .ckan-icon {
+  position: relative;
+  top: -1px;
+}
+
 .nav-simple > li.selected > a {
   @inner-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
   @outer-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
@@ -34,16 +39,13 @@
 }
 
 .secondary .nav-simple > li > a:hover:after {
+  .ckan-icon;
+  .ckan-icon-circle-add;
   content: "";
-  display: block;
   position: absolute;
   top: 50%;
   right: 5px;
-  width: 17px;
-  height: 17px;
   margin-top: -8px;
-  background: url("@{sprite-path}") no-repeat;
-  background-position: -17px 0;
 }
 
 .secondary .nav-simple > li.selected > a {

diff --git a/ckan/templates/package/read.html b/ckan/templates/package/read.html
@@ -129,17 +129,17 @@ <h3>Additional Info</h3>
         <section class="module subscribe">
           <h2 class="heading"><i class="ckan-icon ckan-icon-add"></i> Subscribe</h2>
           <ul class="nav nav-simple">
-            <li><a href="#">Email</a></li>
-            <li><a href="#">RSS</a></li>
+            <li><a href="#"><i class="ckan-icon ckan-icon-email"></i> Email</a></li>
+            <li><a href="#"><i class="ckan-icon ckan-icon-feed"></i> RSS</a></li>
           </ul>
         </section>
 
         <section class="module social">
           <h2 class="heading"><i class="ckan-icon ckan-icon-share"></i> Social</h2>
           <ul class="nav nav-simple">
-            <li><a href="#">Google+</a></li>
-            <li><a href="#">Twitter</a></li>
-            <li><a href="#">Facebook</a></li>
+            <li><a href="#"><i class="ckan-icon ckan-icon-gplus"></i> Google+</a></li>
+            <li><a href="#"><i class="ckan-icon ckan-icon-twitter"></i> Twitter</a></li>
+            <li><a href="#"><i class="ckan-icon ckan-icon-fb"></i> Facebook</a></li>
           </ul>
         </section>