This is an automated email from the ASF dual-hosted git repository. yasith pushed a commit to branch merge-portals in repository https://gitbox.apache.org/repos/asf/airavata-portals.git
commit 1a08e482a702ab8399b710838da4ec0dd7d84d32 Author: Aarushi Bisht <[email protected]> AuthorDate: Sat Apr 25 15:37:35 2020 -0400 fixed css issues --- .../js/containers/Storage.vue | 3 +- airavata_mft/static/images/airavata-logo.png | Bin 0 -> 5510 bytes airavata_mft/templates/base.html | 118 ++++++++++++++++++++- 3 files changed, 115 insertions(+), 6 deletions(-) diff --git a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue index 50f8e4672..f893fb6e5 100644 --- a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue +++ b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/Storage.vue @@ -1,5 +1,5 @@ <template> - <div class="container"> + <div class="row"> <div class="col-8"> <h1 class="h4 mb-4">{{heading}}</h1> @@ -51,7 +51,6 @@ </tbody> </table> </div> - </div> </template> diff --git a/airavata_mft/static/images/airavata-logo.png b/airavata_mft/static/images/airavata-logo.png new file mode 100644 index 000000000..65b39992c Binary files /dev/null and b/airavata_mft/static/images/airavata-logo.png differ diff --git a/airavata_mft/templates/base.html b/airavata_mft/templates/base.html index 3759e5d9c..3c4921f01 100644 --- a/airavata_mft/templates/base.html +++ b/airavata_mft/templates/base.html @@ -1,7 +1,7 @@ {% 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 %} @@ -9,7 +9,117 @@ {% render_bundle 'app' config='DEFAULT'%} <body> <!-- TODO : header and side navigation bar" --> -<p> This is the header</p> -{% block app %} -{% endblock app %} + <nav class="navbar navbar-light header shadow-sm"> + <div class="container-fluid"> + <div class="col-2"> + <a class="navbar-brand" href="#"> + <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" style="height: 15px"> + <span class="header-text" style="font-size: smaller">APACHE</span> + </div> + <div class="row"> + <span class="header-text" style="font-size: larger">AIRAVATA</span> + </div> + </div> + </div> + </div> + </a> + </div> + <div class="col-8" style="padding-left: 0%"> + <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"> + <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">User name</a> + <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <a class="dropdown-item" href="#">Logout</a> + </div> + </div> + </div> + </div> + </div> + </nav> + + +<div class="container-fluid"> + <div class="row"> + <div class="col-2" style="padding-top: 1.5%"> + <nav class="nav flex-column"> + <div style="background-color: lightblue"><a class="c-nav__item selected-nav" href="#"><b>Storage Units</b></a></div> + <div style="background-color: lightblue"><a class="c-nav__item" href="#"><b>Users</b></a></div> + <div style="background-color: lightblue"><a class="c-nav__item" href="#"><b>Agents</b></a></div> + <div style="background-color: lightblue"><a class="c-nav__item" href="#"><b>Audit</b></a></div> + </nav> + </div> + <div class="col-10" style="padding-top: 1.5%"> + {% block app %} + {% endblock app %} + </div> + </div> + +</div> </body> + +<style> + .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; + } + .header { + background-color: white; + padding-top: 2%; + } + .logo{ + height: 57px; + } + .header-text{ + color: grey; + } + + /* Bootstrap 4 text input with search icon */ + + .has-search { + } + .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; + } + .header-drop-down { + color: black; + background-color: white; + border: white; + } +</style>
