Merge branch 'feature-2375-demo-theme-working' into feature-2375-demo…

…-theme
ckan · May 17, 2012 · a939216 · a939216
2 parents b4992f7 + 126964e
commit a939216
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 58 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/ckan.less b/ckan/public/base/less/ckan.less
@@ -5,6 +5,7 @@
 @import "dataset.less";
 @import "toolbar.less";
 @import "prose.less";
+@import "icons.less";
 @import "layout.less";
 @import "masthead.less";
 @import "footer.less";

diff --git a/ckan/public/base/less/icons.less b/ckan/public/base/less/icons.less
@@ -0,0 +1,63 @@
+@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: -@large-x;
+@large-offset-y: -@small-y - @medium-y;
+
+.ckan-icon {
+  .ie7-restore-right-whitespace;
+  display: inline-block;
+  vertical-align: text-bottom;
+  position: relative;
+  top: 2px;
+  width: 16px;
+  height: 16px;
+  background-image: url("@{image-path}/sprite-ckan-icons.png");
+  background-repeat: no-repeat;
+  background-position: 16px 16px;
+}
+
+.ckan-icon-background-position(@offset, @size) {
+  @w: "@{size}-x";
+  @h: "@{size}-y";
+  @x: "@{size}-offset-x";
+  @y: "@{size}-offset-y";
+  width: @@w;
+  height: @@h;
+  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") }
+.ckan-icon-home      { .ckan-icon-background-position(3, "large") }
+.ckan-icon-rewind    { .ckan-icon-background-position(4, "large") }
+.ckan-icon-tools     { .ckan-icon-background-position(5, "large") }
+.ckan-icon-flag      { .ckan-icon-background-position(6, "large") }
+.ckan-icon-clipboard { .ckan-icon-background-position(7, "large") }
+.ckan-icon-share     { .ckan-icon-background-position(8, "large") }
diff --git a/ckan/public/base/less/mixins.less b/ckan/public/base/less/mixins.less
@@ -15,22 +15,22 @@
   background: url("@{image-path}/background-tag.png") no-repeat -13px center;
   position: relative;
   display: block;
+  font-size: 11px;
   line-height: 27px;
   color: @layout-link-color;
   padding-left: 10px;
   padding-right: 5px;
   margin-right: 11px;
-}
-
-.tag:after {
-  content: "";
-  background: url("@{image-path}/background-tag.png") no-repeat center left;
-  position: absolute;
-  display: block;
-  top: 0;
-  bottom: 0;
-  right: -11px;
-  width: 11px;
+  &:before {
+    content: "";
+    background: url("@{image-path}/background-tag.png") no-repeat center left;
+    position: absolute;
+    display: block;
+    top: 0;
+    bottom: 0;
+    right: -11px;
+    width: 11px;
+  }
 }
 
 .unstyled {

diff --git a/ckan/public/base/less/nav.less b/ckan/public/base/less/nav.less
@@ -10,21 +10,31 @@
 .nav-simple > li > a {
   color: @nav-link-color;
   padding: 7px 25px;
+  font-size: 12px;
   line-height: 14px; // keeps the overall height an even number
 }
 
-.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);
-  .border-radius(3px);
-  .box-shadow(@inner-shadow);
-  box-shadow: @inner-shadow, @outer-shadow;
-  cursor: default;
-  margin: 2px 5px 3px;
-  padding: 4px (@module-margin-x - 7);
-  background: #000;
-  color: #fff;
-  border: 1px solid black;
+.nav-simple > li > a .ckan-icon {
+  position: relative;
+  top: -1px;
+}
+
+.nav-simple > li.active {
+  background-color: #f2f2f2;
+}
+
+.nav-simple > li.active > a {
+  .tag;
+  .box-sizing(border-box);
+  font-size: 12px;
+  font-weight: bold;
+  position: relative;
+  left: 4px;
+  margin-left: 0;
+  margin-right: 7px;
+  padding-left: 10px;
+  padding-right: 0px;
+  padding: 1px (@module-margin-x - 7);
 }
 
 .secondary .nav-simple > li > a {
@@ -33,17 +43,24 @@
   position: relative;
 }
 
-.secondary .nav-simple > li > a:hover:after {
+.secondary .nav-simple > li > a:hover:after,
+.secondary .nav-simple > li.active > 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 > a:hover:after {
+  .ckan-icon-circle-add;
+}
+
+.secondary .nav-simple > li.active > a:hover:after {
+  .ckan-icon-circle-cross;
+  right: 3px;
 }
 
 .secondary .nav-simple > li.selected > a {

diff --git a/ckan/public/base/less/toolbar.less b/ckan/public/base/less/toolbar.less
@@ -13,6 +13,13 @@
   border: none;
 }
 
+.toolbar .breadcrumb li:first-of-type:before {
+  content: " ";
+  .ckan-icon;
+  .ckan-icon-home;
+  margin-right: 5px;
+}
+
 .toolbar .breadcrumb li:after {
   content: " / ";
 }
@@ -39,3 +46,8 @@
 .toolbar .actions li:last-of-type {
   margin-right: 0;
 }
+
+.toolbar .actions .btn {
+  padding: 2px 6px 3px;
+  border-color: #b7b7b7;
+}
diff --git a/ckan/public/base/less/variables.less b/ckan/public/base/less/variables.less
@@ -24,7 +24,7 @@
 @masthead-text-color: #fff;
 @masthead-link-color: @masthead-text-color;
 @masthead-background-color-start: #005d7a;
-@masthead-background-color-end: #005d7a;
+@masthead-background-color-end: #00536b;
 
 // Twitter Bootstrap Overrides
 @bodyBackground: @layout-background-color;

diff --git a/ckan/templates/package/read.html b/ckan/templates/package/read.html
@@ -15,9 +15,9 @@
           <li class="active"><a href="">${c.pkg_dict.get('title', c.pkg_dict.get('name'))}</a></li>
         </ol>
         <ul class="actions">
-          <li><a class="btn" href="">History</a></li>
-          <li><a class="btn" href="">Edit</a></li>
-          <li><a class="btn" href="">Report Issue</a></li>
+          <li><a class="btn" href=""><i class="ckan-icon ckan-icon-rewind"></i> History</a></li>
+          <li><a class="btn" href=""><i class="ckan-icon ckan-icon-tools"></i> Edit</a></li>
+          <li><a class="btn" href=""><i class="ckan-icon ckan-icon-flag"></i> Report Issue</a></li>
         </ul>
       </nav>
 
@@ -127,39 +127,39 @@ <h3>Additional Info</h3>
 
       <aside class="secondary">
         <section class="module subscribe">
-          <h2 class="heading">Subscribe</h2>
+          <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">Social</h2>
+          <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>
 
         <section class="module info related" py:if="True">
-          <h2 class="heading">Related <a class="action" href="#">Add Related</a></h2>
+          <h2 class="heading"><i class="ckan-icon ckan-icon-photo"></i> Related <a class="action" href="#">Add Related</a></h2>
           <p class="content">Some interesting summary of this featured item. This
           may or may not have a slideshow.</p>
         </section>
 
         <section class="module info related empty" py:if="True">
-          <h2 class="heading">Related</h2>
+          <h2 class="heading"><i class="ckan-icon ckan-icon-photo"></i> Related</h2>
           <div class="content">
             <p>No apps, ideas, news stories or images have been
             related to this dataset yet, why not add one now?</p>
             <p class="action"><a class="btn" href="#">Add Item</a></p>
           </div>
         </section>
 
-        <section py:if="c.pkg.license_id" class="module info license">
-          <h2 class="heading">License</h2>
+        <section class="module info license" py:if="c.pkg.license_id">
+          <h2 class="heading"><i class="ckan-icon ckan-icon-lock"></i> License</h2>
           <p class="content">
             <a py:if="c.pkg_dict.get('license_url')" href="${c.pkg_dict.get('license_url')}" rel="dc:rights">${c.pkg_dict.get('license_title')}</a>
             <span py:if="c.pkg.license" property="dc:rights">${c.pkg_dict.get('license_title')}</span>
@@ -171,7 +171,7 @@ <h2 class="heading">License</h2>
         </section>
 
         <section class="module disqus-trackback">
-          <h2 class="heading">Trackback URL</h2>
+          <h2 class="heading"><i class="ckan-icon ckan-icon-clipboard"></i> Trackback URL</h2>
           <div class="field"><input type="text" value="http://trackback.com" /></div>
         </section>
       </aside>

diff --git a/ckan/templates/snippets/facet_list.html b/ckan/templates/snippets/facet_list.html
@@ -23,16 +23,18 @@
   how a facet-item's count is displayed.
   
   -->
-<section class="module" xmlns:py="http://genshi.edgewall.org/" py:with="items=h.unselected_facet_items(name, 10)">
-  <h2 class="heading">${h.facet_title(title)} <a href="${c.remove_field(name)}" class="action">Clear All</a></h2>
-  <nav>
-    <ul class="unstyled nav nav-simple">
-      <py:for each="item in items">
-        ${h.snippet('snippets/facet_item.html', name=name, item=item)}
-      </py:for>
-    </ul>
-  </nav>
-  <p class="footer" py:if="items">
-    <a href="#" class="read-more">Show All ${h.facet_title(title)}</a>
-  </p>
-</section>
+<py:with vars="items=h.unselected_facet_items(name, 10)" xmlns:py="http://genshi.edgewall.org/">
+  <section class="module" py:if="len(items)">
+    <h2 class="heading">${h.facet_title(title)} <a href="${c.remove_field(name)}" class="action">Clear All</a></h2>
+    <nav>
+      <ul class="unstyled nav nav-simple">
+        <py:for each="item in items">
+          ${h.snippet('snippets/facet_item.html', name=name, item=item)}
+        </py:for>
+      </ul>
+    </nav>
+    <p class="footer" py:if="items">
+      <a href="#" class="read-more">Show All ${h.facet_title(title)}</a>
+    </p>
+  </section>
+</py:with>