[#1251] Adds custom scrollbar to webkit and small tweaks to JS

ckan · Nov 27, 2013 · 72be22e · 72be22e
1 parent 5287e8f
commit 72be22e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/ckan/public/base/javascript/modules/resource-views.js b/ckan/public/base/javascript/modules/resource-views.js
@@ -17,8 +17,10 @@ this.ckan.module('resource-views', function($, _) {
 
       if (window.location.hash.indexOf('#view-') === 0) {
         this._handleHash();
-        var position = $('.view-list li.active').position();
-        $('.view-list', this.el).scrollLeft(position.left);
+        var position = $('.view-list li.active', this.el).position();
+        if (position.left > 800) {
+          $('.view-list', this.el).scrollLeft(position.left);
+        }
       } else {
         this.view = $('.resource-view:first', this.el).data('id');
         this._show();

diff --git a/ckan/public/base/less/dataset.less b/ckan/public/base/less/dataset.less
@@ -296,10 +296,30 @@
       display: inline-block;
       width: 250px;
       margin-right: 10px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      width: 7px;
+      height: 7px;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background-color: @navActiveBackgroundColor;
     }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background-color: darken(@navActiveBackgroundColor, 20%);
+      &:hover {
+        background-color: @layoutLinkColor;
+      }
+    }
+
   }
 }
 
 .resource-view {
-
+  margin-top: 20px;
 }
diff --git a/ckan/templates/package/snippets/resource_view.html b/ckan/templates/package/snippets/resource_view.html
@@ -1,6 +1,6 @@
 <div id="view-{{ resource_view['id'] }}" class="resource-view" data-id="{{ resource_view['id'] }}" data-title="{{ resource_view['title'] }}" data-description="{{ resource_view['descripion'] }}">
-  <h1>{{ resource_view['title'] }}</h1>
-  <p class="desc">{{ resource_view['description'] }}</p>
+  <h1 class="js-hide">{{ resource_view['title'] }}</h1>
+  <p class="desc js-hide">{{ resource_view['description'] }}</p>
   <div class="ckanext-datapreview">
     {% if not h.resource_view_is_iframed(resource_view) %}
       {{ h.rendered_resource_view(resource_view, resource, package) }}