Skip to content

Commit 74801f4

Browse files
blink1073blink1073
authored
Merge pull request #452 from afshin/html-styles
Add Styling to the HTML Pages
2 parents abaa8cd + b96ed8e commit 74801f4

13 files changed

+935
-125
lines changed

‎.gitignore

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,9 @@ docs/man/*.gz
66
docs/source/api/generated
77
docs/source/config.rst
88
docs/gh-pages
9-
notebook/i18n/*/LC_MESSAGES/*.mo
10-
notebook/i18n/*/LC_MESSAGES/nbjs.json
11-
notebook/static/components
12-
notebook/static/style/*.min.css*
13-
notebook/static/*/js/built/
14-
notebook/static/*/built/
15-
notebook/static/built/
16-
notebook/static/*/js/main.min.js*
17-
notebook/static/lab/*bundle.js
9+
jupyter_server/i18n/*/LC_MESSAGES/*.mo
10+
jupyter_server/i18n/*/LC_MESSAGES/nbjs.json
11+
jupyter_server/static/style/*.min.css*
1812
node_modules
1913
*.py[co]
2014
__pycache__
@@ -40,6 +34,3 @@ config.rst
4034
/.project
4135
/.pydevproject
4236

43-
package-lock.json
44-
geckodriver.log
45-
yarn.lock

‎CONTRIBUTING.rst

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ Setting Up a Development Environment
1919
Installing the Jupyter Server
2020
-----------------------------
2121

22+
The development version of the server requires `node <https://nodejs.org/en/download/>`_ and `pip <https://pip.pypa.io/en/stable/installing/>`_.
23+
2224
Once you have installed the dependencies mentioned above, use the following
2325
steps::
2426

‎jupyter_server/static/style/index.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
2+
#jupyter_server {
3+
padding-left: 0px;
4+
padding-top: 1px;
5+
padding-bottom: 1px;
6+
}
7+
8+
#jupyter_server img {
9+
height: 28px;
10+
}
11+
12+
#jupyter-main-app {
13+
padding-top: 50px;
14+
text-align: center;
15+
}
16+
17+
body {
18+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
19+
font-size: 13px;
20+
line-height: 1.42857143;
21+
color: #000;
22+
}
23+
24+
body > #header {
25+
display: block;
26+
background-color: #fff;
27+
position: relative;
28+
z-index: 100;
29+
}
30+
31+
body > #header #header-container {
32+
display: flex;
33+
flex-direction: row;
34+
justify-content: space-between;
35+
padding: 5px;
36+
padding-top: 5px;
37+
padding-bottom: 5px;
38+
padding-bottom: 5px;
39+
padding-top: 5px;
40+
box-sizing: border-box;
41+
-moz-box-sizing: border-box;
42+
-webkit-box-sizing: border-box;
43+
}
44+
45+
body > #header .header-bar {
46+
width: 100%;
47+
height: 1px;
48+
background: #e7e7e7;
49+
margin-bottom: -1px;
50+
}
51+
52+
.navbar-brand {
53+
float: left;
54+
height: 30px;
55+
padding: 6px 0px;
56+
padding-top: 6px;
57+
padding-bottom: 6px;
58+
padding-left: 0px;
59+
font-size: 17px;
60+
line-height: 18px;
61+
}
62+
63+
.navbar-brand, .navbar-nav > li > a {
64+
text-shadow: 0 1px 0 rgba(255,255,255,.25);
65+
}
66+
67+
.nav {
68+
padding-left: 0;
69+
margin-bottom: 0;
70+
list-style: none;
71+
}
72+
73+
.center-nav {
74+
display: inline-block;
75+
margin-bottom: -4px;
76+
}
77+
78+
79+
div.error {
80+
margin: 2em;
81+
text-align: center;
82+
}
83+
84+
div.error > h1 {
85+
font-size: 500%;
86+
line-height: normal;
87+
}
88+
89+
div.error > p {
90+
font-size: 200%;
91+
line-height: normal;
92+
}

‎jupyter_server/templates/browser-open.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
<head>
66
<meta charset="UTF-8">
77
<meta http-equiv="refresh" content="1;url={{ open_url }}" />
8-
<title>Opening Jupyter Notebook</title>
8+
<title>Opening Jupyter Application</title>
99
</head>
1010
<body>
1111

1212
<p>
13-
This page should redirect you to Jupyter Notebook. If it doesn't,
13+
This page should redirect you to a Jupyter application. If it doesn't,
1414
<a href="{{ open_url }}">click here to go to Jupyter</a>.
1515
</p>
1616

‎jupyter_server/templates/error.html

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,32 @@
11
{% extends "page.html" %}
22

3+
{% block stylesheet %}
4+
{{super()}}
5+
<style type="text/css">
6+
/* disable initial hide */
7+
div#header,
8+
div#site {
9+
display: block;
10+
}
11+
</style>
12+
{% endblock %}
313
{% block site %}
414

515
<div class="error">
616
{% block h1_error %}
717
<h1>{{status_code}} : {{status_message}}</h1>
818
{% endblock h1_error %}
9-
1019
{% block error_detail %}
1120
{% if message %}
1221
<p>{% trans %}The error was:{% endtrans %}</p>
1322
<div class="traceback-wrapper">
14-
<pre class="traceback">{{message}}</pre>
23+
<pre class="traceback">{{message}}</pre>
1524
</div>
1625
{% endif %}
1726
{% endblock error_detail %}
1827
</div>
1928

2029
{% endblock %}
2130

31+
{% block script %}
32+
{% endblock script %}

‎jupyter_server/templates/login.html

Lines changed: 106 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,117 @@
11
{% extends "page.html" %}
22

3-
{% block stylesheet %}
4-
<style>
5-
.form {
6-
margin-left: 50px;
7-
margin-right: 50px;
8-
}
93

10-
.content {
11-
margin-left: 50px;
12-
margin-right: 50px;
13-
margin-bottom: 50px;
14-
}
15-
</style>
4+
{% block stylesheet %}
165
{% endblock %}
176

187
{% block site %}
19-
{% if message %}
20-
{% for key in message %}
21-
<div class="content">
22-
{{message[key]}}
23-
</div>
24-
{% endfor %}
25-
{% endif %}
26-
<form class="form" action="{{base_url}}login?next={{next}}" method="post">
27-
{{ xsrf_form_html() | safe }}
28-
<label for="password_input"><strong>{% trans %}Password or token:{% endtrans %}</strong></label>
29-
<input type="password" name="password" id="password_input">
30-
<button type="submit" id="login_submit">{% trans %}Log in{% endtrans %}</button>
31-
</form>
328

33-
{% if token_available %}
34-
{% block token_message %}
35-
<div class="content">
36-
<h3>
37-
Token authentication is enabled
38-
</h3>
39-
<p>
40-
If no password has been configured, you need to open the
41-
server with its login token in the URL, or paste it above.
42-
This requirement will be lifted if you
43-
<b><a href='https://jupyter-server.readthedocs.io/en/latest/operators/public-server.html'>
44-
enable a password</a></b>.
45-
</p>
46-
<p>
47-
The command:
48-
<pre>jupyter server list</pre>
49-
will show you the URLs of running servers with their tokens,
50-
which you can copy and paste into your browser. For example:
51-
</p>
52-
<pre>Currently running servers:
53-
http://localhost:8888/?token=c8de56fa... :: /Users/you/notebooks
54-
</pre>
55-
<p>
56-
or you can paste just the token value into the password field on this
57-
page.
58-
</p>
59-
<p>
60-
See
61-
<b><a href='https://jupyter-server.readthedocs.io/en/latest/operators/public-server.html'>
62-
the documentation on how to enable a password</a>
63-
</b>
64-
in place of token authentication,
65-
if you would like to avoid dealing with random tokens.
66-
</p>
67-
<p>
68-
Cookies are required for authenticated access to notebooks.
69-
</p>
70-
{% if allow_password_change %}
71-
<h3>{% trans %}Setup a Password{% endtrans %}</h3>
72-
<p> You can also setup a password by entering your token and a new password
73-
on the fields below:</p>
74-
<form action="{{base_url}}login?next={{next}}" method="post" class="">
75-
{{ xsrf_form_html() | safe }}
76-
<div class="form-group">
77-
<label for="token_input">
78-
<h4>Token</h4>
79-
</label>
80-
<input type="password" name="password" id="token_input" class="form-control">
81-
</div>
82-
<div class="form-group">
83-
<label for="new_password_input">
84-
<h4>New Password</h4>
85-
</label>
86-
<input type="password" name="new_password" id="new_password_input" class="form-control" required>
9+
<div id="jupyter-main-app" class="container">
10+
{% if login_available %}
11+
{# login_available means password-login is allowed. Show the form. #}
12+
<div class="row">
13+
<div class="navbar col-sm-8">
14+
<div class="navbar-inner">
15+
<div class="container">
16+
<div class="center-nav">
17+
<form action="{{base_url}}login?next={{next}}" method="post" class="navbar-form pull-left">
18+
{{ xsrf_form_html() | safe }}
19+
{% if token_available %}
20+
<label for="password_input"><strong>{% trans %}Password or token:{% endtrans
21+
%}</strong></label>
22+
{% else %}
23+
<label for="password_input"><strong>{% trans %}Password:{% endtrans %}</strong></label>
24+
{% endif %}
25+
<input type="password" name="password" id="password_input" class="form-control">
26+
<button type="submit" class="btn btn-default" id="login_submit">{% trans %}Log in{% endtrans
27+
%}</button>
28+
</form>
29+
</div>
30+
</div>
31+
</div>
8732
</div>
88-
<div class="form-group">
89-
<button type="submit" class="btn btn-default" id="login_new_pass_submit">{% trans %}Log in and set new
90-
password{% endtrans %}</button>
33+
</div>
34+
{% else %}
35+
<p>{% trans %}No login available, you shouldn't be seeing this page.{% endtrans %}</p>
36+
{% endif %}
37+
{% if message %}
38+
<div class="row">
39+
{% for key in message %}
40+
<div class="message {{key}}">
41+
{{message[key]}}
9142
</div>
92-
</form>
43+
{% endfor %}
44+
</div>
45+
{% endif %}
46+
{% if token_available %}
47+
{% block token_message %}
48+
<div class="col-sm-6 col-sm-offset-3 text-left rendered_html">
49+
<h3>
50+
Token authentication is enabled
51+
</h3>
52+
<p>
53+
If no password has been configured, you need to open the
54+
server with its login token in the URL, or paste it above.
55+
This requirement will be lifted if you
56+
<b><a href='https://jupyter-server.readthedocs.io/en/latest/operators/public-server.html'>
57+
enable a password</a></b>.
58+
</p>
59+
<p>
60+
The command:
61+
<pre>jupyter server list</pre>
62+
will show you the URLs of running servers with their tokens,
63+
which you can copy and paste into your browser. For example:
64+
</p>
65+
<pre>Currently running servers:
66+
http://localhost:8888/?token=c8de56fa... :: /Users/you/notebooks
67+
</pre>
68+
<p>
69+
or you can paste just the token value into the password field on this
70+
page.
71+
</p>
72+
<p>
73+
See
74+
<b><a href='https://jupyter-server.readthedocs.io/en/latest/operators/public-server.html'>
75+
the documentation on how to enable a password</a>
76+
</b>
77+
in place of token authentication,
78+
if you would like to avoid dealing with random tokens.
79+
</p>
80+
<p>
81+
Cookies are required for authenticated access to the Jupyter server.
82+
</p>
83+
{% if allow_password_change %}
84+
<h3>{% trans %}Setup a Password{% endtrans %}</h3>
85+
<p> You can also setup a password by entering your token and a new password
86+
on the fields below:</p>
87+
<form action="{{base_url}}login?next={{next}}" method="post" class="">
88+
{{ xsrf_form_html() | safe }}
89+
<div class="form-group">
90+
<label for="token_input">
91+
<h4>Token</h4>
92+
</label>
93+
<input type="password" name="password" id="token_input" class="form-control">
94+
</div>
95+
<div class="form-group">
96+
<label for="new_password_input">
97+
<h4>New Password</h4>
98+
</label>
99+
<input type="password" name="new_password" id="new_password_input" class="form-control" required>
100+
</div>
101+
<div class="form-group">
102+
<button type="submit" class="btn btn-default" id="login_new_pass_submit">{% trans %}Log in and set new
103+
password{% endtrans %}</button>
104+
</div>
105+
</form>
106+
{% endif %}
107+
108+
</div>
109+
{% endblock token_message %}
93110
{% endif %}
94111
</div>
95-
{% endblock token_message %}
96-
{% endif %}
97-
98-
{% endblock site %}
112+
113+
{% endblock %}
114+
115+
116+
{% block script %}
117+
{% endblock %}

0 commit comments

Comments
 (0)