Skip to content

Commit

Permalink
Update style of Notebooks front page
Browse files Browse the repository at this point in the history
Update also styles to work with JupyterHub v5 and minor text fixes
  • Loading branch information
enolfc committed Nov 19, 2024
1 parent 9d16b31 commit 18da4d1
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 154 deletions.
8 changes: 2 additions & 6 deletions templates/401.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,8 @@ <h1>Unauthorized!</h1>
</p>
<p>
See
<a href="https://docs.egi.eu/users/dev-env/notebooks/#notebooks-for-researchers/">
Documentation related to EGI Notebooks</a> about granting access. You can also
<a href="https://marketplace.eosc-portal.eu/services/egi-notebooks">place an
order in EOSC portal</a>
for the Notebooks service if you are interested in your own community deployment.
<a href="https://docs.egi.eu/users/dev-env/notebooks/">
Documentation related to EGI Notebooks</a> about granting access.
</p>
</div>

{% endblock %}
156 changes: 84 additions & 72 deletions templates/egi-login.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,84 +4,96 @@
{% set announcement = announcement_login %}
{% endif %}

{% block stylesheet %}

{{ super() }}
<style>
/* Check-in button */
.button-blue-background {
margin: 20px 20px 0px 0px;
padding: 20px 30px 20px 80px;
border-style: solid;
border-width: 2px;
border-color: #005faa;
border-radius: 100vw;
background-color: #005faa;
background-image: url({{ static_url('images/egi-logo-white.svg') }});
background-position: 30px 43%;
background-size: 36px;
background-repeat: no-repeat;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
font-family: ‘DM Sans’, sans-serif;
color: #fff;
font-size: 16px;
font-weight: 700;
}

.button-blue-background:hover {
border-color: #005faa;
background-color: #fff;
background-image: url({{ static_url('images/egi-logo.svg') }});
color: #005faa;
}
</style>
{% endblock stylesheet %}

{% block nav_bar_right_items %}
<li>
<span id="user-guide">
<a role="button" class="navbar-btn btn-sm btn btn-egi" href="https://docs.egi.eu/users/notebooks/">
<i aria-hidden="true" class="fa fa-book"></i> User Guide</a>
</span>
</li>
{% endblock %}

{% block main %}
{% block login %}
<div id="login-main" class="container">
<div class="jumbotron">
{% block main_intro %}
<h1><img alt="Notebooks Logo" src="{{ static_url('images/egi-icon-notebooks.svg') }}" height="100">Notebooks</h1>
<p>
Notebooks is an environment based on <a href="http://jupyter.org/">Jupyter</a> and
the <a href="https://www.egi.eu/services/cloud-compute/">EGI cloud service</a> that
offers a browser-based, scalable tool for interactive data analysis. The Notebooks
environment provides users with notebooks where they can combine text, mathematics,
computations and rich media output.
</p>
<p>
Access requires a valid <a href="https://docs.egi.eu/users/check-in/signup">EGI account</a>
and <a href="https://aai.egi.eu/registry/co_petitions/start/coef:111">enrolling to the
vo.notebooks.egi.eu VO</a>.
</p>
{% endblock main_intro %}
{% block checkin_button %}
<div class="spacer-sm"></div>
<p class="text-center">
<a role="button" class="btn button-blue-background btn-lg" href="{{authenticator_login_url}}">
Continue with EGI Check-in
</a>
</p>
<div class="spacer-sm"></div>
{% endblock checkin_button %}
{% block main_outro %}
<p>
User communities/advanced users can have their customised EGI Notebooks service
instance. EGI offers consultancy and support, as well as can operate the setup.
Order a <a href="https://marketplace.eosc-portal.eu/services/egi-notebooks">community
notebooks instance via the EOSC Marketplace</a>.
</p>
{% endblock main_outro %}
</div>

<div class="container">
<div class="container-fluid">
<div class="row d-flex align-items-center py-5">
<div class="col-lg-8 px-5">
<h1>Notebooks</h1>
<p class="fs-3 py-5">
Create interactive documents with live code, visualisations and text
</p>
{% block login %}
<a
role="button"
class="btn button-blue-background"
href="{{authenticator_login_url}}"
>Continue with EGI Check-in</a>
{% endblock login %}
</div>
<div class="col-lg-4 rounded-5 bg-body-secondary p-5 text-center">
<img
alt="Full Notebooks Logo"
src="{{ static_url('images/full-notebooks.png') }}"
width="85%"
/>
</div>
</div>
</div>
</div>
{% endblock login %}

{% block footer %}
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-sm-1">
<img alt="EU logo" src="{{ static_url('images/eu-flag.png') }}" height="40">
</div>
<div class="col-sm-1">
<a href="https://www.egi.eu/projects/egi-ace/">
<img alt="EGI-ACE logo" src="{{ static_url('images/egi-ace.png') }}" height="40">
</a>
</div>
<div class="col-sm-1">
<a href="https://www.cesnet.cz/?lang=en">
<img alt="CESNET logo" src="{{ static_url('images/cesnet.png') }}" height="40">
</a>
</div>
<div class="col-sm-5">
{{ service_name }} is a service provided by <a href="https://www.cesnet.cz/?lang=en">CESNET</a>,
co-funded by <a href="https://www.egi.eu/projects/egi-ace/">EGI-ACE</a>.
</div>
<div class="col-sm-4 text-right">
<a href="/policies/privacy-policy.html">Privacy Notice</a> |
<a href="/policies/terms-of-use.html">Terms of Use</a>
</div>
</div>
<div class="container">
<div class="container-fluid p-5 fs-5">
{% block main_about %}
<p>
Notebooks is an environment based on
<a href="http://jupyter.org/">Jupyter</a> and the
<a href="https://www.egi.eu/services/cloud-compute/">EGI cloud service</a>
that offers a browser-based, scalable tool for interactive data analysis.
The service provides users with notebooks where they can combine text,
mathematics, computations and rich media output.
</p>
<p>
Access requires a valid
<a href="https://docs.egi.eu/users/check-in/signup">EGI account</a> and
<a href="https://aai.egi.eu/registry/co_petitions/start/coef:111"
>enrolling to the vo.notebooks.egi.eu VO</a>.
</p>
<p>
User communities/advanced users can have their customised EGI Notebooks service
instance. EGI offers consultancy and support, as well as can operate the setup.
<a href="https://docs.egi.eu/support/">Get in touch for more information!</a>
</p>
{% endblock main_about %}
</div>
</footer>
{% endblock %}
</div>

{% endblock %}
{% endblock main %}
105 changes: 29 additions & 76 deletions templates/page.html
Original file line number Diff line number Diff line change
@@ -1,86 +1,39 @@
<!-- htmlhint doctype-first:false -->
{% extends "templates/page.html" %}

{% set service_name = service_name|default('Notebooks') %}

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

<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=DM+Sans">
<style>
.jumbotron {
background-color: transparent;
}
.btn-egi {
background-color: #0067b1;
color: #fff;
}
.btn-egi:hover {
color: #999999;
}
.spacer-lg { margin:0; padding:0; height:100px; }
.spacer-sm { margin:0; padding:0; height:50px; }

/* Footer */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
font-family: 'DM Sans', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
}

.egi-logo {
height: 60px;
margin-top: 5px;
margin-right: 20px;
}

.navbar {
min-height: 70px;
}

.button-blue-background {
margin: 20px 20px 0px 0px;
padding: 20px 30px 20px 80px;
border-style: solid;
border-width: 2px;
border-color: #005faa;
border-radius: 100vw;
background-color: #005faa;
background-image: url({{ static_url('images/egi-logo-white.svg') }});
background-position: 30px 43%;
background-size: 36px;
background-repeat: no-repeat;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
font-family: ‘DM Sans’, sans-serif;
color: #fff;
font-size: 18px;
font-weight: 700;
}

.button-blue-background:hover {
background-color: #fff;
background-image: url({{ static_url('images/egi-logo.svg') }});
color: #005faa;
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans"/>
<link rel="stylesheet" href="{{ static_url('css/egi.css') }}"/>
{% endblock %}


{% block title %}EGI {{ service_name }}{% endblock %}

{% block logo %}
<span id="jupyterhub-logo" class="pull-left">
<a href="{{logo_url or base_url}}"><img src="{{ static_url('images/egi-logo.svg') }}" alt="EGI {{ service_name }}" class="egi-logo" title="Home"></a>
</span>
{% endblock %}
{% block footer %}
<footer class="footer bg-body-secondary">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-6">
<a href="https://www.egi.eu/">
<img
alt="EGI logo"
src="{{ static_url('images/egi-logo.svg') }}"
/></a>
<a href="https://www.cesnet.cz/?lang=en">
<img
alt="CESNET logo"
src="{{ static_url('images/cesnet.png') }}"
/></a>
{{ service_name }} is an <a href="https://www.egi.eu">EGI</a> service provided by
<a href="https://www.cesnet.cz/?lang=en">CESNET</a>
</div>
<div class="col-md-6 text-end">
<a href="https://docs.egi.eu/users/dev-env/notebooks/">User guide</a> |
<a href="/policies/privacy-policy.html">Privacy Notice</a> |
<a href="/policies/terms-of-use.html">Terms of Use</a>
</div>
</div>
</div>
</footer>
{% endblock footer %}

0 comments on commit 18da4d1

Please sign in to comment.