zeppelin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From mina...@apache.org
Subject zeppelin git commit: [ZEPPELIN-1085] Make dropdown menu scrollbar always visible
Date Mon, 18 Jul 2016 06:37:44 GMT
Repository: zeppelin
Updated Branches:
  refs/heads/branch-0.6 2271e13a2 -> 8851f9982


[ZEPPELIN-1085] Make dropdown menu scrollbar always visible

### What is this PR for?
In Zeppelin docs website, there are 4 dropdown menus(Quick Start, Interpreters, Display System
and More) in the navbar. Especially **Interpreters** and **More** menu have lots of lists
so I made this dropdown menu scrollable in #1004.
Originally the scroll bar is shown up when  a user is trying to scroll down. That's why it's
hard to notice there are more menus in the dropdown menu.  See [this issue](https://issues.apache.org/jira/browse/ZEPPELIN-1085).

So I made this scroll bar always visible. But only for chrome & safari. Unfortunately,
Firefox doesn't support custom scroll bar. See [here](http://stackoverflow.com/questions/18317634/force-visible-scrollbar-in-firefox-on-mac-os-x).
In short, it says
>There is no way to actually "force" Firefox render the old-style scrollbar since the default
scrollbar used in the system is predefined by the OS itself (note that you can modify which
scrollbar you want in System Preferences).

### What type of PR is it?
Improvement

### TODO
- [x] : test this in major browsers

### What is the Jira issue?
[ZEPPELIN-1085](https://issues.apache.org/jira/browse/ZEPPELIN-1085)

### How should this be tested?
[Build the Zeppelin docs website](https://github.com/apache/zeppelin/tree/master/docs#build-documentation)
in your local and check the dropdown menu in navbar. The scrollbae has to be shown right after
you click **Interpreters** or **More** menu.

### Screenshots (if appropriate)
 - Before : scrollbar is only shown up when you are trying to scroll up & down
![before](https://cloud.githubusercontent.com/assets/10060731/16647507/8c6fbc60-446a-11e6-9a57-b00a76e6b59c.gif)

 - After : always visible
![after](https://cloud.githubusercontent.com/assets/10060731/16647513/901e4e3a-446a-11e6-840b-599b6121fe46.gif)

 - In case of IE, you can always see the scrollbar. So it's not a problem originally.
![screen shot 2016-07-07 at 5 41 27 pm](https://cloud.githubusercontent.com/assets/10060731/16647584/e3708ff8-446a-11e6-8aee-c03eaba70cc9.png)

### Questions:
* Does the licenses files need update? no
* Is there breaking changes for older versions? no
* Does this needs documentation? no

Author: AhyoungRyu <fbdkdud93@hanmail.net>

Closes #1143 from AhyoungRyu/ZEPPELIN-1085 and squashes the following commits:

4d10883 [AhyoungRyu] Make dropdown menu scrollbar always visible

(cherry picked from commit 1ccbd602a8c486014a1b412d0200d2628c2bc411)
Signed-off-by: Mina Lee <minalee@apache.org>


Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/8851f998
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/8851f998
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/8851f998

Branch: refs/heads/branch-0.6
Commit: 8851f99827974ea11f5d0ee918dbc9aaf853231d
Parents: 2271e13
Author: AhyoungRyu <fbdkdud93@hanmail.net>
Authored: Thu Jul 7 15:32:28 2016 +0900
Committer: Mina Lee <minalee@apache.org>
Committed: Mon Jul 18 15:37:39 2016 +0900

----------------------------------------------------------------------
 docs/assets/themes/zeppelin/css/style.css | 10 ++++++++++
 1 file changed, 10 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/zeppelin/blob/8851f998/docs/assets/themes/zeppelin/css/style.css
----------------------------------------------------------------------
diff --git a/docs/assets/themes/zeppelin/css/style.css b/docs/assets/themes/zeppelin/css/style.css
index 8ab197c..1a6f3da 100644
--- a/docs/assets/themes/zeppelin/css/style.css
+++ b/docs/assets/themes/zeppelin/css/style.css
@@ -141,6 +141,16 @@ body {
   overflow: auto;
 }
 
+.scrollable-menu::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;        
+}  
+
+.scrollable-menu::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background-color: gray; 
+}
+
 .index-header {
   font-size: 16px;
   font-style: italic;


Mime
View raw message