django_airavata/templates/base.html (241 lines of code) (raw):
{% load navigation_tags static %}
{% load render_bundle from webpack_loader %}
{% load humanize %}
<!DOCTYPE html>
<head>
{% favicon %}
{% include "./django_airavata/google_analytics.html" %}
{% render_bundle 'chunk-vendors' 'css' 'COMMON' %}
{% render_bundle 'app' 'css' 'COMMON' %}
{% block css %}
{% endblock %}
</head>
<style>
#airavata-spinner {
display: none;
}
.loading {
position: absolute;
z-index: 2000;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.5);
}
/* Spinner css https://github.com/tobiasahlin/SpinKit*/
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
top: calc(50% - 40px);
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
color: #007BFF;
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: currentColor;
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
animation: sk-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
0%,
10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes sk-foldCubeAngle {
0%,
10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
</style>
<body>
<header class=c-header>
{% block header %}
{% gateway_icon %}
{% endblock %}
<div class=c-header__title><a href="/">{% block title %}{% gateway_title %}{% endblock %}</a>
</div>
{% if user.is_authenticated %}
<div class=c-header__controls>
<div id="gateway-notices" data-unread-count="{{ unread_notifications }}" data-notices="{{ notifications }}"></div>
<div class="btn-group ml-3">
<div class=dropdown>
<a href=# class="dropdown-toggle text-dark" id=appDropdownMenuButton data-toggle=dropdown aria-haspopup=true
aria-expanded=false>
{% if current_airavata_app %}
<i class="fa {{ current_airavata_app.fa_icon_class }} mr-2"></i>
{{ current_airavata_app.verbose_name }}
{% elif current_custom_app %}
<i class="fa {{ current_custom_app.fa_icon_class }} mr-2"></i>
{{ current_custom_app.verbose_name }}
{% else %}
Menu
{% endif %}
</a>
<div class=dropdown-menu aria-labelledby=appDropdownMenuButton>
{% for app in airavata_apps %}
{% if app == current_airavata_app %}
<a class="dropdown-item active" href="{% url app.url_home %}">
<i class="fa {{ app.fa_icon_class }} mr-2"></i>{{ app.verbose_name }}
</a>
{% else %}
<a class="dropdown-item" href="{% url app.url_home %}">
<i class="fa {{ app.fa_icon_class }} mr-2"></i>{{ app.verbose_name }}
</a>
{% endif %}
{% endfor %}
{% if custom_apps|length > 0 %}
<div class="dropdown-divider"></div>
{% for app in custom_apps %}
{% if current_custom_app and app.label == current_custom_app.label %}
<a class="dropdown-item active" href="{% url app.url_home %}">
<i class="fa {{ app.fa_icon_class }} mr-2"></i>{{ app.verbose_name }}
</a>
{% else %}
<a class="dropdown-item" href="{% url app.url_home %}">
<i class="fa {{ app.fa_icon_class }} mr-2"></i>{{ app.verbose_name }}
</a>
{% endif %}
{% endfor %}
{% endif %}
{% main_menu_navs %}
</div>
</div>
</div>
<div class="btn-group ml-3">
<div class=dropdown>
<a href=# class="dropdown-toggle text-dark" id=dropdownMenuButton data-toggle=dropdown aria-haspopup=true
aria-expanded=false>
<i class="fa fa-user mr-2"></i>
{{ request.user.first_name }} {{ request.user.last_name }}
</a>
<div class=dropdown-menu aria-labelledby=dropdownMenuButton>
<a class=dropdown-item href="{% url 'django_airavata_auth:user_profile' %}">
User Settings
<i class="fa fa-user-cog"></i>
</a>
<a class=dropdown-item href="{% url 'django_airavata_auth:logout' %}">
Logout <i class="fa fa-sign-out-alt"></i>
</a>
</div>
</div>
</div>
</div>
{% endif %}
</header>
<div class=stage>
<div id="airavata-spinner" class="loading">
<div class="sk-folding-cube" :style="{ color: color }">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</div>
<nav class=c-nav>
{% block nav-items %}
{% for nav_item in airavata_app_nav %}
<a href="{% url nav_item.url %}" class="c-nav__item {% if nav_item.active %}is-active{% endif %}" data-toggle=tooltip data-placement=right title="{{ nav_item.label }}">
<i class="{{ nav_item.icon }}"></i> <span class=sr-only>{{ nav_item.label }}</span>
</a>
{% endfor %}
{% for nav_item in custom_app_nav %}
<a href="{% url nav_item.url %}" class="c-nav__item {% if nav_item.active %}is-active{% endif %}" data-toggle=tooltip data-placement=right title="{{ nav_item.label }}">
<i class="{{ nav_item.icon }}"></i> <span class=sr-only>{{ nav_item.label }}</span>
</a>
{% endfor %}
{% endblock %}
</nav>
{% comment %}
See MainLayout.vue which should always be the root component rendered in
the 'content' block
{% endcomment %}
{% block content %}
{% endblock %}
</div>
<script>
// provide data for initializing api's session.Session
window.AiravataPortalSessionData = {{ user_session_data|safe }};
</script>
{% render_bundle 'chunk-vendors' 'js' 'COMMON' %}
{% render_bundle 'app' 'js' 'COMMON' %}
{% if user.is_authenticated %}
{% render_bundle 'notices' 'js' 'COMMON' %}
{% endif %}
{% block scripts %}
{% endblock %}
</body>