Skip to content

Commit

Permalink
Add Styling to the HTML Pages
Browse files Browse the repository at this point in the history
  • Loading branch information
afshin committed Mar 22, 2021
1 parent abaa8cd commit b96ed8e
Show file tree
Hide file tree
Showing 13 changed files with 935 additions and 125 deletions.
15 changes: 3 additions & 12 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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__
Expand All @@ -40,6 +34,3 @@ config.rst
/.project
/.pydevproject

package-lock.json
geckodriver.log
yarn.lock
2 changes: 2 additions & 0 deletions CONTRIBUTING.rst
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ Setting Up a Development Environment
Installing the Jupyter Server
-----------------------------

The development version of the server requires `node <https://nodejs.org/en/download/>`_ and `pip <https://pip.pypa.io/en/stable/installing/>`_.

Once you have installed the dependencies mentioned above, use the following
steps::

Expand Down
92 changes: 92 additions & 0 deletions jupyter_server/static/style/index.css
Original file line number Diff line number Diff line change
@@ -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;
}
4 changes: 2 additions & 2 deletions jupyter_server/templates/browser-open.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="1;url={{ open_url }}" />
<title>Opening Jupyter Notebook</title>
<title>Opening Jupyter Application</title>
</head>
<body>

<p>
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,
<a href="{{ open_url }}">click here to go to Jupyter</a>.
</p>

Expand Down
15 changes: 13 additions & 2 deletions jupyter_server/templates/error.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,32 @@
{% extends "page.html" %}

{% block stylesheet %}
{{super()}}
<style type="text/css">
/* disable initial hide */
div#header,
div#site {
display: block;
}
</style>
{% endblock %}
{% block site %}

<div class="error">
{% block h1_error %}
<h1>{{status_code}} : {{status_message}}</h1>
{% endblock h1_error %}

{% block error_detail %}
{% if message %}
<p>{% trans %}The error was:{% endtrans %}</p>
<div class="traceback-wrapper">
<pre class="traceback">{{message}}</pre>
<pre class="traceback">{{message}}</pre>
</div>
{% endif %}
{% endblock error_detail %}
</div>

{% endblock %}

{% block script %}
{% endblock script %}
193 changes: 106 additions & 87 deletions jupyter_server/templates/login.html
Original file line number Diff line number Diff line change
@@ -1,98 +1,117 @@
{% extends "page.html" %}

{% block stylesheet %}
<style>
.form {
margin-left: 50px;
margin-right: 50px;
}

.content {
margin-left: 50px;
margin-right: 50px;
margin-bottom: 50px;
}
</style>
{% block stylesheet %}
{% endblock %}

{% block site %}
{% if message %}
{% for key in message %}
<div class="content">
{{message[key]}}
</div>
{% endfor %}
{% endif %}
<form class="form" action="{{base_url}}login?next={{next}}" method="post">
{{ xsrf_form_html() | safe }}
<label for="password_input"><strong>{% trans %}Password or token:{% endtrans %}</strong></label>
<input type="password" name="password" id="password_input">
<button type="submit" id="login_submit">{% trans %}Log in{% endtrans %}</button>
</form>

{% if token_available %}
{% block token_message %}
<div class="content">
<h3>
Token authentication is enabled
</h3>
<p>
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
<b><a href='https://jupyter-server.readthedocs.io/en/latest/operators/public-server.html'>
enable a password</a></b>.
</p>
<p>
The command:
<pre>jupyter server list</pre>
will show you the URLs of running servers with their tokens,
which you can copy and paste into your browser. For example:
</p>
<pre>Currently running servers:
http://localhost:8888/?token=c8de56fa... :: /Users/you/notebooks
</pre>
<p>
or you can paste just the token value into the password field on this
page.
</p>
<p>
See
<b><a href='https://jupyter-server.readthedocs.io/en/latest/operators/public-server.html'>
the documentation on how to enable a password</a>
</b>
in place of token authentication,
if you would like to avoid dealing with random tokens.
</p>
<p>
Cookies are required for authenticated access to notebooks.
</p>
{% if allow_password_change %}
<h3>{% trans %}Setup a Password{% endtrans %}</h3>
<p> You can also setup a password by entering your token and a new password
on the fields below:</p>
<form action="{{base_url}}login?next={{next}}" method="post" class="">
{{ xsrf_form_html() | safe }}
<div class="form-group">
<label for="token_input">
<h4>Token</h4>
</label>
<input type="password" name="password" id="token_input" class="form-control">
</div>
<div class="form-group">
<label for="new_password_input">
<h4>New Password</h4>
</label>
<input type="password" name="new_password" id="new_password_input" class="form-control" required>
<div id="jupyter-main-app" class="container">
{% if login_available %}
{# login_available means password-login is allowed. Show the form. #}
<div class="row">
<div class="navbar col-sm-8">
<div class="navbar-inner">
<div class="container">
<div class="center-nav">
<form action="{{base_url}}login?next={{next}}" method="post" class="navbar-form pull-left">
{{ xsrf_form_html() | safe }}
{% if token_available %}
<label for="password_input"><strong>{% trans %}Password or token:{% endtrans
%}</strong></label>
{% else %}
<label for="password_input"><strong>{% trans %}Password:{% endtrans %}</strong></label>
{% endif %}
<input type="password" name="password" id="password_input" class="form-control">
<button type="submit" class="btn btn-default" id="login_submit">{% trans %}Log in{% endtrans
%}</button>
</form>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" id="login_new_pass_submit">{% trans %}Log in and set new
password{% endtrans %}</button>
</div>
{% else %}
<p>{% trans %}No login available, you shouldn't be seeing this page.{% endtrans %}</p>
{% endif %}
{% if message %}
<div class="row">
{% for key in message %}
<div class="message {{key}}">
{{message[key]}}
</div>
</form>
{% endfor %}
</div>
{% endif %}
{% if token_available %}
{% block token_message %}
<div class="col-sm-6 col-sm-offset-3 text-left rendered_html">
<h3>
Token authentication is enabled
</h3>
<p>
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
<b><a href='https://jupyter-server.readthedocs.io/en/latest/operators/public-server.html'>
enable a password</a></b>.
</p>
<p>
The command:
<pre>jupyter server list</pre>
will show you the URLs of running servers with their tokens,
which you can copy and paste into your browser. For example:
</p>
<pre>Currently running servers:
http://localhost:8888/?token=c8de56fa... :: /Users/you/notebooks
</pre>
<p>
or you can paste just the token value into the password field on this
page.
</p>
<p>
See
<b><a href='https://jupyter-server.readthedocs.io/en/latest/operators/public-server.html'>
the documentation on how to enable a password</a>
</b>
in place of token authentication,
if you would like to avoid dealing with random tokens.
</p>
<p>
Cookies are required for authenticated access to the Jupyter server.
</p>
{% if allow_password_change %}
<h3>{% trans %}Setup a Password{% endtrans %}</h3>
<p> You can also setup a password by entering your token and a new password
on the fields below:</p>
<form action="{{base_url}}login?next={{next}}" method="post" class="">
{{ xsrf_form_html() | safe }}
<div class="form-group">
<label for="token_input">
<h4>Token</h4>
</label>
<input type="password" name="password" id="token_input" class="form-control">
</div>
<div class="form-group">
<label for="new_password_input">
<h4>New Password</h4>
</label>
<input type="password" name="new_password" id="new_password_input" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" id="login_new_pass_submit">{% trans %}Log in and set new
password{% endtrans %}</button>
</div>
</form>
{% endif %}

</div>
{% endblock token_message %}
{% endif %}
</div>
{% endblock token_message %}
{% endif %}

{% endblock site %}

{% endblock %}


{% block script %}
{% endblock %}
Loading

0 comments on commit b96ed8e

Please sign in to comment.