Skip to content

Commit

Permalink
Add templates (#134)
Browse files Browse the repository at this point in the history
* Downgrade hub

* Adapt to hub 4.x

* Fix indent

* Add admin template

* Linting fixes

* Add some padding to make footer fixed

* Fix footer, next attempt

Using solution from https://stackoverflow.com/a/62009670

* Fix announcement
  • Loading branch information
enolfc authored Sep 19, 2024
1 parent c8ceaaa commit 857a93e
Show file tree
Hide file tree
Showing 14 changed files with 431 additions and 183 deletions.
2 changes: 1 addition & 1 deletion ec-templates/403.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!-- htmlhint doctype-first:false -->
{% extends "error.html" %}
{% block main %}
<div class="ecl-container ecl-u-mv-xl">
<div class="ecl-container ecl-u-mv-xl container-fix">
<h1>Unauthorized!</h1>
<p>
Access to European Open Science Cloud - EU Node Interactive Notebooks is
Expand Down
17 changes: 17 additions & 0 deletions ec-templates/admin.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!-- htmlhint doctype-first:false,id-class-value:false -->
{% extends "page.html" %}

{% block main %}
<div class="ecl-container ecl-u-mv-xl container-fix">
<div id="react-admin-hook">
<script id="jupyterhub-admin-config">
window.api_page_limit = parseInt("{{ api_page_limit|safe }}");
window.base_url = "{{ base_url|safe }}";
</script>
<script src="{{ static_url('js/admin-react.js') }}"></script>
</div>
<div class="container-fluid navbar-default small version_footer">
<div class="navbar-text">JupyterHub {{ server_version }}</div>
</div>
</div>
{% endblock %}
2 changes: 1 addition & 1 deletion ec-templates/egi-login.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% endif %}

{% block main %}
<div id="main-page-content" class="ecl-u-mb-l">
<div id="main-page-content" class="ecl-u-mb-l container-fix">
<article>
<div>
<div class="ecl-u-mb-2xl">
Expand Down
45 changes: 45 additions & 0 deletions ec-templates/error.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!-- htmlhint doctype-first:false -->
{% extends "page.html" %}
{% block login_widget %}
{% endblock login_widget %}
{% block main %}
<div class="ecl-container ecl-u-mv-xl container-fix">
{% block h1_error %}
<h1>{{ status_code }} : {{ status_message }}</h1>
{% endblock h1_error %}
{% block error_detail %}
{% if message %}<p>{{ message }}</p>{% endif %}
{% if message_html %}<p>{{ message_html | safe }}</p>{% endif %}
{% if extra_error_html %}<p>{{ extra_error_html | safe }}</p>{% endif %}
{% endblock error_detail %}
</div>
{% endblock main %}
{% block script %}
{{ super() }}
<script type="text/javascript">
function _remove_redirects_from_url() {
if (window.location.search.length <= 1) {
return;
}
var search_parameters = window.location.search.slice(1).split('&');
for (var i = 0; i < search_parameters.length; i++) {
if (search_parameters[i].split('=')[0] === 'redirects') {
// remote redirects from search parameters
search_parameters.splice(i, 1);
var new_search = '';
if (search_parameters.length) {
new_search = '?' + search_parameters.join('&');
}
var new_url = window.location.origin +
window.location.pathname +
new_search +
window.location.hash;
window.history.replaceState({}, "", new_url);
return;
}
}
}

_remove_redirects_from_url();
</script>
{% endblock script %}
24 changes: 14 additions & 10 deletions ec-templates/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@
{% endif %}

{% block main %}
<div class="ecl-container ecl-u-mv-xl">
<div class="ecl-container ecl-u-mv-xl container-fix">
<h1 class="sr-only">JupyterHub home page</h1>
<div class="row">
<div class="text-center">
{% if default_server.active %}
<a id="stop" role="button" class="ecl-button ecl-button--cta"
<a id="stop" role="button" class="ecl-button ecl-button--secondary"
>Stop My Server</a
>{% endif %}
>
{% endif %}
<a
id="start"
role="button"
Expand Down Expand Up @@ -53,7 +54,7 @@ <h2>Named Servers</h2>
<button
role="button"
type="button"
class="new-server-btn btn btn-xs btn-primary"
class="new-server-btn ecl-button ecl-button--primary btn-xs"
>
Add New Server
</button>
Expand All @@ -80,20 +81,20 @@ <h2>Named Servers</h2>
<td>
<a
role="button"
class="stop-server btn btn-xs btn-danger{% if not spawner.active %} hidden{% endif %}"
class="stop-server btn-xs ecl-button ecl-button--secondary {% if not spawner.active %} hidden{% endif %}"
id="stop-{{ spawner.name }}"
>stop</a
>
<a
role="button"
class="start-server btn btn-xs btn-primary {% if spawner.active %}hidden{% endif %}"
class="start-server btn-xs ecl-button ecl-button--primary {% if spawner.active %}hidden{% endif %}"
id="start-{{ spawner.name }}"
href="{{ base_url }}spawn/{{ user.name }}/{{ spawner.name }}"
>start</a
>
<button
role="button"
class="delete-server btn btn-xs btn-danger{% if spawner.active %} hidden{% endif %}"
class="delete-server btn-xs ecl-button ecl-button--secondary {% if spawner.active %} hidden{% endif %}"
id="delete-{{ spawner.name }}"
>
delete
Expand All @@ -105,8 +106,11 @@ <h2>Named Servers</h2>
</table>
{% endif %}
</div>
{% endblock main %} {% block script %} {{ super() }}
{% endblock main %}

{% block script %}
{{ super() }}
<script type="text/javascript">
require(["home"]);
require(["home"]);
</script>
{% endblock script %}
{% endblock %}
2 changes: 1 addition & 1 deletion ec-templates/logout.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{% endif %}

{% block main %}
<div id="logout-main" class="container">
<div id="logout-main" class="ecl-container">
<p>Successfully logged out.</p>
</div>
{% endblock %}
78 changes: 78 additions & 0 deletions ec-templates/not_running.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!-- htmlhint doctype-first:false,id-class-value:false -->
{% extends "page.html" %}
{% block main %}
<div class="ecl-container ecl-u-mv-xl">
<div class="row">
<div class="text-center">
{% block heading %}
<h1>
{% if failed %}
Spawn failed
{% else %}
Server not running
{% endif %}
</h1>
{% endblock heading %}
{% block message %}
<p>
{% if failed %}
The latest attempt to start your server {{ server_name }} has failed.
{% if failed_html_message %}
</p>
<p>{{ failed_html_message | safe }}</p>
<p>{% elif failed_message %}</p>
<p>{{ failed_message }}</p>
<p>
{% endif %}
Would you like to retry starting it?
{% else %}
Your server {{ server_name }} is not running.
{% if implicit_spawn_seconds %}
It will be restarted automatically.
If you are not redirected in a few seconds,
click below to launch your server.
{% else %}
Would you like to start it?
{% endif %}
{% endif %}
</p>
{% endblock message %}
{% block start_button %}
<a id="start"
role="button"
class="ecl-button ecl-button--primary"
href="{{ spawn_url }}">
{% if failed %}
Relaunch
{% else %}
Launch
{% endif %}
Server {{ server_name }}
</a>
{% endblock start_button %}
</div>
</div>
</div>
{% endblock main %}
{% block script %}
{{ super () }}
{% if implicit_spawn_seconds %}
<script type="text/javascript">
var spawn_url = "{{ spawn_url }}";
var implicit_spawn_seconds = {
{
implicit_spawn_seconds
}
};
setTimeout(function() {
console.log("redirecting to spawn at", spawn_url);
window.location = spawn_url;
},
1000 * implicit_spawn_seconds
);
</script>
{% endif %}
<script type="text/javascript">
require(["not_running"]);
</script>
{% endblock script %}
54 changes: 54 additions & 0 deletions ec-templates/oauth.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!-- htmlhint doctype-first:false,id-class-value:false -->
{% extends "page.html" %}
{% block login_widget %}
{% endblock login_widget %}
{% block main %}
<div class="ecl-container">
<div class="row justify-content-center">
<div class="col-md-8">
<h1 class="text-center">Authorize access</h1>
<p class="lead">An application is requesting authorization to access data associated with your JupyterHub account</p>
<p>
{{ oauth_client.description }} (oauth URL: {{ oauth_client.redirect_uri }})
would like permission to identify you.
{% if scope_descriptions | length == 1 and not scope_descriptions[0].scope %}
It will not be able to take actions on
your behalf.
{% endif %}
</p>
<form method="post" action="">
<div class="card">
<div class="card-header">
<p class="h5">This will grant the application permission to:</p>
</div>
<div class="card-body">
<input type="hidden" name="_xsrf" value="{{ xsrf }}" />
{# these are the 'real' inputs to the form -#}
{% for scope in allowed_scopes %}<input type="hidden" name="scopes" value="{{ scope }}" />{% endfor %}
{% for scope_info in scope_descriptions %}
<div class="checkbox input-group">
<label>
{# disabled because it's required #}
<input type="checkbox"
class="ecl-checkbox__input"
name="raw-scopes"
checked="true"
title="This authorization is required"
disabled="disabled" />
<span>
{{ scope_info['description'] }}
{% if scope_info['filter'] %}Applies to {{ scope_info['filter'] }}.{% endif %}
</span>
</label>
</div>
{% endfor %}
</div>
<div class="card-footer">
<button type="submit" class="form-control ecl-button ecl-button--primary mt-2">Authorize</button>
</div>
</div>
</form>
</div>
</div>
</div>
{% endblock main %
69 changes: 66 additions & 3 deletions ec-templates/page.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,25 @@

{% block stylesheet %}
{{ super() }}

<style>
html {
font-size: 100%;
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.site-footer-fix {
margin-top: auto;
}
.container-fix {
flex-grow: 1;
}
</style>

<link
rel="stylesheet"
href="{{ static_url('css/ecl-ec-default.css') }}"
Expand Down Expand Up @@ -35,6 +54,7 @@
media="print"
/>
{% endblock stylesheet %}

{% block script %}
{{ super() }}
<script src="{{ static_url('js/ecl-ec.js') }}"></script>
Expand Down Expand Up @@ -258,8 +278,51 @@
</header>
{% endblock nav_bar %}

{% block announcement %}
{% if announcement %}
<div
class="ecl-notification ecl-notification--info"
data-ecl-notification
role="alert"
data-ecl-auto-init="Notification"
>
<svg
class="ecl-icon ecl-icon--l ecl-notification__icon"
focusable="false"
aria-hidden="false"
role="img"
>
<title>Information</title>
<use xlink:href="{{ static_url('images/icons.svg') }}#information"></use>
</svg>
<div class="ecl-notification__content">
<button
class="ecl-button ecl-button--tertiary ecl-notification__close ecl-button--icon-only"
type="button"
data-ecl-notification-close
>
<span class="ecl-button__container"
><span class="ecl-button__label" data-ecl-label="true">Close</span
><svg
class="ecl-icon ecl-icon--m ecl-button__icon"
focusable="false"
aria-hidden="true"
data-ecl-icon
>
<use
xlink:href="{{ static_url('images/icons.svg') }}#close"
></use></svg
></span>
</button>
<div class="ecl-notification__title">Announcement</div>
<div class="ecl-notification__description">{{ announcement | safe }}</div>
</div>
</div>
{% endif %}
{% endblock announcement %}

{% block footer %}
<footer class="ecl-site-footer">
<footer class="ecl-site-footer site-footer-fix">
<div class="ecl-container ecl-site-footer__container">
<div class="ecl-site-footer__row">
<div class="ecl-site-footer__column">
Expand All @@ -275,8 +338,8 @@
>
</div>
<div class="ecl-site-footer__description">
This site is managed by:<br />Directorate-General for Communications
Networks, Content and Technology
This site is managed by:<br />Directorate-General for
Communications Networks, Content and Technology
</div>
<ul class="ecl-site-footer__list">
<li class="ecl-site-footer__list-item">
Expand Down
Loading

0 comments on commit 857a93e

Please sign in to comment.