| {% 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> |
