airavata_mft/templates/base.html (155 lines of code) (raw):
{% load static %}
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
{% block scripts %}
{% endblock scripts %}
{% render_bundle 'chunk-vendors' config='DEFAULT'%}
{% render_bundle 'app' config='DEFAULT'%}
<body>
<nav class="navbar navbar-light header shadow-sm">
<div class="container-fluid">
<div class="col-2">
<a class="navbar-brand" href = "{% url 'workspace:storages' %}">
<div class="row">
<div class="col-5">
<img class="logo" src="{% static 'images/airavata-logo.png' %}">
</div>
<div>
<div class="col-8">
<div class="row apache">
<span class="header-text apache-text">APACHE</span>
</div>
<div class="row airavata">
<span class="header-text airavata-text">AIRAVATA</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col-8 search-div">
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
<div class="col-2">
<div class="row user-div">
<i class="fa fa-user-circle fa-2x"></i>
<div class="dropdown">
<a class="btn dropdown-toggle header-drop-down" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Logout</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- side navigation bar (Needs to move to a vue template)-->
<div class="container-fluid">
<div class="row">
<div class="col-2" style="padding-top: 1.5%">
<nav class="nav flex-column">
<a class="c-nav__item selected-nav" href= "{% url 'workspace:storages' %}">
<i class="fa fa-database nav-icon"></i>Storage Units
</a>
<a class="c-nav__item" href="#">
<i class="fa fa-users nav-icon"></i>Users
</a>
<a class="c-nav__item" href="#">
<i class="fa fa-cogs nav-icon"></i>Agents
</a>
<a class="c-nav__item" href="#">
<i class="fa fa-book nav-icon"></i>Audit
</a>
</nav>
</div>
<div class="col-10 main-app">
{% block app %}
{% endblock app %}
</div>
</div>
</div>
</body>
<style>
/* Side Navigation Bar */
.selected-nav{
margin-right: 0.5em;
color: lightblue;
padding: 1em;
font-size: 1rem;
display: block;
}
.c-nav__item {
color: grey;
padding: 1em;
font-size: 1rem;
display: block;
background-color: white;
padding-bottom: 0%;
}
.c-nav__item:hover{
background-color: #d6d8db!important;
}
.nav-icon {
padding-right: 10%;
padding-left: 14%;
}
.c-nav__item:hover{
color: #17a2b8;
text-decoration: none;
font-weight:bold;
}
/* Top Navigation */
.header {
background-color: white;
padding-top: 2%;
}
.logo{
height: 57px;
}
.header-text{
color: grey;
}
.header-drop-down {
color: black;
background-color: white;
border: white;
}
.apache {
height: 0.7em;
}
.apache-text{
font-size: smaller;
}
.airavata-text{
font-size: larger;
}
/* Bootstrap 4 text input with search icon */
.form-control {
padding-left: 2.375rem;
background-color: #DCDCDC;
max-width: 58%;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
.search-div{
padding-left: 0%;
}
/* main-app */
.main-app{
padding-top: 1.5%
}
</style>