Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Styling to the HTML Pages #452

Merged
merged 1 commit into from
Mar 22, 2021
Merged

Add Styling to the HTML Pages #452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 3 additions & 12 deletions .gitignore
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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