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 83d32fdcb94cf0d06fb5049af711ee132b2246f6 Author: Akhil Nagulavancha <[email protected]> AuthorDate: Mon Jun 22 16:47:53 2020 -0400 Improved readability --- .../js/containers/Storage.vue | 181 +++++++++++--------- .../js/containers/StorageResources.vue | 93 ++++++----- .../apps/workspace/templates/container-header.html | 4 +- .../apps/workspace/templates/resources.html | 3 +- airavata_mft/apps/workspace/templates/storage.html | 3 +- airavata_mft/templates/base.html | 186 +++++++++++---------- 6 files changed, 251 insertions(+), 219 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 2cd7bd4b0..3085694dd 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,86 +1,101 @@ <template> - <div class="row"> - <div class="col-7"> - <h1 class="h4 mb-4">{{heading}}</h1> - </div> - <div class="col-4"> - <div class="btn-toolbar"> - <div class="btn-group mr-4" role="group"> - <div class="dropdown"> - <button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button> - <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> - <a class="dropdown-item" href="#" @click="sortBy('name')">Name</a> - <a class="dropdown-item" href="#" @click="sortBy('size')">Size</a> - </div> - </div> - </div> - <div class="btn-group mr-4" role="group"> - <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-bars" v-on:click="layout = 'list'" v-bind:class="{ 'active': layout == 'list'}"></i></button> - <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th" v-on:click="layout = 'grid'" v-bind:class="{ 'active': layout == 'grid'}"></i></button> - </div> - <div class="btn-group mr-4 new-unit" role="group"> - <button class="btn btn-info btn-sm"><i class="fa fa-plus plus-icon"></i>Add new unit</button> - </div> - </div> - </div> - <!-- Dialog box to show description of each storage unit --> - <b-modal class="modal-dialog modal-dialog-centered" :title="selectedStorage.name" id="description-dialog" hide-footer> - <div class="container"> - <div class="row"> - <div class="col-6"> - <p v-if="selectedStorage.host"><b>Host</b></p> - <p v-if="selectedStorage.port"><b>Port</b></p> - <p v-if="selectedStorage.user"><b>User</b></p> - </div> - <div class="col-6"> - <p v-if="selectedStorage.host">{{selectedStorage.host}}</p> - <p v-if="selectedStorage.port">{{selectedStorage.port}}</p> - <p v-if="selectedStorage.user">{{selectedStorage.user}}</p> - </div> - </div> - </div> - <div class="d-flex justify-content-center"> - <b-button class="btn btn-sm btn-info browse" :href="selectedStorage.storageId">Browse</b-button> - </div> - </b-modal> - <table v-if="layout === 'list'" class="table table-hover main-table " > - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Storage size</th> - <th scope="col">Storage occupied</th> - <th scope="col">Last modified</th> - </tr> - </thead> - <tbody> - <tr class="table-item" v-for="storage in storageList" + <div class="row"> + <div class="col-7"> + <h1 class="h4 mb-4">{{heading}}</h1> + </div> + <div class="col-4"> + <div class="btn-toolbar"> + <div class="btn-group mr-4" role="group"> + <div class="dropdown"> + <button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button> + <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <a class="dropdown-item" href="#" @click="sortBy('name')">Name</a> + <a class="dropdown-item" href="#" @click="sortBy('size')">Size</a> + </div> + </div> + </div> + <div class="btn-group mr-4" role="group"> + <button class="btn btn-sm btn-outline-secondary list"> + <i class="fa fa-bars" v-on:click="layout = 'list'" v-bind:class="{ 'active': layout == 'list'}"></i> + </button> + <button class="btn btn-sm btn-outline-secondary list"> + <i class="fa fa-th" v-on:click="layout = 'grid'" v-bind:class="{ 'active': layout == 'grid'}"></i> + </button> + </div> + <div class="btn-group mr-4 new-unit" role="group"> + <button class="btn btn-info btn-sm"> + <i class="fa fa-plus plus-icon"></i>Add new unit + </button> + </div> + </div> + </div> + <!-- Dialog box to show description of each storage unit --> + <b-modal class="modal-dialog modal-dialog-centered" :title="selectedStorage.name" id="description-dialog" hide-footer> + <div class="container"> + <div class="row"> + <div class="col-6"> + <p v-if="selectedStorage.host"> + <b>Host</b> + </p> + <p v-if="selectedStorage.port"> + <b>Port</b> + </p> + <p v-if="selectedStorage.user"> + <b>User</b> + </p> + </div> + <div class="col-6"> + <p v-if="selectedStorage.host">{{selectedStorage.host}}</p> + <p v-if="selectedStorage.port">{{selectedStorage.port}}</p> + <p v-if="selectedStorage.user">{{selectedStorage.user}}</p> + </div> + </div> + </div> + <div class="d-flex justify-content-center"> + <b-button class="btn btn-sm btn-info browse" :href="selectedStorage.storageId">Browse</b-button> + </div> + </b-modal> + <table v-if="layout === 'list'" class="table table-hover main-table " > + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Storage size</th> + <th scope="col">Storage occupied</th> + <th scope="col">Last modified</th> + </tr> + </thead> + <tbody> + <tr class="table-item" v-for="storage in storageList" :key="storage.storageId" @click="showDescription(storage)"> - <th scope="row"><i class="fa fa-database unit-name-icon" aria-hidden="true"></i>{{storage.name}}</th> - <td>{{storage.size}}</td> - <td> - <div class="progress storage-progress"> - <!-- TODO: storage value should be picked from storage.occupied --> - <div class="progress-bar red-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> - <div class="progress-bar green-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> - </div> - </td> - <td>{{storage.lastModified}}</td> - </tr> - </tbody> - </table> - <div v-if="layout === 'grid'" class="table table-hover main-table " > - <!-- Icons of respective storages should be should be added --> - <ul :style="gridStyle" class="card-list "> - <li v-for="storage in storageList " v-bind:key="storage.storageId" class="card-item " @click="showDescription(storage)"> - <br>{{ storage.name }}<br/> - <br>{{ storage.size}}<br/> - </li> - </ul> - </div> - </div> -</template> - -<script> + <th scope="row"> + <i class="fa fa-database unit-name-icon" aria-hidden="true"></i>{{storage.name}} + </th> + <td>{{storage.size}}</td> + <td> + <div class="progress storage-progress"> + <!-- TODO: storage value should be picked from storage.occupied --> + <div class="progress-bar red-bar" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> + <div class="progress-bar green-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </td> + <td>{{storage.lastModified}}</td> + </tr> + </tbody> + </table> + <div v-if="layout === 'grid'" class="table table-hover main-table " > + <!-- Icons of respective storages should be should be added --> + <ul :style="gridStyle" class="card-list "> + <li v-for="storage in storageList " v-bind:key="storage.storageId" class="card-item " @click="showDescription(storage)"> + <br>{{ storage.name }} + <br/> + <br>{{ storage.size}} + <br/> + </li> + </ul> + </div> + </div> + </template> + <script> //TODO: implement pagination export default { name: 'storage', @@ -111,9 +126,9 @@ export default { } } } -</script> -<style scoped> + </script> + <style scoped> .new-unit{ width: 140px; } diff --git a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue index 2dd48e3a2..f0618c43f 100644 --- a/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue +++ b/airavata_mft/apps/workspace/static/airavata_mft_workspace/js/containers/StorageResources.vue @@ -1,48 +1,55 @@ <template> - <div class="row"> - <div class="col-7"> - <h1 class="h4 mb-4">{{heading}}</h1> - </div> - <div class="col-4"> - <div class="btn-toolbar"> - <div class="btn-group mr-4" role="group"> - <div class="dropdown"> - <button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button> - <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> - <a class="dropdown-item" href="#" @click="sortBy('name')">Name</a> - <a class="dropdown-item" href="#" @click="sortBy('size')">Size</a> - </div> - </div> - </div> - <div class="btn-group mr-4" role="group"> - <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-bars"></i></button> - <button class="btn btn-sm btn-outline-secondary list"><i class="fa fa-th"></i></button> - </div> - </div> - </div> - <table class="table table-hover main-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Size</th> - <th scope="col">Last Modified</th> - <th scope="col"></th> - </tr> - </thead> - <tbody> - <tr v-for="resource in resources" + <div class="row"> + <div class="col-7"> + <h1 class="h4 mb-4">{{heading}}</h1> + </div> + <div class="col-4"> + <div class="btn-toolbar"> + <div class="btn-group mr-4" role="group"> + <div class="dropdown"> + <button class="btn btn-sm btn-outline-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sort by</button> + <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <a class="dropdown-item" href="#" @click="sortBy('name')">Name</a> + <a class="dropdown-item" href="#" @click="sortBy('size')">Size</a> + </div> + </div> + </div> + <div class="btn-group mr-4" role="group"> + <button class="btn btn-sm btn-outline-secondary list"> + <i class="fa fa-bars"></i> + </button> + <button class="btn btn-sm btn-outline-secondary list"> + <i class="fa fa-th"></i> + </button> + </div> + </div> + </div> + <table class="table table-hover main-table"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Size</th> + <th scope="col">Last Modified</th> + <th scope="col"></th> + </tr> + </thead> + <tbody> + <tr v-for="resource in resources" :key="resource.resourceId"> - <th scope="row"><i class="fa fa-folder resource-name-icon"></i> -{{resource.name}}</th> - <td>{{resource.size}}</td> - <td>{{resource.lastModified}}</td> - <td><b-button class="btn btn-info btn-sm transfer">Transfer</b-button></td> - </tr> - </tbody> - </table> - </div> + <th scope="row"> + <i class="fa fa-folder resource-name-icon"></i> +{{resource.name}} + </th> + <td>{{resource.size}}</td> + <td>{{resource.lastModified}}</td> + <td> + <b-button class="btn btn-info btn-sm transfer">Transfer</b-button> + </td> + </tr> + </tbody> + </table> + </div> </template> - <script> export default { name: "StorageResources.vue", @@ -59,8 +66,8 @@ } } } -</script> +</script> <style scoped> .main-table{ width: 83%!important; diff --git a/airavata_mft/apps/workspace/templates/container-header.html b/airavata_mft/apps/workspace/templates/container-header.html index 3f00db8a8..cdb19131f 100644 --- a/airavata_mft/apps/workspace/templates/container-header.html +++ b/airavata_mft/apps/workspace/templates/container-header.html @@ -9,6 +9,6 @@ {% endblock scripts %} {% block app %} - <div id={{ bundle_name }}> - </div> + +<div id={{ bundle_name }}></div> {% endblock app %} \ No newline at end of file diff --git a/airavata_mft/apps/workspace/templates/resources.html b/airavata_mft/apps/workspace/templates/resources.html index 9db570aec..fdd3e2ddf 100644 --- a/airavata_mft/apps/workspace/templates/resources.html +++ b/airavata_mft/apps/workspace/templates/resources.html @@ -1,6 +1,7 @@ {% extends "container-header.html" %} {% block app %} - <div id={{ bundle_name }} data-resources-list="{{ data }}" data-title ="{{ title }}"></div> + +<div id={{ bundle_name }} data-resources-list="{{ data }}" data-title ="{{ title }}"></div> {% endblock app %} diff --git a/airavata_mft/apps/workspace/templates/storage.html b/airavata_mft/apps/workspace/templates/storage.html index 84f8413f3..d93554a1a 100644 --- a/airavata_mft/apps/workspace/templates/storage.html +++ b/airavata_mft/apps/workspace/templates/storage.html @@ -1,6 +1,7 @@ {% extends "container-header.html" %} {% block app %} - <div id={{ bundle_name }} data-storage-list="{{ data }}" data-title ="{{ title }}"></div> + +<div id={{ bundle_name }} data-storage-list="{{ data }}" data-title ="{{ title }}"></div> {% endblock app %} diff --git a/airavata_mft/templates/base.html b/airavata_mft/templates/base.html index 0f0120f58..6e66c8bfe 100644 --- a/airavata_mft/templates/base.html +++ b/airavata_mft/templates/base.html @@ -1,76 +1,84 @@ {% 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> + <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="#"> - <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="#"><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"> + <body> + <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 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="#"> + <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> + </div> + </div> + </body> + <style> + /* Side Navigation Bar */ .selected-nav{ margin-right: 0.5em; color: lightblue; @@ -89,6 +97,17 @@ .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%; @@ -99,7 +118,21 @@ .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 { @@ -119,36 +152,11 @@ pointer-events: none; color: #aaa; } - .header-drop-down { - color: black; - background-color: white; - border: white; - } - .nav-icon { - padding-right: 10%; - padding-left: 14%; - } - .c-nav__item:hover{ - color: #17a2b8; - text-decoration: none; - font-weight:bold; - } - .apache { - height: 0.7em; - } - .apache-text{ - font-size: smaller; - } - .airavata-text{ - font-size: larger; - } .search-div{ padding-left: 0%; } - .user-div{ - margin-top: -10%; - } + /* main-app */ .main-app{ padding-top: 1.5% } -</style> +</style> \ No newline at end of file
