[ZEPPELIN-996] Improve first page and dropdown menu in documentation site #1004

AhyoungRyu · 2016-06-13T11:09:56Z

What is this PR for?

Current Zeppelin documentation site is little bit hard to find a way for Zeppelin beginners. It will not easy to improve this at a time, but I did the below as a start of this work.

Restructured dropdown menu and added each category names
Added a overview list(with short description) to first page of website (index.md) so that people can look through the overall contents in Zeppelin website at a glance. (as Apache Spark and Apache Mesos does)

Please see the attached screenshot images :)

What type of PR is it?

Improvement & Documentation

Todos

- Change outdated screenshot images
- Combine text.md, table.md and html.md to basicdisplaysystem.md
- Fix dead link in virtual_machine.md
- Improve dropdown menu and reorder
- Improve first page(index.md)
- Combine with [ZEPPELIN-990] Add header anchor for Zeppelin documentation site #995 after it is merged into master

What is the Jira issue?

ZEPPELIN-996

How should this be tested?

Apply this patch and build the docs website with jekyll
Check the first page(index.html) and dropdown menu

Screenshots (if appropriate)

Dropdown menu
First page

Questions:

Does the licenses files need update? No
Is there breaking changes for older versions? No
Does this needs documentation? No

corneadoug · 2016-06-14T03:43:01Z

Great work,
Maybe in the case of the interpreter menu, we should bring the usage section before the available interpeters (since there is only one item)

AhyoungRyu · 2016-06-14T05:31:15Z

@corneadoug Ah there is two menu actually, they are not shown properly in the screenshot.

Dynamic Interpreter Loading
Dependency Management

Anyway, I can change the placement as you suggested :)

corneadoug · 2016-06-14T05:43:52Z

Oh indeed,
Since they are more generalistic and also a but hidden down there, it could be a better read flow to have them right below the overview

AhyoungRyu · 2016-06-14T06:05:38Z

@corneadoug Yeah you're right and it makes sense indeed. I addressed it :)

bzz · 2016-06-14T09:24:52Z

docs/displaysystem/basicdisplaysystem.md

 {% include JB/setup %}
+## Html
+
+With `%html` directive, Zeppelin treats your output as html


A nitpick - it's probably 'as HTML' capital case, as it's referred below

…eparated

AhyoungRyu · 2016-06-14T16:38:23Z

@bzz Thanks for your prudent review! I just addressed them in 6a2f40b.

minahlee · 2016-06-14T17:39:56Z

This is what I see from my screen, and cannot scroll down lower. Can you adjust size of the dropdown menu?

And also, can we rollback the change of display system menu order to text -> html -> table? if there are a lot of menu then alphabetical order makes sense, but in this case I think better to display in order of basic to advanced

Other than above comments, this PR looks awesome!

AhyoungRyu · 2016-06-14T20:43:04Z

@minahlee Thanks for your prudent feedback! I just addressed them to my last some commits as you said. And I also applied scrollbar to "More" tab.

BTW, I found an UI issue on "More" tab. When the screen width is small, some long text in the list are not visible. It was also fixed at af70939

Before
After

minahlee · 2016-06-15T05:10:05Z

merging if there is no more discussion

### 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 <[email protected]> Closes #1143 from AhyoungRyu/ZEPPELIN-1085 and squashes the following commits: 4d10883 [AhyoungRyu] 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 <[email protected]> Closes #1143 from AhyoungRyu/ZEPPELIN-1085 and squashes the following commits: 4d10883 [AhyoungRyu] Make dropdown menu scrollbar always visible (cherry picked from commit 1ccbd60) Signed-off-by: Mina Lee <[email protected]>

### 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 apache#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 <[email protected]> Closes apache#1143 from AhyoungRyu/ZEPPELIN-1085 and squashes the following commits: 4d10883 [AhyoungRyu] Make dropdown menu scrollbar always visible

### What is this PR for? I added available interpreters' logo image to `index.md` by #1004. So I updated this outdated `available_interpreters.png` for [BigQuery](https://cloud.google.com/bigquery/) & [Livy](http://livy.io/) logo. ### What type of PR is it? Improvement ### What is the Jira issue? Since it's just for `available_interpreters.png` update, didn't create Jira issue for this. ### Screenshots (if appropriate) - Before <img width="801" alt="screen shot 2016-08-18 at 4 45 01 pm" src="https://cloud.githubusercontent.com/assets/10060731/17765940/9783fd9a-6563-11e6-95e6-20b400209d80.png"> - After ![screen shot 2016-08-22 at 5 23 50 pm](https://cloud.githubusercontent.com/assets/10060731/17848287/8969a214-688d-11e6-9c00-b8371c836514.png) ### Questions: * Does the licenses files need update? no * Is there breaking changes for older versions? no * Does this needs documentation? no Author: AhyoungRyu <[email protected]> Closes #1340 from AhyoungRyu/update/availableInterpreterPic and squashes the following commits: 8839b97 [AhyoungRyu] Change available interpreters' list to alphabetical order 83206b8 [AhyoungRyu] Update available interpreters logo image in index.md

### What is this PR for? I added available interpreters' logo image to `index.md` by #1004. So I updated this outdated `available_interpreters.png` for [BigQuery](https://cloud.google.com/bigquery/) & [Livy](http://livy.io/) logo. ### What type of PR is it? Improvement ### What is the Jira issue? Since it's just for `available_interpreters.png` update, didn't create Jira issue for this. ### Screenshots (if appropriate) - Before <img width="801" alt="screen shot 2016-08-18 at 4 45 01 pm" src="https://cloud.githubusercontent.com/assets/10060731/17765940/9783fd9a-6563-11e6-95e6-20b400209d80.png"> - After ![screen shot 2016-08-22 at 5 23 50 pm](https://cloud.githubusercontent.com/assets/10060731/17848287/8969a214-688d-11e6-9c00-b8371c836514.png) ### Questions: * Does the licenses files need update? no * Is there breaking changes for older versions? no * Does this needs documentation? no Author: AhyoungRyu <[email protected]> Closes #1340 from AhyoungRyu/update/availableInterpreterPic and squashes the following commits: 8839b97 [AhyoungRyu] Change available interpreters' list to alphabetical order 83206b8 [AhyoungRyu] Update available interpreters logo image in index.md (cherry picked from commit ce56188) Signed-off-by: Mina Lee <[email protected]>

AhyoungRyu force-pushed the ZEPPELIN-996 branch from c861c6b to 6b04d58 Compare June 13, 2016 17:13

AhyoungRyu changed the title ~~Improve first page and dropdown menu in documentation site~~ [ZEPPELIN-996] Improve first page and dropdown menu in documentation site Jun 13, 2016

AhyoungRyu force-pushed the ZEPPELIN-996 branch from a643991 to 7f7ca2f Compare June 14, 2016 06:58

bzz reviewed Jun 14, 2016
View reviewed changes

AhyoungRyu added 9 commits June 14, 2016 09:36

Delete outdated images and add new images

4d021af

Combine text.md, html.md, table.md

4eecab8

Change 'Zeppelin Configuration' section placement so that it can be s…

6251558

…eparated

Fix dead link in virtual_machine.md

61da430

Improve dropdown menu and reorder menus

6ff4db6

Limit image width

ce4b122

Add all documentation list with short description to first page

67cff3a

Address @coureadoug feedback

649a14d

Address @bzz feedback

6a2f40b

AhyoungRyu force-pushed the ZEPPELIN-996 branch from 769dec2 to 6a2f40b Compare June 14, 2016 16:36

AhyoungRyu added 6 commits June 14, 2016 12:02

Add HDFS logo to available interpreter image

c75c3a0

Adjust image size

ad53799

Revert to Text -> HTML -> Table

230c670

Change dynamicform image

6e62e31

Resize dropdown menu maxheight

904acd6

Combine overflow-x & overflow-y to overflow

2654d92

Apply scrollable menu to 'more' tab & fix UI issue

af70939

Fix indentation

1886f8c

minahlee mentioned this pull request Jun 14, 2016

Fix navigation link of documentation for storage using anchor. #999

Closed

1 task

AhyoungRyu added 3 commits June 14, 2016 14:32

Revert to Text -> HTML -> Table in navbar

61a5ad6

Remove useless dash

6153a50

Add 'Apache' before 'Zeppelin'

1dbf805

asfgit closed this in 5ddc1ef Jun 15, 2016

AhyoungRyu mentioned this pull request Jul 7, 2016

[ZEPPELIN-1085] Make dropdown menu scrollbar always visible #1143

Closed

1 task

AhyoungRyu mentioned this pull request Aug 18, 2016

[MINOR][DOC] Update available interpreters' image in index.html #1340

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[ZEPPELIN-996] Improve first page and dropdown menu in documentation site #1004

[ZEPPELIN-996] Improve first page and dropdown menu in documentation site #1004

Uh oh!

AhyoungRyu commented Jun 13, 2016 •

edited

Loading

Uh oh!

corneadoug commented Jun 14, 2016

Uh oh!

AhyoungRyu commented Jun 14, 2016

Uh oh!

corneadoug commented Jun 14, 2016

Uh oh!

AhyoungRyu commented Jun 14, 2016

Uh oh!

bzz Jun 14, 2016

Uh oh!

AhyoungRyu commented Jun 14, 2016

Uh oh!

minahlee commented Jun 14, 2016

Uh oh!

AhyoungRyu commented Jun 14, 2016 •

edited

Loading

Uh oh!

minahlee commented Jun 15, 2016

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[ZEPPELIN-996] Improve first page and dropdown menu in documentation site #1004

[ZEPPELIN-996] Improve first page and dropdown menu in documentation site #1004

Uh oh!

Conversation

AhyoungRyu commented Jun 13, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is this PR for?

What type of PR is it?

Todos

What is the Jira issue?

How should this be tested?

Screenshots (if appropriate)

Questions:

Uh oh!

corneadoug commented Jun 14, 2016

Uh oh!

AhyoungRyu commented Jun 14, 2016

Uh oh!

corneadoug commented Jun 14, 2016

Uh oh!

AhyoungRyu commented Jun 14, 2016

Uh oh!

bzz Jun 14, 2016

Choose a reason for hiding this comment

Uh oh!

AhyoungRyu commented Jun 14, 2016

Uh oh!

minahlee commented Jun 14, 2016

Uh oh!

AhyoungRyu commented Jun 14, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

minahlee commented Jun 15, 2016

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

AhyoungRyu commented Jun 13, 2016 •

edited

Loading

AhyoungRyu commented Jun 14, 2016 •

edited

Loading