Skip to content

Commit

Permalink
EGI Templates update (#143)
Browse files Browse the repository at this point in the history
* EGI Notebooks logo

* Move most of the EGI CSS into a separate file

* Update style of Notebooks front page

Update also styles to work with JupyterHub v5 and minor text fixes

* Linting fixes
  • Loading branch information
enolfc authored Nov 27, 2024
1 parent b20ead2 commit ec32581
Show file tree
Hide file tree
Showing 5 changed files with 155 additions and 154 deletions.
40 changes: 40 additions & 0 deletions static/css/egi.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
* Some style for the footer
*/

html {
position: relative;
min-height: 100%;
}

body {
margin-bottom: 60px; /* Margin bottom by footer height */
font-family: "DM Sans", sans-serif;
}

.footer {
z-index: 10;
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
line-height: 20px;
opacity: 0.8;
font-size: 0.85rem;
}

.footer img {
height: 30px;
margin-right: 20px;
}

#jupyterhub-logo .jpy-logo {
height: 60px;
margin-top: 5px;
margin-right: 20px;
}

/* this is mainly for the policy pages */
address {
white-space: pre-line;
}
Binary file added static/images/full-notebooks.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 ec32581

Please sign in to comment.