From b96ed8eece87505ffe805408fe3ca7d53244fa02 Mon Sep 17 00:00:00 2001 From: "Afshin T. Darian" Date: Mon, 22 Mar 2021 14:13:00 +0000 Subject: [PATCH] Add Styling to the HTML Pages --- .gitignore | 15 +- CONTRIBUTING.rst | 2 + jupyter_server/static/style/index.css | 92 ++++ jupyter_server/templates/browser-open.html | 4 +- jupyter_server/templates/error.html | 15 +- jupyter_server/templates/login.html | 193 ++++--- jupyter_server/templates/logout.html | 42 +- jupyter_server/templates/main.html | 4 +- jupyter_server/templates/page.html | 76 ++- jupyter_server/templates/view.html | 9 +- package-lock.json | 588 +++++++++++++++++++++ package.json | 13 + setup.py | 7 +- 13 files changed, 935 insertions(+), 125 deletions(-) create mode 100644 jupyter_server/static/style/index.css create mode 100644 package-lock.json create mode 100644 package.json diff --git a/.gitignore b/.gitignore index 936f7dbcb6..cc334c24d6 100644 --- a/.gitignore +++ b/.gitignore @@ -6,15 +6,9 @@ docs/man/*.gz docs/source/api/generated docs/source/config.rst docs/gh-pages -notebook/i18n/*/LC_MESSAGES/*.mo -notebook/i18n/*/LC_MESSAGES/nbjs.json -notebook/static/components -notebook/static/style/*.min.css* -notebook/static/*/js/built/ -notebook/static/*/built/ -notebook/static/built/ -notebook/static/*/js/main.min.js* -notebook/static/lab/*bundle.js +jupyter_server/i18n/*/LC_MESSAGES/*.mo +jupyter_server/i18n/*/LC_MESSAGES/nbjs.json +jupyter_server/static/style/*.min.css* node_modules *.py[co] __pycache__ @@ -40,6 +34,3 @@ config.rst /.project /.pydevproject -package-lock.json -geckodriver.log -yarn.lock diff --git a/CONTRIBUTING.rst b/CONTRIBUTING.rst index 6a955697de..7f078f5653 100644 --- a/CONTRIBUTING.rst +++ b/CONTRIBUTING.rst @@ -19,6 +19,8 @@ Setting Up a Development Environment Installing the Jupyter Server ----------------------------- +The development version of the server requires `node `_ and `pip `_. + Once you have installed the dependencies mentioned above, use the following steps:: diff --git a/jupyter_server/static/style/index.css b/jupyter_server/static/style/index.css new file mode 100644 index 0000000000..a9ce230b64 --- /dev/null +++ b/jupyter_server/static/style/index.css @@ -0,0 +1,92 @@ + +#jupyter_server { + padding-left: 0px; + padding-top: 1px; + padding-bottom: 1px; +} + +#jupyter_server img { + height: 28px; +} + +#jupyter-main-app { + padding-top: 50px; + text-align: center; +} + +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 1.42857143; + color: #000; +} + +body > #header { + display: block; + background-color: #fff; + position: relative; + z-index: 100; +} + +body > #header #header-container { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 5px; + padding-top: 5px; + padding-bottom: 5px; + padding-bottom: 5px; + padding-top: 5px; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; +} + +body > #header .header-bar { + width: 100%; + height: 1px; + background: #e7e7e7; + margin-bottom: -1px; +} + +.navbar-brand { + float: left; + height: 30px; + padding: 6px 0px; + padding-top: 6px; + padding-bottom: 6px; + padding-left: 0px; + font-size: 17px; + line-height: 18px; +} + +.navbar-brand, .navbar-nav > li > a { + text-shadow: 0 1px 0 rgba(255,255,255,.25); +} + +.nav { + padding-left: 0; + margin-bottom: 0; + list-style: none; +} + +.center-nav { + display: inline-block; + margin-bottom: -4px; +} + + +div.error { + margin: 2em; + text-align: center; +} + +div.error > h1 { + font-size: 500%; + line-height: normal; +} + +div.error > p { + font-size: 200%; + line-height: normal; +} diff --git a/jupyter_server/templates/browser-open.html b/jupyter_server/templates/browser-open.html index 6f277967fc..0cf0bad394 100644 --- a/jupyter_server/templates/browser-open.html +++ b/jupyter_server/templates/browser-open.html @@ -5,12 +5,12 @@ - Opening Jupyter Notebook + Opening Jupyter Application

- This page should redirect you to Jupyter Notebook. If it doesn't, + This page should redirect you to a Jupyter application. If it doesn't, click here to go to Jupyter.

diff --git a/jupyter_server/templates/error.html b/jupyter_server/templates/error.html index 1e3fae6225..17adc7dac2 100644 --- a/jupyter_server/templates/error.html +++ b/jupyter_server/templates/error.html @@ -1,17 +1,26 @@ {% extends "page.html" %} +{% block stylesheet %} +{{super()}} + +{% endblock %} {% block site %}
{% block h1_error %}

{{status_code}} : {{status_message}}

{% endblock h1_error %} - {% block error_detail %} {% if message %}

{% trans %}The error was:{% endtrans %}

- 
{{message}}
+ 
{{message}}
{% endif %} {% endblock error_detail %} @@ -19,3 +28,5 @@

{{status_code}} : {{status_message}}

{% endblock %} +{% block script %} +{% endblock script %} diff --git a/jupyter_server/templates/login.html b/jupyter_server/templates/login.html index 6b8d40df33..76860fede6 100644 --- a/jupyter_server/templates/login.html +++ b/jupyter_server/templates/login.html @@ -1,98 +1,117 @@ {% extends "page.html" %} -{% block stylesheet %} - +{% block stylesheet %} {% endblock %} {% block site %} -{% if message %} -{% for key in message %} -
- {{message[key]}} -
-{% endfor %} -{% endif %} -
- {{ xsrf_form_html() | safe }} - - - -
-{% if token_available %} -{% block token_message %} -
-

- Token authentication is enabled -

-

- If no password has been configured, you need to open the - server with its login token in the URL, or paste it above. - This requirement will be lifted if you - - enable a password. -

-

- The command: - 

jupyter server list
- will show you the URLs of running servers with their tokens, - which you can copy and paste into your browser. For example: -

- 
Currently running servers:
-http://localhost:8888/?token=c8de56fa... :: /Users/you/notebooks
-
-

- or you can paste just the token value into the password field on this - page. -

-

- See - - the documentation on how to enable a password - - in place of token authentication, - if you would like to avoid dealing with random tokens. -

-

- Cookies are required for authenticated access to notebooks. -

- {% if allow_password_change %} -

{% trans %}Setup a Password{% endtrans %}

-

You can also setup a password by entering your token and a new password - on the fields below:

-
- {{ xsrf_form_html() | safe }} -
- - -
-
- - +
+ {% if login_available %} + {# login_available means password-login is allowed. Show the form. #} +
+
+
+
+
+ + {{ xsrf_form_html() | safe }} + {% if token_available %} + + {% else %} + + {% endif %} + + + +
+
+
-
- +
+ {% else %} +

{% trans %}No login available, you shouldn't be seeing this page.{% endtrans %}

+ {% endif %} + {% if message %} +
+ {% for key in message %} +
+ {{message[key]}}
- + {% endfor %} +
+ {% endif %} + {% if token_available %} + {% block token_message %} +
+

+ Token authentication is enabled +

+

+ If no password has been configured, you need to open the + server with its login token in the URL, or paste it above. + This requirement will be lifted if you + + enable a password. +

+

+ The command: + 

jupyter server list
+ will show you the URLs of running servers with their tokens, + which you can copy and paste into your browser. For example: +

+ 
Currently running servers:
+http://localhost:8888/?token=c8de56fa... :: /Users/you/notebooks
+
+

+ or you can paste just the token value into the password field on this + page. +

+

+ See + + the documentation on how to enable a password + + in place of token authentication, + if you would like to avoid dealing with random tokens. +

+

+ Cookies are required for authenticated access to the Jupyter server. +

+ {% if allow_password_change %} +

{% trans %}Setup a Password{% endtrans %}

+

You can also setup a password by entering your token and a new password + on the fields below:

+
+ {{ xsrf_form_html() | safe }} +
+ + +
+
+ + +
+
+ +
+
+ {% endif %} + +
+ {% endblock token_message %} {% endif %}
-{% endblock token_message %} -{% endif %} - -{% endblock site %} + +{% endblock %} + + +{% block script %} +{% endblock %} diff --git a/jupyter_server/templates/logout.html b/jupyter_server/templates/logout.html index 750701b8fe..1208868648 100644 --- a/jupyter_server/templates/logout.html +++ b/jupyter_server/templates/logout.html @@ -1,13 +1,35 @@ {% extends "page.html" %} +{# This template is rendered in response to an authenticated request, so the +user is technically logged in. But when the user sees it, the cookie is +cleared by the Javascript, so we should render this as if the user was logged +out, without e.g. authentication tokens. +#} +{% set logged_in = False %} + +{% block stylesheet %} +{% endblock %} + {% block site %} -{% if message %} -{% for key in message %} -
- {{message[key]}} -
-{% endfor %} -{% endif %} - -{% trans %}Proceed to the login page{% endtrans %}. -{% endblock %} \ No newline at end of file + +
+ + {% if message %} + {% for key in message %} +
+ {{message[key]}} +
+ {% endfor %} + {% endif %} + + {% if not login_available %} + {% trans %}Proceed to the dashboard{% endtrans %}. + {% else %} + {% trans %}Proceed to the login page{% endtrans %}. + {% endif %} + + +
+ + {% endblock %} + diff --git a/jupyter_server/templates/main.html b/jupyter_server/templates/main.html index 66cbcdfd7d..cb418e22e7 100644 --- a/jupyter_server/templates/main.html +++ b/jupyter_server/templates/main.html @@ -1,5 +1,7 @@ {% extends "page.html" %} {% block site %} +

A Jupyter Server is running.

-{% endblock site %} \ No newline at end of file +
+{% endblock site %} diff --git a/jupyter_server/templates/page.html b/jupyter_server/templates/page.html index 99e00b52b6..d2c70d0187 100644 --- a/jupyter_server/templates/page.html +++ b/jupyter_server/templates/page.html @@ -2,24 +2,56 @@ - + {% block title %}Jupyter Server{% endblock %} - {% block favicon %}{% endblock %} + {% block favicon %} + {% endblock %} + + + {% block stylesheet %} - {% endblock %} - + {% endblock stylesheet %} + {% block meta %} - {% endblock %} - + {% endblock meta %} + - - + + + + + +
{% block site %} {% endblock site %} @@ -28,6 +60,34 @@ {% block after_site %} {% endblock after_site %} + {% block script %} + {% endblock script %} + + diff --git a/jupyter_server/templates/view.html b/jupyter_server/templates/view.html index 935b397ce8..5c7d38cc8c 100644 --- a/jupyter_server/templates/view.html +++ b/jupyter_server/templates/view.html @@ -9,13 +9,18 @@